images-media

Use WebP or AVIF formats, set compression targets, and include width and height attributes to prevent layout shift. Generate responsive srcset variants and apply lazy-loading rules to ensure images load efficiently across all viewport sizes.

Create multiple image widths and select modern formats like WebP or AVIF for your srcset. Include width and height attributes for each variant to prevent layout shift, allowing browsers to select the optimal image for the user's viewport.

Use inline SVGs and SVG sprites for icon systems to ensure scalable, accessible visuals with clear labels. Reserve raster formats like WebP or AVIF for complex imagery such as hero sections and galleries where photographic detail and responsive srcset variants are required.

Write descriptive alt text conveying image content for accessibility, and detect decorative images to assign empty alt attributes. Ensure no important text is embedded in images, applying this across hero sections, galleries, and image cards for consistent visual language.

Lazy-loading decisions depend on image placement and viewport visibility. Below-the-fold gallery images benefit from lazy-loading to improve performance, while above-the-fold hero images typically require eager loading to ensure immediate rendering and prevent layout shift.

An image strategy defines the visual concept, mood, color palette, and selection criteria to maintain a consistent visual language across a site. It combines technical optimization like responsive srcset variants with accessibility rules for alt text and SVG icon usage across viewports.