Responsive images (srcset, sizes) hoạt động thế nào?

srcset cung cấp nhiều phiên bản ảnh. sizes cho browser biết ảnh chiếm bao nhiêu viewport để chọn đúng ảnh. Có 2 descriptor: pixel density (2x, 3x) và width (400w, 800w).

Khi dùng width descriptor với sizes, browser tính toán: srcset="img-400.jpg 400w, img-800.jpg 800w" sizes="(min-width: 768px) 50vw, 100vw" — sizes phải khớp với CSS layout width thực tế, nếu không browser chọn sai ảnh. Tiết kiệm bandwidth đáng kể trên thiết bị nhỏ.