Responsive image cho phép trình duyệt chọn hình ảnh tốt nhất cho thiết bị — tiết kiệm băng thông trên điện thoại và phục vụ hình ảnh sắc nét trên màn hình high-DPI.
srcset + sizes — cùng một hình, độ phân giải khác nhau
html
Responsive image cho phép trình duyệt chọn hình ảnh tốt nhất cho thiết bị — tiết kiệm băng thông trên điện thoại và phục vụ hình ảnh sắc nét trên màn hình high-DPI.
srcset liệt kê các hình ảnh ứng viên cùng chiều rộng nội tại của chúng (400w = rộng 400px).sizes báo cho trình duyệt biết hình ảnh sẽ được hiển thị rộng bao nhiêu ở các breakpoint khác nhau (ở đây: toàn bộ chiều rộng viewport dưới 600px, ngược lại một nửa).sizes + mật độ điểm ảnh của thiết bị để chọn hình ảnh nhỏ nhất mà vẫn trông sắc nét — trước khi tải bất cứ thứ gì.Một chiếc điện thoại có thể chọn small.jpg; một laptop Retina hiển thị nó ở 50% chiều rộng có thể chọn large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- định dạng hiện đại -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- crop khác trên mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- fallback bắt buộc -->
</picture>
Trình duyệt dùng <source> đầu tiên mà nó hỗ trợ/khớp. Dùng <picture> khi bạn cần định dạng khác nhau (phục vụ AVIF/WebP với fallback JPEG) hoặc một crop khác cho mỗi kích thước màn hình (art direction) — những thứ mà chỉ srcset không làm được.
srcset + sizes.<picture>.Phục vụ hình ảnh đúng kích thước, định dạng hiện đại là một trong những thắng lợi hiệu năng lớn nhất cho web — nó giảm mạnh lượng dữ liệu trên mobile và cải thiện Largest Contentful Paint.
Những công cụ native này cho phép trình duyệt tự đưa ra lựa chọn tối ưu, với fallback nhẹ nhàng cho các trình duyệt cũ.