Images account for roughly half of a typical webpage's total weight. Optimizing them is the single highest-impact performance improvement most websites can make. Unlike code optimization which yields marginal gains, image optimization can cut page weight by 60-80% with minimal effort.
This guide covers the techniques that deliver real results.
Modern image formats
JPEG and PNG served the web well for decades, but modern formats offer dramatically better compression.
WebP: supported in all modern browsers. Delivers 25-35% smaller files than JPEG at equivalent quality. Supports both lossy and lossless compression, plus transparency.
AVIF: the newest format, based on the AV1 video codec. Delivers 50% smaller files than JPEG. Support is growing (Chrome, Firefox, Safari 16.4+). Use as an enhancement, not a replacement.
Implementation: serve AVIF to browsers that support it, fall back to WebP, then JPEG. The <picture> element handles this:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="description" loading="lazy" />
</picture>
Responsive images
Serving the same image to a 320px mobile screen and a 2560px desktop monitor wastes bandwidth. The srcset attribute lets you serve different image sizes based on viewport width:
<img
srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 50vw"
src="image-1280.jpg"
alt="description"
/>
The browser selects the most appropriate image based on the user's viewport and device pixel ratio.
Lazy loading
Native lazy loading (loading="lazy") defers off-screen images until the user scrolls near them. This is supported in all modern browsers and requires zero JavaScript:
<img src="image.jpg" alt="description" loading="lazy" />
Best practice: lazy-load all images below the fold. Use loading="eager" or omit the attribute for the initial hero image (above the fold).
CDN delivery and image transformation
A CDN caches images at edge locations, reducing latency for global users. Many CDNs offer server-side image transformation:
- Resize images on-the-fly by appending URL parameters
- Automatically convert to WebP or AVIF based on the user's browser
- Strip EXIF metadata
- Adjust quality dynamically
Services like Cloudinary, imgix, and Vercel's built-in image optimization handle this automatically.
Next.js Image component
If you're using Next.js, the next/image component provides production-ready image optimization out of the box:
import Image from "next/image";
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={630}
priority
/>
Benefits include automatic WebP/AVIF conversion, responsive srcset generation, lazy loading by default, and CLS prevention through explicit dimensions.
Compression tools
For static images or build-time optimization:
- Sharp: Node.js library for high-performance image processing
- Squoosh: browser-based tool for manual optimization
- imagemagick: command-line tool for batch processing
- TinyPNG/TinyJPG: web service with excellent compression algorithms
Image optimization is the easiest performance win available. Implementing these techniques typically reduces page weight by half, improving both user experience and Core Web Vitals scores.
Optimizing your website's performance? At Vynta implement comprehensive image optimization pipelines as part of every web project we deliver.