Website Image Optimization Checklist
Last updated: January 25, 2026
Quick checklist
- Resize images to the maximum display size.
- Pick the right format (JPEG, PNG, or WebP).
- Compress with the lowest acceptable quality.
- Deliver responsive sizes for different screens.
- Lazy load below-the-fold images.
1. Resize before you compress
Compression is most effective after resizing. If an image will be displayed at 1200 pixels wide, do not upload a 4000 pixel original. Resize first, then compress. This preserves detail and avoids unnecessary file size.
2. Choose the right format
- JPEG: best for photos and complex images.
- PNG: best for logos, text, and transparency.
- WebP: smaller file sizes with modern support.
If you need both quality and size, start with WebP and keep a fallback if required.
3. Compress with intention
Set quality to 80 and reduce until artifacts appear at real size. Avoid extreme compression that creates blocky edges or banding in gradients.
4. Serve responsive images
Deliver multiple sizes so mobile users do not download desktop-sized images. Use responsive image techniques in your site or platform to automatically serve the right size.
5. Audit your biggest pages
Start with top landing pages and product pages. Identify the largest images and reduce their size first. Small improvements across multiple images often add up to meaningful performance gains.