image-set() trong CSS bạn đã biết chưa?

image-set() trong CSS

image-set() là một method dùng để cung cấp nhiều độ phân giải hình ảnh, và trình duyệt sẽ lựa chọn độ phân giải thích hợp để hiển thị lên trang web của chúng ta. Nhìn chung, method này khá giống với srcset attribute của thẻ img.

.background {
  background-image: image-set("planet.jpg" 1x, "planet-2x.jpg" 2x);
}

Ở ví dụ trên, 1x được sử dụng để cho biết đây là hình ảnh có độ phân giải thấp, còn 2x được sử dụng để cho biết hình ảnh này có độ phân giải cao.

Chúng ta cùng xem cú pháp để sử dụng image-set():

image-set([ <image> | <string> ] <resolution>)

• <string> là một url()
• <resolution> Optional: Dùng để set Unit. Bao gồm x hoặc dppx(dots per pixel unit), dpi(dots per inch), dpcm(dots per centimeter). Xem thêm: Resolution
• type(<string>) Optional: Ví dụ "image/png".

Chrome/Edge/Opera/Samsung Internet cần sử dụng -webkit-image-set để hoạt động. Đối với một số trình duyệt không hỗ trợ image-set ta có thể sử dụng background-image: url() để hình ảnh có thể hiển thị trên các trình duyệt này.

.background {
  /* Fallback */
  background-image: url("planet.jpg");

  background-image: image-set("planet.jpg" 1x, "planet-2x.jpg" 2x);
}

Khi sử dụng image-set(), nó sẽ giúp cải thiện Performance trong trường hợp ví dụ như user có kết nối internet chậm hay độ phân giải màn hình thấp, lúc này trình duyệt sẽ tự động hiển thị hình ảnh có độ phân giải thấp hơn. Performance cũng được cải thiện khi ta sử dụng một số định dạng hình ảnh như: Webp, AVIF.

Ta có thể cung cấp cho image-set() các định dạng hình ảnh trên giúp cải thiện Performance cho trang web. Nếu trình duyệt support Webp hay AVIF thì nó sẽ tải hình ảnh có định dạng này xuống và hiển thị. Các hình có có định dạng này thường có dung lượng nhẹ hơn nhiều so với các định dạng hình ảnh thông thường ^^.

.box {
  /* Fallback */
  background-image: url("cat.png");

  background-image: image-set(
    "cat.avif" type("image/avif"),
    "cat.webp" type("image/webp")
    "cat.png" type("image/png")
  );
}  

Nếu trình duyệt hỗ trợ định dạng avif, nó sẽ tải hình ảnh cat.avif và các định dạng khác sẽ được bỏ qua. Nếu trình duyệt không hỗ trợ 2 định dạng avif và webp thì trình duyệt sẽ tải xuống một fallback mà chúng ta đã chỉ định đó là cat.png.

Một số trình duyệt vẫn chưa hỗ trợ type, các bạn nên lưu ý khi sử dụng.

Kết luận

Hy vọng bài viết sẽ giúp ích cho các bạn. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé.

Chúc các bạn học tốt.