Nâng cao trải nghiệm người dùng trên trang web của bạn với trình giữ chỗ hình ảnh BlurHash

Tại imgix, chúng tôi quan tâm sâu sắc đến trải nghiệm người dùng và hiệu suất trang. Trước đây, chúng ta đã thảo luận về tải chậm và lợi ích của nó trên Core Web Vitals . Về cơ bản, nó trì hoãn tải hình ảnh ngoài màn hình cho đến khi khách truy cập cuộn và hình ảnh đi vào chế độ xem. Nó cho phép tải ít hình ảnh hơn vào bất kỳ thời điểm nào và tăng tốc thời gian tải cho mỗi hình ảnh.

Tuy nhiên, nếu không được thiết lập đúng cách, quá trình tải chậm có thể làm tăng tính không ổn định của bố cục trang, dẫn đến chỉ số Chuyển đổi bố cục tích lũy kém hơn, đây là một trong ba Chỉ số quan trọng chính của trang web.

Để cải thiện tốc độ trang đồng thời giảm thiểu Dịch chuyển bố cục tích lũy, giải pháp tốt nhất là kết hợp tải chậm với BlurHash .

Trong bài viết này, chúng ta sẽ thảo luận về BlurHash là gì và cách áp dụng nó cho hình ảnh của bạn bằng imgix.

Trình giữ chỗ hình ảnh và BlurHash là gì?

Trình giữ chỗ là một tùy chọn tuyệt vời để cải thiện thời gian tải được cảm nhận và cung cấp trải nghiệm người dùng tốt hơn khi kết nối hoặc trang web tải hình ảnh chậm. BlurHash là một thuật toán cho phép bạn tạo một phiên bản nhỏ gọn của trình giữ chỗ hình ảnh.

Thuật toán tạo ra một chuỗi ký tự mã hóa một biểu diễn mờ của hình ảnh, với số lượng ký tự được xác định bởi chất lượng của hình ảnh. Chuỗi đủ ngắn để bạn có thể phân phát trực tiếp trong phần đánh dấu trang của mình và sau đó chuỗi có thể được giải mã thành hình ảnh mờ—mà không cần phải tìm nạp và tải xuống tệp hình ảnh.

Một lợi ích chính của BlurHash là bạn có thể chuyển đổi các tệp hình ảnh lớn thành một lượng dữ liệu nhỏ hơn để hình ảnh bị mờ xuất hiện trong khi tệp gốc vẫn đang tải. Một kỹ sư tại Wolt đã nảy ra ý tưởng về BlurHash trong khi cố gắng tìm giải pháp tốt hơn cho cách tải hình ảnh trên kết nối internet chậm hơn.

Cách sử dụng tính năng BlurHash

Để tạo một hình ảnh mờ, chỉ cần thêm fm=blurhash vào bất kỳ hình ảnh nào để nhận chuỗi BlurHash. Khi bạn có chuỗi BlurHash, bạn có thể sử dụng nó trong thành phần BlurHash . Thành phần BlurHash chịu trách nhiệm giải mã hàm băm thành một hình ảnh có thể hiển thị.

Trong ví dụ cụ thể này, thành phần React BlurHash tạo ra một phần tử canvas trong phần đánh dấu cuối cùng. Lưu ý: đánh dấu được tạo có thể khác một chút tùy thuộc vào thư viện hoặc bộ giải mã khung được sử dụng.

 import './App.css'; import Imgix from "react-imgix"; import { Blurhash } from "react-blurhash"; function App() { return ( <div className="App"> <section className="App-header"> <Blurhash hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" width={600} height={400} /> <Imgix src="https://assets.imgix.net/example-images/puffins.jpg" width={600} height={400} /> </section> </div> ); } export default App;

Khi bạn đã áp dụng mã BlurHash cho hình ảnh của mình, trình giữ chỗ kết quả sẽ giống như sau:

Bao gồm chuỗi BlurHash với đánh dấu của bạn khi xây dựng để đảm bảo người dùng nhìn thấy phiên bản mờ của hình ảnh ngay lập tức.

Để bắt đầu, hãy tạo một tài khoản imgix miễn phí ngay hôm nay!