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.

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

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

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

BÌNH LUẬN

chuyên mục

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

Related Stories

287 Stories To Learn About Blockchain Development

223 Stories To Learn About Science

189 Stories To Learn About Reading Books

178 Stories To Learn About Essay

287 Stories To Learn About Blockchain Development

223 Stories To Learn About Science

189 Stories To Learn About Reading Books

178 Stories To Learn About Essay

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps