Compress Images for Your Website

What compression means for Core Web Vitals

Smaller files mean faster LCP and less layout shift from slow images. Google's Core Web Vitals and your visitors both reward it: pages under ~1MB load noticeably faster on mobile connections.

A compression workflow for web images

1. Open the Compress Image tool.
2. Export your design at the exact display size (Retina = 2×).
3. Compress to quality 70-85%.
4. Ship as WebP when the CMS allows it.
5. Always resize before compressing — redecode never recovers wasted pixels.

A lighter site is a private one

Compressing locally means your unpublished artwork and staging screenshots never leak to a third-party upload server. Compress in your browser, then deploy what you approve.

Page weight budgets that keep sites fast

Realistic budgets: a whole page should stay under 1.5-2MB, which means a hero image has roughly 150-300KB to work with, in-content images 50-150KB, and thumbnails under 30KB. These numbers are not arbitrary - they map to how long a page takes to become interactive on a mid-range phone over 4G, which is where most sessions happen.

The compression hierarchy that hits those targets: size the image to its rendered pixels first (a 400px sidebar image does not need 3000 source pixels), then compress at 75-85% quality for photos or use WebP/WebP with quality 75-80 as the modern default, which saves 25-35% over JPG at the same perceptual quality. Serve responsive variants where the theme supports it. The tool on this page does the second step in your browser - the first step, exporting at the right size, is where the biggest savings actually live.