Image Optimization for the Web: WebP, AVIF and Lazy Loading

On most websites, images account for the majority of downloaded bytes. Optimising them is often the quickest way to improve speed and Core Web Vitals.

Pick the right format

• JPEG: still fine for photos, but larger than newer options.
• PNG: best for images that need transparency or sharp edges, such as logos, though files can be big.
• WebP: typically smaller than JPEG and PNG, and supported by all major browsers.
• AVIF: often smaller still, with growing support; provide a fallback where needed.
• SVG: ideal for logos and icons because it scales without losing quality.

Serve the right size

Do not upload a 4000-pixel-wide photo for a 600-pixel space. Use responsive images with srcset and sizes so phones download smaller files than desktops.

Lazy-load below the fold

Add loading="lazy" to images that are not visible at first. Do not lazy-load your main hero image, since it affects Largest Contentful Paint.

Set width and height

Include dimensions so the browser reserves space and the layout does not jump while images load, which improves Cumulative Layout Shift.

Do not forget alt text

Describe meaningful images in plain language. It helps accessibility and image search.

Compress before uploading and check results with PageSpeed Insights.