If your website takes more than three seconds to load, you are already losing visitors. And nine times out of ten, the culprit is the same: heavy, unoptimized images. As web designers, we spend hours crafting beautiful visuals, only to watch them drag down our Core Web Vitals scores.
This practical guide will show you exactly how to optimize images for web use, with real before and after file size examples, format recommendations for 2026, and lazy loading strategies you can implement today.
Why Image Optimization Matters More Than Ever in 2026
Images account for roughly 50% of the average webpage weight. Google’s Core Web Vitals, particularly Largest Contentful Paint (LCP), are heavily influenced by how quickly your hero images render. Poorly optimized visuals can:
- Slow down page load speed and increase bounce rates
- Damage your SEO rankings
- Consume mobile users’ data plans
- Reduce conversion rates on e-commerce sites
The good news: with the right workflow, you can shrink image weight by 60% to 90% without visible quality loss.
Step 1: Choose the Right Image Format
Format selection is the single most impactful decision you can make. Here is a quick comparison of the formats web designers should be using in 2026:
| Format | Best For | Browser Support | Avg. Size Reduction vs JPEG |
|---|---|---|---|
| AVIF | Photos, complex visuals | 95%+ (2026) | 50% smaller |
| WebP | All-purpose fallback | 99% | 25 to 35% smaller |
| JPEG | Legacy fallback | 100% | Baseline |
| PNG | Transparency, logos | 100% | Often larger |
| SVG | Icons, illustrations | 100% | Vector, tiny |
Our Recommendation
Serve AVIF as primary, WebP as fallback, and JPEG as a last resort using the <picture> element:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Descriptive alt text" width="1200" height="600">
</picture>Step 2: Resize Before You Compress
One of the most common mistakes: uploading a 4000px wide image that displays at 800px. The browser still downloads the full file.
Rule of thumb: Never serve an image wider than 2x its maximum display size (for retina displays).
- Identify the maximum display width in your design
- Resize the source image to double that width for retina support
- Generate multiple sizes using the
srcsetattribute for responsive delivery
Real Before / After Example
- Original: Camera JPEG, 4000x2667px, 4.8 MB
- Resized to 1600px: 1.2 MB (75% reduction)
- Compressed at 82% quality: 340 KB (93% reduction)
- Converted to WebP: 210 KB (95.6% reduction)
- Converted to AVIF: 145 KB (97% reduction)
Same visual result. The image went from 4.8 MB to 145 KB.
Step 3: Compress Smartly (Quality Setting Sweet Spot)
Google’s own PageSpeed team recommends a quality setting of 80 to 85. Beyond 85, file size grows quickly with almost no visible improvement.
Top Tools for 2026
- Squoosh.app (Google) — Free, browser-based, supports AVIF and WebP
- ImageOptim — Mac desktop app for batch processing
- ShortPixel — Great WordPress plugin with automatic AVIF conversion
- TinyPNG — Simple drag and drop for PNG and JPEG
- Sharp (Node.js) — For automated build pipelines
Lossy vs Lossless: When to Use Each
| Type | Use Case | Typical Savings |
|---|---|---|
| Lossy | Photos, hero images, blog thumbnails | 60 to 80% |
| Lossless | Logos, screenshots with text, icons | 10 to 30% |
Step 4: Implement Lazy Loading
Lazy loading defers offscreen images until they are about to enter the viewport. It is now natively supported in every modern browser. See web.dev for their take.
Native Lazy Loading (Recommended)
<img src="photo.webp" alt="Product photo" loading="lazy" width="800" height="600">Just add loading="lazy". No JavaScript needed.
Important: Do Not Lazy Load Your LCP Image
Your hero image (the largest visible element on load) should use loading="eager" and even fetchpriority="high" to boost LCP scores:
<img src="hero.avif" alt="Hero banner" loading="eager" fetchpriority="high" width="1200" height="600">Step 5: Always Set Width and Height Attributes
Missing dimensions cause layout shifts (CLS), another Core Web Vital. Always declare them explicitly, even when using CSS to make images responsive. This reserves space during load and prevents jumping content. The topic gets a thorough treatment elsewhere.
Step 6: Use a CDN with Automatic Optimization
Modern image CDNs handle format conversion, resizing, and compression on the fly based on the visitor’s browser and device:
- Cloudflare Images
- Cloudinary
- Imgix
- Bunny Optimizer
If you cannot use a CDN, at minimum enable image optimization in your CMS.
Complete Optimization Checklist
- Choose AVIF or WebP as primary format
- Resize to actual display dimensions (max 2x for retina)
- Compress at 80 to 85% quality
- Use the
<picture>element with format fallbacks - Add
srcsetfor responsive delivery - Enable
loading="lazy"on below-fold images - Set
fetchpriority="high"on your LCP image - Always declare width and height
- Write descriptive alt text (SEO and accessibility)
- Test with PageSpeed Insights and Lighthouse
Frequently Asked Questions
Is PNG or JPEG better for the web?
JPEG is better for photographs and complex images because of smaller file sizes. PNG is only preferable when you need transparency or crisp text and edges. For most modern projects, WebP or AVIF outperforms both.
What is the best image size for a website?
Keep individual images under 200 KB when possible. Hero images can go up to 300 KB if needed. The total page weight should ideally stay below 1.5 MB.
Does image optimization affect SEO?
Yes, significantly. Fast-loading pages rank better, and Core Web Vitals (LCP, CLS) are direct ranking factors. Descriptive filenames and alt text also help with image search visibility.
Should I still use JPEG in 2026?
Only as a fallback for very old browsers. Modern workflows should serve AVIF first, then WebP, with JPEG as a safety net inside a <picture> element.
What quality level should I use for JPEG or WebP?
Between 80 and 85. Above 85, file size increases rapidly with no visible benefit. Below 75, compression artifacts start becoming noticeable.
Can lazy loading hurt SEO?
No, as long as you use native loading="lazy". Googlebot fully supports it. Just make sure your LCP image is not lazy loaded.
Final Thoughts
Optimizing images for the web is not about picking one magic tool. It is about combining the right format, correct dimensions, smart compression, and modern loading strategies. Start with your heaviest pages, apply this checklist, and measure the impact with PageSpeed Insights.
Need help auditing your website’s performance or implementing these techniques? Our team at Panpan Vannes specializes in web performance optimization. Get in touch to discuss your project.