Image Optimization for Websites: Boost Your Core Web Vitals Score
Google uses Core Web Vitals as a ranking signal. Poorly optimized images are the single biggest cause of failing Core Web Vitals scores — specifically the Largest Contentful Paint (LCP) metric. This guide explains exactly what to do to optimize your images for maximum page speed and search performance.
What Are Core Web Vitals?
Core Web Vitals are a set of real-world performance metrics Google uses to evaluate user experience:
- LCP (Largest Contentful Paint): How long it takes for the largest image or text block to appear. Target: under 2.5 seconds.
- CLS (Cumulative Layout Shift): How much the page layout shifts during loading. Target: under 0.1.
- INP (Interaction to Next Paint): How fast the page responds to user interactions. Target: under 200ms.
Images affect LCP most directly — and often CLS too, when image dimensions aren't specified in HTML.
Step 1: Use the Right Image Format
Use WebP for web images. WebP provides 25–35% smaller file sizes than JPG at the same visual quality. All modern browsers support it.
For older browser fallback, use the HTML picture element:
<picture><source srcset="image.webp" type="image/webp" /><img src="image.jpg" alt="Description" /></picture>
Use ToolFlow's WebP Converter to convert your existing JPG and PNG images to WebP.
Step 2: Compress Your Images
A hero image that is 3MB will add 3+ seconds to your LCP on an average mobile connection. Target these file sizes:
- Hero/banner images: 150–300KB
- Product images: 50–150KB
- Blog post images: 50–100KB
- Thumbnails: 10–30KB
Use ToolFlow's Image Compressor to compress images to target sizes.
Step 3: Resize Images to Display Size
Never serve a 4000×3000 pixel image when it displays at 800×600 pixels on the page. The browser downloads the full image regardless of how it's displayed.
Calculate the maximum display width of your image container and resize accordingly. Add 2x for Retina displays (so a 400px wide container needs an 800px wide image).
Use ToolFlow's Image Resizer to resize images to exact dimensions.
Step 4: Specify Width and Height Attributes
Always include width and height attributes on your img tags. This prevents Cumulative Layout Shift (CLS) by allowing the browser to reserve the correct space before the image loads:
<img src="image.webp" width="800" height="450" alt="Description" />
Step 5: Lazy Load Below-the-Fold Images
Images that appear below the fold don't need to load immediately. Use native lazy loading:
<img src="image.webp" loading="lazy" alt="Description" />
Only the hero/LCP image should load eagerly. All other images can be lazy loaded.
Step 6: Preload Your LCP Image
For the largest image on the page (usually the hero banner), use a preload hint to start loading it immediately:
<link rel="preload" as="image" href="/hero.webp" />
This can reduce LCP by 0.5–1 second on many sites.
Step 7: Use a CDN
A Content Delivery Network serves images from servers close to your visitors. This reduces latency, especially for international visitors. Vercel and Cloudflare both offer free CDN tiers.
Real-World Impact
A typical e-commerce site before optimization:
- Hero image: 3.2MB JPG → LCP: 5.8s (Poor)
After optimization:
- Hero image: 180KB WebP → LCP: 1.9s (Good)
That single change improved LCP by nearly 4 seconds — which can significantly improve both search rankings and conversion rates.
Image Optimization Checklist
- [ ] Convert images to WebP format
- [ ] Compress images to target file sizes
- [ ] Resize images to actual display dimensions
- [ ] Add width and height attributes to all img tags
- [ ] Lazy load below-the-fold images
- [ ] Preload the LCP image
- [ ] Use a CDN for image delivery
Conclusion
Image optimization is the highest-impact performance improvement for most websites. Start with format conversion to WebP and compression — these two steps alone typically cut image payload by 60–80%.