Images account for roughly 50% of the average web page's total file size, according to HTTP Archive. They're also the #1 cause of slow page loads and poor Core Web Vitals scores. Optimizing your images is the single highest-impact change you can make for website performance. Here's how to do it right.
Start With the Right Dimensions
The most common mistake is uploading images at full camera resolution. A 6000×4000 photo doesn't need to be 6000 pixels wide on a website that displays images at 800px. Resize first:
- Determine the maximum display width of images on your site
- Resize images to exactly that width (or 2x for retina displays)
- Use our Image Resizer to batch process images to the right dimensions
Choose the Optimal Format
| Content Type | Best Format | Why |
|---|---|---|
| Photos | WebP → JPEG fallback | Smallest for photos |
| Graphics/logos | PNG or WebP | Crisp edges + transparency |
| Icons | SVG | Infinite scaling, tiny files |
| Animations | WebP (animated) | Replaces GIF, 60%+ smaller |
Compress Aggressively — But Visually
Modern compression can reduce file sizes by 50-80% with zero visible quality loss. Key targets:
- JPEG at 80-85% quality — the sweet spot where size drops dramatically but the human eye can't tell the difference
- WebP at 75-80% quality — matches JPEG 90%+ quality with 30% smaller files
- PNG — our Image Compressor optimizes PNG color palettes automatically
Use Responsive Images
Don't serve a 2000px-wide desktop image to a 375px-wide mobile phone. Modern HTML supports responsive images:
- srcset attribute: Provide multiple sizes and let the browser pick the right one
- picture element: Serve different formats (WebP to supporting browsers, JPEG fallback)
- sizes attribute: Tell the browser how wide images display at each breakpoint
Implement Lazy Loading
Lazy loading defers loading images until they're about to enter the viewport. This dramatically improves initial page load time. Simply add loading="lazy" to your img tags. Most modern frameworks (Next.js, React, Vue) support this by default.
Image Optimization Checklist
- ✅ Resize images to display dimensions (2x for retina)
- ✅ Convert photos to WebP with JPEG fallback
- ✅ Compress to 80-85% quality (use our Image Compressor)
- ✅ Add lazy loading attribute
- ✅ Use responsive images with srcset
- ✅ Enable a CDN to serve images from edge locations
- ✅ Run Lighthouse/PageSpeed Insights to verify improvements