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

Vì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 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.

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 srcset và cách imgix làm cho quy trình dễ dàng hơn.

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à chi phí hoạt động của CPU . Thuộc tính srcset là một trong những cách tốt nhất hiện nay.

srcset & Mật độ hiển thị

srcset 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ẻ img thật dễ dàng:

 <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 w và dpr , 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 srcset 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:

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" >

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 dpr=1 , dpr=2 và dpr=3 tương ứng cho các nội dung 1x, 2x và 3x của chúng tôi. Tham số dpr hướng dẫn imgix coi tham số w là pixel độc lập với thiết bị (còn được gọi là “pixel CSS”).

Do đó, hình ảnh 400×300 ở dpr=2 sẽ thực sự là hình ảnh 800×600 pixel. Hình ảnh dpr=3 sẽ có kích thước 1200×900 pixel.

Đ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ị 4x xuất hiện. imgix hiện hỗ trợ tới 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 srcset với dpr hiện đang được hỗ trợ rộng rãi .

Sử dụng srcset và sizes với Truy vấn phương tiện

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 srcset . 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 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 sizes , chúng tôi đang nhắm mục tiêu hai truy vấn cho hành vi của hình ảnh.

Ở chế độ xem từ 36em trở lên, hình ảnh sẽ hiển thị ở 1/3 chiều rộng của chế độ xem.

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>.

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 srcset và imgix.

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 srcset 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.

May mắn thay, nhiều thư viện imgix có thể tự động tạo một srcset tối ưu cho bạn.

Sử dụng fit=max

Việc sử dụng tham số fit=max 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 dpr=3 , sẽ không có bất kỳ phép ngoại suy hình ảnh nào. Đọc thêm về fit trong tài liệu.

Sử dụng auto=format

Tham số auto=format 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.

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ề Thương lượng nội dung tự động trong tài liệu.

Sử dụng chất lượng biến

Khi cài đặt dpr 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ố q 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.

?q=80 Kích thước hình ảnh là 21,3kB. Hãy dùng thử và xem sự khác biệt trong Sandbox .

?dpr=2&q=40 Kích thước hình ảnh là 34,7kB. Hãy dùng thử và thấy sự khác biệt trong Sandbox.

?dpr=3&q=20 Kích thước hình ảnh là 42,1kB. 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ụ srcset DPR của chúng tôi:

 <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>