Images are the single biggest contributor to slow page loads — yet most developers only compress them once, at export time, and never think about it again. A 5MB photo that should weigh 150KB is the difference between a page that loads in 0.8s and one that crawls past 4s on mobile.
Here are the compression techniques that actually matter, in order of impact:
1. Resize before you compress.
If your original is 4000x3000px but your layout only needs 1200px wide, every pixel beyond that is wasted bytes. Resizing first, then compressing, routinely turns a 5MB photo into under 100KB.
2. Use WebP as your output format.
WebP is typically 25-35% smaller than JPEG at the same visual quality, and every modern browser supports it. For screenshots and UI mockups, converting PNG to WebP is often an 80-90% reduction.
3. Find the quality breakpoint, don't guess.
Start at 100% quality and slide down while previewing the result side by side. The moment you notice degradation, bump back up 5%. For most web images that lands between 70-80% — visually near-identical, 60-80% smaller.
4. Match quality to usage.
Hero images and photography portfolios deserve ~85%. Thumbnails and icons can drop to 60% where detail matters less. One setting for everything means you're either bloating thumbnails or degrading heroes.
5. Watch your Core Web Vitals.
Image weight is the #1 factor in Largest Contentful Paint (LCP). Cutting image size on your top pages can shave seconds off LCP on mobile — and since Google uses LCP as a ranking signal, it's a free SEO win alongside the speed gain.
When I need to batch-process images quickly, I use a browser-based compressor at codetoolbox.pro/tools/image-compressor — it runs entirely locally via the Canvas API, so nothing gets uploaded to a server, which matters when you're compressing screenshots of internal dashboards or customer data.
The rule of thumb: if a page's images are under 100KB total, you're probably fine. If a single image is over 500KB, it's costing you ranking and conversion. Compress once, deploy everywhere.
Top comments (0)