Website Image Optimization: WebP, AVIF, Responsive Images and Lazy Loading

Optimizing website images means serving each photo in the lightest format (WebP or AVIF), at the right size for the screen and only when needed (lazy loading). Images are usually the heaviest part of a page: shrinking them improves Largest Contentful Paint, Google rankings and conversion rate without changing how the site looks.

Why Images Slow a Site Down

A photo taken with a smartphone can weigh 4-6 MB, while a block on a website shows a version a few hundred pixels wide. If the same original is loaded everywhere, the browser downloads data the visitor will never see. The result is a high LCP, wasted mobile data and a worse Core Web Vitals score, which Google treats as a ranking signal.

Choosing the Format: JPEG, WebP, AVIF

JPEG works everywhere but is the least efficient. WebP typically gives files 25-35% smaller at the same visual quality and is widely supported in current browsers. AVIF compresses even more, especially photos with gradients, but takes longer to encode. For logos and geometric illustrations, SVG is better: it stays sharp at any scale and weighs a few kilobytes.

• Photos and cover images: AVIF with WebP as an alternative, JPEG as the last fallback.
• Logos, icons, diagrams: optimized SVG.
• Screenshots with text: lossless WebP or compressed PNG.
• Short animations: MP4 or WebM video instead of GIF, much lighter.

The <picture> element lets you list several formats: the browser picks the first one it supports, with no scripts and no penalty for visitors on older browsers.

Responsive Images: The Right Size for Every Screen

The srcset and sizes attributes let you offer the same image at several widths, for example 480, 800 and 1280 pixels. The browser chooses based on screen width and pixel density. Always set width and height, or the CSS aspect-ratio property, so space is reserved in advance and layout shift (CLS) is avoided while the image loads.

Lazy Loading and Loading Priority

The loading="lazy" attribute defers the download of off-screen images until the user gets close. Use it for everything below the first screen. The main image, the one that determines LCP, should load immediately: no lazy loading, with fetchpriority="high" and, if needed, a preload in the head. Lazy-loading the hero image too is the most common mistake and worsens the metrics.

CDN, Caching and Automation

A CDN with image transformation can convert format and size on the fly and cache the result close to the user. Alternatively, add a build step that generates the variants at every publish. In both cases, set long cache headers with file names that change when the image changes, and write descriptive alt text: it helps accessibility and image SEO.

How to Measure the Results

Before and after the work, compare LCP, total page weight and number of requests using PageSpeed Insights and real-user data from Search Console. A realistic target for a business site is an LCP under 2.5 seconds and under 1 MB of images per page.

Key takeaway: modern formats, responsive sizes, targeted lazy loading and a CDN can cut image weight by 60-80%, with a direct impact on speed, SEO and conversions.