Image Optimization: WebP, AVIF, and Lazy Loading
Images account for 50–70% of total page weight. Correct optimization can make your website three times faster.
Author: Meiko Neuman
Founder and web strategist, Kodulehe Haldus
Why Images Matter
The average website is 2.5MB in size, with 1.5–2MB consisting of images. Every megabyte represents an additional cost to the visitor (especially on mobile) and slows down the page.
Choosing the Right Format
| Format | Usage | Advantage |
|---|---|---|
| WebP | Universal | 30% smaller than JPEG, supported by 96% of browsers |
| AVIF | The Future | 50% smaller than JPEG, 90% support |
| JPEG | Legacy Standard | Works everywhere |
| PNG | Transparency | Large file size; use only for logos/icons |
| SVG | Vector Graphics | Scales infinitely, small file size |
The Rule: Correct Sizing
- Full-width hero image: max 1920px wide
- Content image: max 1200px wide
- Thumbnail: max 600px wide
- Avatar: max 200px
Never upload a 4000px wide image if it is displayed at 800px.
Compression Levels
- JPEG: 75–85% quality is optimal
- WebP: 75–80%
- AVIF: 50–65% (already provides excellent results)
Tools
Free: - TinyPNG / TinyJPG (web-based) - Squoosh (Google's tool) - ImageOptim (Mac) - ShortPixel (WordPress plugin, 100 images free/month)
Paid: - Imagify, ShortPixel premium - Cloudinary (CDN + transformation)
Lazy Loading
Add this to all below-the-fold images:
`html
<img src="..." loading="lazy" width="800" height="600" alt="...">
`
WordPress 5.5+ handles this automatically.
Responsive Images
Provide the browser with choices for the correct size:
`html
<img srcset="img-400.webp 400w, img-800.webp 800w, img-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="img-800.webp" alt="...">
`
Summary
Image optimization is the fastest way to improve page speed. One hour of work can reduce page weight by up to 70%.
Need help with your website?
Our team maintains, optimises and protects your website. Pricing is agreed based on scope.
Request a quoteAbout the author
Meiko Neuman — Founder and web strategist, Kodulehe Haldus. Meiko leads the Kodulehehaldus team and has spent over a decade helping companies maintain and optimise their websites for measurable business results. He writes about website management, SEO, AEO/GEO and the commercial side of the web.