Guide
Web Image Optimization Checklist
Updated: 9 March 2026
Written by the ImageReady editorial team. Reviewed against current browser and publishing workflows.
This checklist is built for real publishing workflows: marketing pages, product screenshots, blog images, and support docs. Use it before shipping any page with media.
1) Pick format by content type
- Use JPG or WebP for photos and gradients.
- Use PNG only when you need crisp transparency or pixel-perfect graphics.
- Use WebP as the default for web delivery when browser support is acceptable.
- Keep source files in high quality, then export web versions separately.
2) Resize before publishing
- Do not upload a 4000px image if the layout renders it at 1200px.
- For content sections, 1200px wide is usually enough.
- For full-bleed hero images, 1600-1920px often covers desktop screens.
- Use responsive `srcset` or Next.js image sizing where possible.
3) Set compression intentionally
- Start with 80-85% quality for JPG/WebP.
- Zoom to 100% and inspect edges, skin tones, text, and gradients.
- Lower quality only if artifacts are not visible in real use.
- Keep brand assets slightly higher quality than gallery thumbnails.
4) Meet accessibility and UX basics
- Write specific alt text for informative images.
- Use empty alt text for decorative images.
- Avoid embedding critical text inside images.
- Test mobile readability with real devices or browser emulation.
5) Run a pre-publish quality gate
- Check page weight in Lighthouse or DevTools.
- Confirm Largest Contentful Paint image is optimized first.
- Verify no broken image links and no stretched aspect ratios.
- Compare before/after quality and keep the smallest acceptable version.
Quick benchmark targets
- Hero image: aim for under 300 KB when possible.
- In-article image: aim for under 200 KB.
- Thumbnails: aim for under 80 KB.
- Always prioritize visual clarity over arbitrary byte targets.