Image Optimization

Image optimization is the process of selecting, producing, and delivering each website image with suitable visual quality, dimensions, format, and loading behaviour while avoiding unnecessary data and layout movement. It can include resizing or cropping the source, choosing lossy or lossless compression, offering responsive variants, declaring intrinsic dimensions, setting appropriate loading priority, and providing a text alternative that matches the image's purpose.

Why it matters: Start with the image's job and rendered size. Remove assets that add no value, use real text instead of text baked into an image, and consider SVG for suitable geometric artwork. Test JPEG, PNG, WebP, or AVIF encodings against the required detail, transparency, animation, browser support, and decode cost; no format is best for every asset, and lossy compression changes image data. Use `srcset` and accurate `sizes` values so browsers can choose an appropriate source, and include `width` and `height` to reserve the aspect ratio. Load the likely LCP or other immediately visible image eagerly and prioritise it only when evidence supports doing so; lazy-load suitable off-screen images. Write contextual alt text for informative or functional images and use an empty alt attribute for decoration. Verify visual quality, bytes transferred, source selection, layout shift, and LCP on representative devices and connections, then monitor real-user data after release.