Image Optimization: A Complete Guide
· 8 min read
Everything you need to know about compressing, resizing, and converting images directly in your browser.
Images account for 50-80% of the bytes on most web pages. Optimizing them is the single highest-impact performance improvement you can make.
Compression vs. resizing vs. converting
These are three different operations that people often conflate. Compression reduces file size by reducing quality or by optimizing encoding. Resizing changes the pixel dimensions. Converting changes the format.
Choosing the right format
- JPEG: Best for photographs. Use quality 75-85% for web.
- PNG: Best for screenshots, icons, transparency.
- WebP: Best for everything. 25-35% smaller than JPEG.
- AVIF: Even better than WebP but slower to encode.
- GIF: Only for simple animations.
Practical workflow
- Start with the original high-resolution image
- Resize to the largest display size you need
- Convert to WebP
- Compress at 80% quality
- Use lazy loading for below-fold images
Related tools
- Image Compressor — Real-time before/after preview
- Image Resizer — Aspect ratio lock
- Image Converter — JPG/PNG/WebP/AVIF
- Batch Image Resizer — Whole folders in one pass