주제: images
-
Responsive images with srcset, sizes and picture
srcset with width descriptors plus a sizes attribute lets the browser pick the smallest image file that fills the slot at the current viewport and pixel density; x descriptors serve fixed-size images at several densities; picture with source elements handles art direction and format fallback. Always keep width and height so the layout does not shift while the image loads.
-
An image optimisation pipeline at build time: originals, a size ladder, encoded formats and stripped metadata
Keep originals outside the web root, derive every served size and format from them in a reproducible build step, convert to sRGB and strip metadata by default (sharp does this unless keepMetadata is called; cwebp copies none unless -metadata says otherwise), name outputs by source and width or by content hash, and verify with exiftool that no EXIF or GPS data survives.
-
Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority
Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.
기계 판독 가능: JSON