Images

Every informative image has a descriptive alt attribute; decorative images use alt="" to be ignored by screen readers.

Images with visible captions are wrapped in <figure> with a <figcaption> child, creating a semantic association between image and caption.

Images are served in modern formats (WebP or AVIF) instead of legacy JPEG/PNG where browser support allows, reducing file size without visible quality loss.

Every <picture> element contains a required <img> fallback as its last child, ensuring images display in all browsers including those that don't support <picture>.

Images are served in WebP format with fallbacks for older browsers.

Images support AVIF format for superior compression with proper browser fallbacks.

JPEG images use progressive format for better perceived loading performance.

Hero and above-the-fold images are preloaded with high fetch priority for LCP.

No images return 404 errors or display broken-image icons to users.

Images are served from a CDN with automatic optimization, resizing, and format conversion.

All images are compressed without significant quality loss to reduce file sizes.

Images are optimized with appropriate formats, compression, and modern techniques.

All images are compressed and metadata-stripped before deployment, removing unnecessary bytes without visible quality loss.

Large or complex SVGs inlined in HTML are extracted to external files or components, preventing them from bloating the HTML document and blocking parsing.

SVG files are optimized with SVGO to remove unnecessary metadata and reduce size.

Broken images are handled gracefully with fallback images or placeholder content.

Image filenames are descriptive and human-readable, using lowercase letters, hyphens as separators, and meaningful words that reflect the image content.

Small images and icons use sprites or SVG to reduce HTTP requests.

All <img> elements have explicit width and height attributes so browsers can reserve space before the image loads, preventing layout shift.

Individual image files are compressed to reasonable sizes to avoid wasted bandwidth and slow load times, especially on mobile networks.

Images below the visible viewport use loading="lazy" to defer download until the user scrolls near them, reducing initial page load time.

Images are not significantly larger than their display dimensions—serving a 2000px image for a 400px container wastes bandwidth and hurts LCP.

Images wider than 100px use the srcset attribute to offer multiple resolution variants, letting the browser download the optimal size for the user's viewport and device pixel ratio.

Images use srcset and sizes attributes for responsive delivery across devices.

High-resolution images (2x, 3x) are provided for retina and high-DPI displays.