Images account for 50% of the average web page weight. A single unoptimized hero image can add 3 seconds to your load time. Here is everything you need to know about image optimization.
Why Image Optimization Matters
- PageSpeed Score: Google uses Core Web Vitals for ranking. Large images tank your LCP.
- Bandwidth costs: Serving 2MB images to mobile users on 3G is expensive.
- Conversion rates: Every 100ms of load time improvement increases conversions by 1%.
The Three Pillars
1. Compress
Lossy compression removes data the human eye cannot see. JPEG at quality 80-85 looks identical to 100 but is 60-70% smaller.
convert input.jpg -quality 82 -strip output.jpg
Free tool: Image Compressor — batch compress PNG, JPG, WebP with quality slider.
2. Resize
Do not serve 4000x3000 images in 400x300 containers.
<img srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="hero-800.jpg" alt="Hero">
Free tool: Image Resizer — social media presets for Instagram, Facebook, Twitter, LinkedIn, YouTube.
3. Convert
| Format | Best for | Size vs JPEG |
|---|---|---|
| WebP | Everything | 30% smaller |
| AVIF | Everything | 50% smaller |
| PNG | Transparency | Larger |
| SVG | Icons/logos | Smallest |
Free tool: Format Converter — convert between PNG, JPEG, WebP, ICO.
More Free Image Tools
- Background Remover — AI-powered
- Passport Photo Maker — All country sizes
- Beauty Filters — 8 adjustments + presets
- Image Enhancer — Auto-enhance, crop, rotate
- Image to PDF — Multiple images to PDF
- Image to Base64 — Data URI converter
- Favicon Generator — All sizes + HTML code
All tools: theappsfirm.com/tools — 50 free tools, 100% browser-based.
Quick Checklist
[ ] All images compressed (quality 80-85)
[ ] Served in WebP with fallback
[ ] Responsive srcset for different screens
[ ] Lazy loading on below-fold images
[ ] Width/height set to prevent layout shift
[ ] CDN caching enabled
What is your image optimization workflow? Share in the comments.
