Ảnh đáp ứng là gì?
Còn gọi: responsive images, srcset, responsive images, responsive image, srcset, ảnh responsive
Responsive images là kỹ thuật cung cấp nhiều phiên bản kích thước hoặc khung hình của cùng một ảnh, để trình duyệt tự chọn bản phù hợp nhất với màn hình và mật độ điểm ảnh của từng thiết bị.
Hiểu kỹ hơn
Thuộc tính srcset trong thẻ img liệt kê các bản ảnh, ví dụ rộng 480, 960, 1920 px, kèm sizes cho biết ảnh chiếm bao nhiêu bề rộng màn hình; điện thoại sẽ tải bản nhỏ, màn hình lớn tải bản lớn, tiết kiệm dung lượng và tăng tốc độ. Thẻ picture cho phép làm 'art direction': dùng ảnh khác hẳn cho mobile, ví dụ banner ngang trên desktop và ảnh cắt dọc tập trung vào nhân vật trên điện thoại, đồng thời phục vụ định dạng mới như AVIF, WebP kèm JPEG dự phòng. Designer nên chuẩn bị vùng cắt an toàn cho ảnh hero, hoặc xuất riêng bản mobile khi bố cục ảnh quan trọng. Ảnh hero là ứng viên LCP, nên không lazy load nó.
