Vì  nên việc tối ưu hóa hình ảnh là vô cùng quan trọng để vận hành một trang web hoạt động hiệu quả. Mỗi byte bạn không phải chuyển để phục vụ nội dung của mình có nghĩa là trang gọn gàng hơn và thời gian tải nhanh hơn cho người dùng của bạn. gần 50% trọng lượng của một trang điển hình được tạo thành từ hình ảnh  Hướng dẫn này bao gồm thông tin chi tiết về cách sử dụng thuộc tính   và cách imgix làm cho quy trình dễ dàng hơn. srcset  Cung cấp hình ảnh có kích thước chính xác là rất quan trọng vì nó có thể giảm thiểu số byte được truyền và   . Thuộc tính   là một trong những cách tốt nhất hiện nay.  chi phí hoạt động của CPU srcset  srcset & Mật độ hiển thị    cung cấp một cách đơn giản để chỉ định các hình ảnh khác nhau cho các độ phân giải thiết bị khác nhau. Nó cho phép các trang web cung cấp các phiên bản hình ảnh 2x, 3x hoặc cao hơn cho các thiết bị hiện đại có màn hình độ phân giải cao. Sử dụng nó trong thẻ   thật dễ dàng: srcset img   <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >  Mặc dù điều này mang lại nội dung tốt nhất cho người dùng, nhưng nó chuyển gánh nặng cho dịch vụ để tạo và lưu trữ từng phiên bản của mọi nội dung. Điều này có thể khiến chi phí lưu trữ tăng cao và bạn có thể không bao giờ phân phát mọi nội dung mà mình tạo ra.  Khi xử lý một thư viện lớn hoặc với nội dung do người dùng tạo, điều này là không thể kiểm soát được.  Với imgix, toàn bộ thư viện hình ảnh của bạn sẵn sàng ngay lập tức   . srcset  Sử dụng srcset Với imgix  Sử dụng các tham số URL imgix   và   , chúng ta có thể đơn giản hóa lượng nỗ lực cần thiết để tạo các thuộc tính   trên hình ảnh của mình. Đối với ví dụ này, chúng tôi sẽ sử dụng hình ảnh tại: w dpr srcset   https://assets.imgix.net/examples/bluehat.jpg  Chúng tôi muốn phân phối hình ảnh này ở độ rộng 400 pixel:   <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true  Chúng tôi nhận được một thẻ hình ảnh cung cấp độ phân giải tốt nhất cho từng thiết bị dựa trên tỷ lệ pixel của thiết bị (DPR) của thiết bị đó. imgix sẽ tự động phục vụ nhiều pixel hơn khi được cung cấp tham số   . dpr  Tính tỷ lệ thiết bị-pixel  Bạn có thể thấy rằng chúng tôi đã áp dụng   ,   và   tương ứng cho các nội dung 1x, 2x và 3x của chúng tôi. Tham số   hướng dẫn imgix coi tham số   là   (còn được gọi là “pixel CSS”). dpr=1 dpr=2 dpr=3 dpr w pixel độc lập với thiết bị  Do đó, hình ảnh 400×300 ở   sẽ thực sự là hình ảnh 800×600 pixel. Hình ảnh   sẽ có kích thước 1200×900 pixel.  dpr=2 dpr=3  Điều này mang lại cho bạn những điều tốt nhất của cả hai thế giới: độ phân giải đầy đủ cho các thiết bị hỗ trợ mà không cung cấp nhiều dữ liệu hơn mức cần thiết cho các thiết bị không sử dụng nó. Bằng cách sử dụng imgix, chúng ta chỉ phải lưu trữ nội dung ban đầu và sau đó thao tác nó một cách nhanh chóng, như chúng ta đã thấy ở trên.  Điều này cũng loại bỏ sự đau đầu nếu và khi một thiết bị   xuất hiện. imgix hiện hỗ trợ tới   . 4x dpr=5  Phương pháp này hoạt động tốt nhất với bố cục hình ảnh cố định. Sử dụng   với   hiện đang   . srcset dpr được hỗ trợ rộng rãi  Sử dụng   và   với Truy vấn phương tiện srcset sizes  Một cách tiếp cận khác để xử lý hình ảnh phản hồi cho bố cục linh hoạt là sử dụng định nghĩa kích thước với   . Giải pháp này cung cấp cho bạn khả năng nhắm mục tiêu kích thước dựa trên định nghĩa truy vấn phương tiện trong thuộc tính   . srcset sizes  Trình duyệt sẽ yêu cầu hình ảnh phù hợp nhất hoặc—tùy thuộc vào trình duyệt—sẽ tải hình ảnh tốt nhất từ bộ nhớ cache khi có sẵn.   Ví dụ sau minh họa định cỡ ba hình ảnh với imgix ở chiều rộng 1024, 640 và 480 pixel. Sử dụng thuộc tính   , chúng tôi đang nhắm mục tiêu hai truy vấn cho hành vi của hình ảnh. sizes  Ở chế độ xem từ   trở lên, hình ảnh sẽ hiển thị ở 1/3 chiều rộng của chế độ xem. 36em  Dưới kích thước đó, hình ảnh sẽ hiển thị ở kích thước đầy đủ của chế độ xem. Ở những kích thước đó, trình duyệt sẽ xác định hình ảnh nào sẽ tải khi trang đang hiển thị cho kích thước mục tiêu nhất định.   <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >  Xem Bút <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> của imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) trên <a href="https://codepen.io" target="_blank">CodePen</a>.   https://codepen.io/imgix/pen/VLNZaW?embedable=true  Các phương pháp hay nhất khi sử dụng imgix  Có nhiều điều cần suy nghĩ khi cung cấp hình ảnh tốt nhất có thể với   và imgix. srcset  imgix cung cấp khả năng thêm các thao tác bổ sung để giúp bạn kiểm soát nhiều hơn đối với hình ảnh đầu ra của mình và vì chúng được xác định trong URL nên bạn có thể tinh chỉnh cài đặt của mình và thực hiện các chỉnh sửa ở giai đoạn cuối khi các quyết định thay đổi.  Một trong những thách thức khi sử dụng   là bạn muốn tạo đủ kích thước để hầu hết người dùng của bạn tải xuống hình ảnh có kích thước gần với kích thước họ nhìn thấy trên màn hình, nhưng nếu bạn tạo quá nhiều kích thước thì cuối cùng bạn có thể ảnh hưởng đến bộ đệm -khả năng, có thể có tác động tiêu cực đến hiệu suất. srcset  May mắn thay, nhiều   có thể tự động tạo một   tối ưu cho bạn. thư viện imgix srcset  Sử dụng  fit=max  Việc sử dụng tham số   trên URL imgix sẽ đảm bảo rằng hình ảnh không bao giờ được phân phối lớn hơn kích thước ban đầu của nó. Bằng cách này, khi yêu cầu hình ảnh   , sẽ không có bất kỳ phép ngoại suy hình ảnh nào. Đọc thêm về   trong tài liệu. fit=max dpr=3 fit  Sử dụng  auto=format  Tham số   sẽ cung cấp các hình ảnh WebP nhẹ cho các trình duyệt hỗ trợ nó (Chrome, Firefox, v.v.) và chuyển về định dạng ban đầu cho các phiên bản khác. auto=format  Các định dạng hiện đại hơn như WebP có thể cắt giảm đáng kể lượng dữ liệu hình ảnh được gửi tới máy khách; đôi khi lên tới 35%. Đọc thêm về   trong tài liệu. Thương lượng nội dung tự động  Sử dụng chất lượng biến  Khi cài đặt   với imgix, bạn có thể cân nhắc điều chỉnh chất lượng hình ảnh của mình. Đặt tham số   thành giá trị thấp hơn cho DPR cao hơn cho phép bạn giảm kích thước tệp trong khi vẫn duy trì tập hợp pixel dày đặc hơn cho hình ảnh của mình. dpr q    Kích thước hình ảnh là 21,3kB.   .  ?q=80 Hãy dùng thử và xem sự khác biệt trong Sandbox    Kích thước hình ảnh là 34,7kB.  ?dpr=2&q=40 Hãy dùng thử và thấy sự khác biệt trong Sandbox.     Kích thước hình ảnh là 42,1kB.  ?dpr=3&q=20 Hãy dùng thử và thấy sự khác biệt trong Sandbox.   Thực tiễn phổ biến này được thực hiện dễ dàng hơn với API URL imgix. Điều chỉnh chất lượng hoạt động đặc biệt tốt với các định dạng mất dữ liệu như WebP và JPEG.  Để tất cả chúng cùng nhau  Đây là cách triển khai các ví dụ này như được áp dụng cho ví dụ   DPR của chúng tôi: srcset   <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >  Xem Bút <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> của imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) trên <a href="https://codepen.io" target="_blank">CodePen</a>.  Tóm tắt và hướng dẫn liên quan  Hình ảnh đáp ứng là một lĩnh vực triển khai thay đổi nhanh chóng và các phương pháp khác nhau được áp dụng cho các trường hợp sử dụng khác nhau. Dưới đây là các hướng dẫn khác của chúng tôi liên quan đến các khía cạnh của thiết kế đáp ứng.   Thiết kế cho Retina, Triển khai với imgix   Hình ảnh đáp ứng thế hệ tiếp theo với các gợi ý của khách hàng   Sử dụng imgix với <picture>

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

Hướng dẫn cho người mới bắt đầu: Hình ảnh phản hồi với srcset

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

581 Stories To Learn About Non Fiction

128 Stories To Learn About Charles Dickens

72 Stories To Learn About The Essays Of Adam Smith

581 Stories To Learn About Non Fiction

128 Stories To Learn About Charles Dickens

72 Stories To Learn About The Essays Of Adam Smith

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps