CSSsrcset 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ỏ.
srcset provides multiple image versions. sizes tells the browser how much viewport width the image occupies, so it can pick the right source. Two descriptors exist: pixel density (2x, 3x) and width (400w, 800w).
When using width descriptors with sizes, the browser calculates: srcset="img-400.jpg 400w, img-800.jpg 800w" sizes="(min-width: 768px) 50vw, 100vw" — sizes must match the actual CSS layout width, or the browser will pick the wrong image. Significant bandwidth savings on smaller devices.