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ề . 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. tải chậm và lợi ích của nó trên Core Web Vitals 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 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. đã nảy ra ý tưởng về BlurHash Cách sử dụng tính năng BlurHash Để tạo một hình ảnh mờ, chỉ cần thêm 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 . Thành phần 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ị. fm=blurhash BlurHash BlurHash Trong ví dụ cụ thể này, thành phần React 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. BlurHash 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 ngay hôm nay! tài khoản imgix miễn phí Cũng được xuất bản ở đây.

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Making security fun one episode at a time

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

dài quá đọc không nổi

imgix

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

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

dài quá đọc không nổi

imgix

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

NHỮNG BÀI VIẾT LIÊN QUAN