Images typically account for 50-65% of total page weight. On a page with a 3MB total size, that's 1.5-2MB of image data that every visitor downloads before they can fully interact with your site. For Google's Core Web Vitals assessment, this has direct consequences for your Largest Contentful Paint (LCP) score — and therefore your rankings.
Why Image Format Matters More Than You Think
JPEG and PNG have been the web's default image formats since the 1990s. They were designed for a world of slow processors, not slow networks — meaning they weren't built with compression efficiency as a primary goal. Modern formats like WebP and AVIF fix this fundamentally.
| Format | Avg Size vs JPEG | Transparency | Browser Support |
|---|---|---|---|
| JPEG | Baseline | No | 100% |
| PNG | +15-30% larger | Yes | 100% |
| WebP | -25-35% smaller | Yes | 97%+ |
| AVIF | -40-55% smaller | Yes | 92%+ |
LCP: The Image-SEO Connection
Google's Largest Contentful Paint measures how long it takes for the largest visible element to load. On most landing pages, this is a hero image. Google rates LCP as:
- Good: Under 2.5 seconds
- Needs Improvement: 2.5–4 seconds
- Poor: Over 4 seconds
A 2MB hero JPEG on a typical broadband connection takes 3-5 seconds to load. The same image as WebP at 0.7MB loads in under 1.5 seconds. That's the difference between "Needs Improvement" and "Good" — and a meaningful ranking factor.
When to Use WebP vs AVIF
Use WebP When:
- • You need maximum browser compatibility (97%+ support)
- • You're converting existing JPEG/PNG assets in bulk
- • Your CMS or CDN doesn't support AVIF yet
- • You need a straightforward, reliable format for web images
Use AVIF When:
- • File size is critical (product images, photography-heavy pages)
- • You're serving modern browsers where you can check support
- • You use Next.js (built-in AVIF support via the Image component)
- • You want the best possible Core Web Vitals scores
Best Practice: Serve Both with Fallback
<picture> <source srcset="image.avif" type="image/avif" /> <source srcset="image.webp" type="image/webp" /> <img src="image.jpg" alt="..." loading="lazy" /> </picture>
This pattern serves AVIF to browsers that support it, WebP as a fallback, and JPEG for older browsers — maximising compression without sacrificing compatibility.
How to Convert Images Without Uploading Them
Most image compression tools — TinyPNG, Kraken.io, Optimizilla — require you to upload your images to their servers. This creates three problems: privacy risk for confidential assets, 5MB file size limits, and batch upload caps (TinyPNG allows only 20 images per batch).
Our free image compressor handles compression entirely in your browser — no uploads, no limits, no size restrictions. You can convert entire image libraries from JPEG or PNG to WebP or AVIF in minutes, with full quality control.
Beyond Format: Other Image SEO Factors
Alt Text Optimisation
Alt text is still a significant ranking signal for Google Image Search and provides accessibility for screen readers. Write descriptive, keyword-relevant alt text without keyword stuffing. "Product photo" is useless. "Red leather office chair with adjustable armrests" is both descriptive and keyword-rich.
File Name Optimisation
Google reads file names as a signal. "DSC_4892.jpg" tells Google nothing. "ergonomic-office-chair-red-leather.webp" sends clear topical signals. Rename images before uploading — this is especially important for e-commerce product images.
Lazy Loading
Add loading="lazy" to all images below the fold. This defers loading until the user scrolls near the image, reducing initial page weight and improving LCP by prioritising above-fold content.
Image Dimensions
Always specify width and height attributes. Without them, the browser can't reserve space for images before they load, causing layout shifts that hurt your CLS (Cumulative Layout Shift) score — another Core Web Vitals metric.