How to Optimize Images for Web Performance
Image optimization reduces file sizes to improve page load speed. This guide covers format selection, compression, responsive images, and practical techniques for faster websites.
The 4 Steps of Image Optimization
1
Choose Format
Use WebP for best compression. JPG for widest compatibility. PNG for transparency.
2
Resize
Match image dimensions to display size. A 4000px image displayed at 800px wastes bandwidth.
3
Compress
Apply compression at quality 80-85% for photos. This typically reduces file size by 50-70%.
4
Deliver
Use responsive images (srcset) to serve appropriate sizes for different devices.
Target File Sizes
< 50KB
Thumbnails, icons
< 200KB
Content images
< 500KB
Hero images
Format Selection Guide
📸 Photographs
Use WebP for best compression. Fall back to JPG for older browser support. Quality 80% is the sweet spot.
🎨 Logos and Graphics
Use SVG for scalable graphics. Use PNG for raster graphics with transparency. Use WebP for smaller files.
📱 Social Media
Use JPG for widest compatibility. Most platforms convert to their own format anyway.
Responsive Images
Serve different image sizes for different screen sizes. A mobile user should not download a 4000px desktop image.
<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
src="medium.jpg" alt="Description" /> Common Mistakes
- ❌ Uploading 4000px images for 400px display — wastes bandwidth
- ❌ Using PNG for photographs — 3-5x larger than JPG
- ❌ Quality 100% — minimal visual benefit, 2-3x larger files
- ❌ Not specifying width/height — causes layout shift (CLS)
- ❌ Loading all images eagerly — below-fold images should be lazy-loaded
Try the Tools
Frequently Asked Questions
How do I optimize images for my website?
Use WebP format at quality 80%, resize to the display dimensions, compress to reduce file size, and use responsive images with srcset for different screen sizes.
What is the ideal image file size for web?
For most web images, aim for under 200KB. Hero images can be up to 500KB. Thumbnails should be under 50KB. Product images should be under 200KB.