Chọn kích thước hình ảnh hữu ích cho màn hình mật độ cao

Một thẻ được hiển thị ở độ rộng 800 css pixel có thể sử dụng một ứng cử viên hình ảnh rộng 1600 pixel hình ảnh làm ví dụ 2x. Trình duyệt có thể chọn một nguồn thích hợp dựa trên bố cục, mật độ thiết bị và các điều kiện khác khi trang web cung cấp đánh dấu hình ảnh đáp ứng. Tệp 1600-pixel không có nghĩa là thẻ phải chiếm 1600 pixel CSS trên trang.

Đo lường bố cục thực tế trước khi xuất. Một cột bài viết, một biểu ngữ toàn chiều rộng và một thẻ sản phẩm nhỏ hiếm khi cần cùng một kích thước nguồn. Đồng thời kiểm tra bố cục điện thoại, trong đó hình ảnh có thể chiếm một chiều rộng khác hoặc sử dụng một crop khác. Làm cho mọi tệp có chiều rộng cổng xem trên máy tính để bàn lớn nhất có thể lãng phí byte. Coi các xuất khẩu mật độ cao hơn là ứng cử viên cho việc triển khai đáp ứng thực sự thay vì một tệp quá khổ duy nhất mà mọi thiết bị phải tải xuống.

Trang này bắt đầu với một hộp WebP Fit 1600 x 1600 pixel. Nó là một ràng buộc minh họa, vì vậy hãy thay thế nó bằng các giá trị dựa trên kích thước hiển thị bạn đã đo. Fit bên trong giữ tỷ lệ và không phóng to một nguồn nhỏ hơn. Ví dụ, bản gốc rộng có thể đạt tới 1600 pixel trong khi một bức chân dung phù hợp với chiều cao thay thế. Kiểm tra kích thước đầu ra thực tế.

Nếu một nguồn chỉ rộng 700 pixel, việc viết một bản xuất 1600 pixel không tạo ra chi tiết của bản gốc lớn hơn. Sử dụng một nguồn tốt hơn hoặc chấp nhận một ứng cử viên nhỏ hơn. So sánh độ sắc nét ánh sáng với tắt sau khi thay đổi kích thước và kiểm tra kết cấu tốt ở kích thước màn hình dự kiến. Đối với đồ họa trong suốt, hãy sử dụng PNG thay thế, vì việc xuất WebP hiện tại ở đây là không rõ ràng. Giữ thiết kế hoặc hình ảnh ban đầu để bạn có thể tạo các ứng cử viên khác nhau sau này.

Bộ chuyển đổi tạo ra một tệp; Trang web của bạn vẫn cần chọn và trình bày nó một cách chính xác. Cung cấp các ứng cử viên nguồn phù hợp, gợi ý kích thước chính xác và kích thước hình ảnh dành riêng trong việc thực hiện. Một chiếc điện thoại không nên nhận được hình ảnh lớn nhất chỉ vì nó tồn tại. Kiểm tra hình ảnh đã tải xuống trong Công cụ dành cho nhà phát triển trình duyệt khi đánh giá trang cuối cùng, vì hệ thống quản lý nội dung có thể chuyển đổi lại.

Xem trang ở cài đặt màn hình thông thường và mật độ cao, đồng thời so sánh chi tiết với kích thước truyền. Hình ảnh có độ phân giải cao hơn không phải là sự đánh đổi tốt nhất cho một thẻ trang trí nhỏ. Tương tự như vậy, một hình ảnh quá nhỏ có thể trông kém trong chế độ xem sản phẩm lớn. Kiểm tra nội dung có ý nghĩa như khuôn mặt và nhãn thay vì chỉ đánh giá nền mờ. Tiếp tục tải mức độ ưu tiên phù hợp với vị trí của hình ảnh và đo lường trang thực trước khi yêu cầu cải thiện tốc độ hoặc lõi web Vitals.

Giả sử thẻ rộng nhất của bạn là 400 pixel CSS và hình minh họa vẫn rõ ràng ở chiều rộng đó. Một ứng cử viên 800 pixel là một ứng cử viên có thể xuất 2x khi nguồn hỗ trợ nó. Kiểm tra thẻ ở các bố cục hẹp hơn, vì hình ảnh kéo dài toàn bộ màn hình điện thoại có thể có chiều rộng hiển thị khác với thẻ máy tính để bàn. Xuất từ bản gốc cho từng ứng viên cần thiết thay vì phóng to ứng viên nhỏ nhất. Xác nhận tệp mà trình duyệt chọn trong trang thực tế. Kiểm tra lựa chọn cuối cùng đó là kết nối tính toán kích thước cục bộ với các byte mà khách truy cập thực sự nhận được cho hình ảnh.