Cung cấp hình ảnh trang trí được tối ưu hoá

Tính năng web: image-set()

Việc phân phối hình ảnh trang trí được tối ưu hoá thông qua CSS giúp cải thiện hiệu suất cảm nhận mà không làm giảm chất lượng hình ảnh. Khi dùng hàm CSS image-set(), bạn có thể cung cấp cho trình duyệt nhiều lựa chọn cho một hình nền hoặc hình ảnh mặt nạ. Bạn có thể chỉ định các định dạng hiện đại (như AVIF hoặc WebP) cùng với các độ phân giải khác nhau (như 1x và 2x). Trình duyệt sẽ tự động chọn hình ảnh tương thích nhỏ nhất, cung cấp mật độ pixel phù hợp cho thiết bị của người dùng.

THẬN TRỌNG: Nếu hình ảnh có khả năng là phần tử Nội dung lớn nhất hiển thị (LCP) (ví dụ: biểu ngữ chính lớn), hãy lưu ý rằng trình quét tải trước của trình duyệt không thể phát hiện hình ảnh được tham chiếu trong CSS thông qua image-set(). Điều này có thể làm chậm đáng kể quá trình tải hình ảnh và gây hại cho LCP. Đối với các đề xuất LCP, hãy cân nhắc sử dụng thẻ <img> hoặc <picture> HTML chuẩn, hoặc tải trước hình ảnh bằng cách sử dụng tuỳ chọn <link rel=preload> có thuộc tính media.

Triển khai

Hàm image-set() được dùng ở bất cứ nơi nào CSS yêu cầu giá trị <image>, phổ biến nhất là trong background-image, content hoặc mask-image. Xin lưu ý rằng mặc dù việc cung cấp cả định dạng hình ảnh thông qua type() và độ phân giải (như 1x hoặc 2x) sẽ mang lại kết quả tốt nhất, nhưng cả hai đối số này đều không bắt buộc. 

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

Chiến lược dự phòng

Đối với các trình duyệt cũ không hỗ trợ hàm image-set(), bạn PHẢI cung cấp một nội dung khai báo hình ảnh chuẩn trước quy tắc image-set(). Chiến lược cải tiến tăng dần này dựa trên bản chất xếp tầng của CSS: các quy tắc không được hỗ trợ sẽ bị bỏ qua.

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}