Chọn mẫu chính xác
Resolution switching (chuyển đổi phân giải) giữ nguyên bố cục hình ảnh và cung cấp nhiều kích thước tệp. Đây là mẫu thông thường cho ảnh sản phẩm, hình minh họa bài báo và thẻ. Dùng miêu tả theo chiều rộng như 480w hoặc 1200w khi chiều rộng hiển thị thay đổi theo bố cục. Con số là chiều rộng thực tế của tệp tính bằng pixel, không phải mục tiêu điện thoại hay lệnh CSS.
Density switching (chuyển đổi mật độ) phục vụ một khung CSS cố định với nhiều pixel nguồn hơn cho màn hình mật độ cao. Các miêu tả là 1x, 1.5x, hoặc 2x, và phù hợp cho logo hoặc biểu tượng có kích thước CSS ổn định, ví dụ 160 CSS pixel rộng. Không kết hợp miêu tả theo chiều rộng và theo mật độ trong cùng một srcset.
Dùng miêu tả w với sizes khi một thành phần mở rộng hoặc co lại.
Dùng miêu tả x không kèm sizes chỉ khi kích thước CSS hiển thị là ổn định.
Hiểu cách sizes hướng tới việc chọn ảnh
Với miêu tả theo chiều rộng, trình duyệt đánh giá sizes trước khi tải một ảnh. Mỗi mục ghép một điều kiện media tùy chọn với một độ dài (length). Điều kiện khớp đầu tiên cung cấp kích thước nguồn; độ dài cuối cùng không có điều kiện là phương án dự phòng. sizes là gợi ý để chọn, không phải quy tắc CSS.
Trình duyệt so sánh kích thước nguồn đó với các chiều rộng ứng viên để tính mật độ hiệu dụng, rồi có thể cân nhắc thêm mật độ hiển thị, thu phóng và điều kiện mạng. Trình duyệt không bắt buộc phải chọn tên tệp gần với toán học nhất. Cung cấp các ứng viên trung thực và một ước tính khung đáng tin cậy; việc chọn cuối cùng vẫn là quyết định của user agent.
Điều kiện media khớp đầu tiên thắng, nên viết danh sách theo thứ tự làm cho khớp đầu tiên đó đúng.
Một thẻ desktop chiếm một phần ba cột nhưng mô tả là bằng chiều rộng viewport có thể kích hoạt một ứng viên lớn không cần thiết.
Lấy ứng viên từ bố cục thực tế
Kiểm kê theo thành phần, không phải theo trang. Một hero, hình minh họa bài viết, gallery sản phẩm, thumbnail tìm kiếm và logo chân trang thường có các chiều rộng khung khác nhau. Với mỗi thành phần, ghi lại chiều rộng hiển thị nhỏ nhất và lớn nhất, tỉ lệ khung (aspect ratio), hành vi cắt, và khả năng xuất hiện trên màn hình ban đầu.
Sinh các độ rộng quanh khoảng ý nghĩa của khung thành phần, với một tùy chọn lớn hơn khi chi tiết cần biện minh cho hiển thị mật độ cao. Các tệp gần như giống hệt làm tăng độ phức tạp build và cache; chỉ tệp quá nhỏ và quá lớn mới buộc phải thỏa hiệp. Thử URL được sinh ra thay vì cho rằng các chuyển đổi ảnh hoạt động.
Giữ một src dự phòng hợp lệ và các giá trị width và height khớp với tỉ lệ được giao. Chúng dành chỗ nhưng không ngăn CSS đáp ứng thay đổi kích thước cuối cùng.
Một ứng viên được khai báo là 800w phải thực sự có chiều rộng 800 pixel.
Duy trì khung và kế hoạch ứng viên cùng với thay đổi mẫu và thiết kế.
Dùng picture cho art direction (định hướng bố cục)
Art direction thay đổi bố cục ảnh, không chỉ kích thước tệp. Một ảnh phong cảnh rộng có thể cần cắt chặt hơn trên màn hình hẹp để chủ thể vẫn hiện rõ. Thẻ picture có thể cung cấp các nguồn theo media cụ thể, sau đó là một img fallback. Trình duyệt xem xét media, type, và thông tin srcset của mỗi source; img mang văn bản thay thế (alt), kích thước và hành vi dự phòng.
Chuẩn bị mỗi crop với rà soát biên tập và khả năng tiếp cận. Một cắt cho di động có thể bỏ mất chi tiết sản phẩm hoặc một người được nhắc tới trong alt. Đặt alt trên img và mô tả thông tin hoặc chức năng mà ảnh truyền đạt. Dùng alt="" chỉ cho ảnh thực sự mang tính trang trí; với ảnh liên kết hoặc ảnh nút, hãy mô tả hành động thay vì ngoại hình. Không thêm picture khi crop không thay đổi: srcset theo chiều rộng đơn giản hơn.
Một hero desktop phức tạp cần một crop chân dung riêng cho điện thoại.
Một source trong picture có thể cung cấp gợi ý type và vẫn giữ img fallback dùng được.
Tránh những sai lầm tốn kém về tải và markup
Lãng phí phổ biến là sao chép sizes="100vw" cho mọi ảnh. Điều đó có thể phù hợp cho một hình toàn chiều rộng nhỏ nhưng không đúng cho một container có giới hạn hoặc thẻ desktop. Lỗi đối nghịch là sizes cũ sau khi thiết kế thay đổi. Thay đổi CSS và sizes cùng nhau.
Không lazy-load hình ảnh quan trọng trong nội dung ban đầu hiển thị. Hướng dẫn khuyến nghị lazy-load ảnh bên dưới nếp gấp và giữ hero hiển thị sẵn sàng. fetch priority có thể nâng quyền một ảnh thật sự quan trọng, nhưng các quy tắc ưu tiên cao hoặc preload rộng rãi có thể gây hại hiệu suất. Đừng dựa vào tên tệp hay kết quả cache làm bằng chứng.
Một CMS, proxy, hoặc cache có thể che giấu một miêu tả sai hoặc một yêu cầu ảnh không mong muốn.
Không để văn bản quan trọng trên trang chỉ phụ thuộc vào một crop được art-direct.
Kiểm tra yêu cầu, crop và sửa chữa
Kiểm thử các trang đại diện ở các chiều rộng thay đổi bố cục, bao gồm ngay trên và dưới điểm ngắt grid. Bao gồm cài đặt mật độ cao, desktop rộng, và các trạng thái thay đổi khung. Xác nhận kích thước render, crop, văn bản thay thế và độ sắc nét hình ảnh.
Trong Chrome DevTools, mở Network, tải lại với cache bị vô hiệu hóa hoặc dùng Empty Cache And Hard Reload, lọc yêu cầu ảnh, và kiểm tra URL, kích thước chuyển tải, headers, initiator và timing. Giảm băng thông (throttle) để lộ các tác vụ trì hoãn hoặc lãng phí. Ghi lại viewport, device scale factor, khung (slot), ứng viên, byte đã truyền và kết quả mong đợi.
Khi mẫu, điểm ngắt, CDN, hoặc pipeline tài sản thay đổi, biến bước này thành một cửa gác phát hành. Sửa hẹp: chỉnh sizes, sửa miêu tả, tái tạo crop, phục hồi fallback, hoặc loại bỏ preload không cần thiết. Thử lại với một tải lại cache trống.
Bảng Network ghi lại ứng viên thực sự được yêu cầu.
Điều này xác minh hành vi phân phối ảnh, không phải năng lực nguồn gốc, khả dụng CDN, hay thời gian hoạt động tổng thể.
Áp dụng như một kiểm soát khả năng phục hồi SIU
Ảnh đáp ứng giảm chuyển tải không cần thiết nhưng không thể đảm bảo một yêu cầu thành công. Lỗi nguồn gốc, chuyển đổi không khả dụng, hosts bên thứ ba và sự cố CDN cần kế hoạch liên tục và khôi phục riêng.
Đối với SIU, dùng hồ sơ kiểm thử để phát hiện suy giảm phân phối sớm, xác định mẫu hoặc quy tắc chuyển đổi chịu trách nhiệm, và thực hiện sửa nhỏ an toàn trước khi phát hành. Kết hợp điều này với tiền kiểm về khả dụng và kế hoạch rollback.
Gán một chủ sở hữu thành phần và pipeline ảnh cho mọi kiểm tra chọn lựa thất bại.