Image Optimization Guide: Make Your Website Load Faster
Images account for the majority of page weight on most websites. Properly optimized images load faster, rank better in Google, and convert more visitors. This guide covers every step in a complete image optimization workflow, from format selection to delivery.
Following this guide typically cuts image payload by 60 to 80 percent, which translates to 1 to 3 second faster load times on mobile connections.
Step 1: Choose the Right Image Format
Format selection is the most impactful decision in image optimization. Use this decision tree:
<picture>). Best compression at every quality level.Step 2: Set the Correct Image Dimensions
Never serve images larger than the space they occupy on screen. A 2000px wide image displayed in a 600px container transfers 11x more pixels than necessary. This is one of the most common image optimization mistakes.
Generate multiple sizes of each image and use responsive srcset:
<picture>
<source
type="image/avif"
srcset="img-480.avif 480w,
img-768.avif 768w,
img-1200.avif 1200w"
sizes="(max-width: 640px) 480px,
(max-width: 1024px) 768px,
1200px"
>
<img src="img-768.jpg" alt="..."
width="768" height="512">
</picture>
Step 3: Compress at the Optimal Quality Setting
For AVIF compression, these quality settings deliver the best balance of size and quality for each use case:
| Use Case | Recommended Quality | Typical Size Reduction vs JPEG |
|---|---|---|
| Hero images and banners | 75-85 | -45 to -55% |
| Product images | 70-80 | -50 to -60% |
| Blog and editorial photos | 65-75 | -55 to -65% |
| Thumbnails and previews | 50-60 | -65 to -75% |
| Background images | 55-65 | -60 to -70% |
Step 4: Preload the LCP Image
The LCP (Largest Contentful Paint) image is the most important image on each page for Core Web Vitals. Preload it in the document head so it starts downloading before the browser parses the page body:
<link rel="preload" as="image"
href="hero.avif"
imagesrcset="hero-480.avif 480w,
hero-768.avif 768w,
hero-1200.avif 1200w"
imagesizes="(max-width: 640px) 480px,
(max-width: 1024px) 768px,
1200px"
type="image/avif">
Step 5: Lazy Load Everything Below the Fold
Add loading="lazy" to every image not in the initial viewport. This defers those requests until the user scrolls near them, cutting initial page weight dramatically on image-heavy pages.
Step 6: Declare Width and Height on Every Image
Always add width and height attributes to your <img> tags. This lets the browser reserve space for images before they load, preventing Cumulative Layout Shift (CLS), which is a Core Web Vitals metric and Google ranking signal.
<!-- Causes CLS (bad) --> <img src="product.avif" alt="Product"> <!-- No CLS (correct) --> <img src="product.avif" alt="Product" width="600" height="600">
Image Optimization Checklist
Start Optimizing Your Images
Step 1 of the checklist is the fastest win. Convert your images to AVIF now for free.
Convert and Compress Images Free