How to compress images for the web

Images are usually the heaviest thing on a page — and the easiest thing to fix. This is the short, practical version of doing it right, whether you're shipping a marketing site or a blog post.

Right-size before you compress

Serve images at (roughly) the pixel size they're displayed. A hero displayed at 1280px doesn't need a 4000px source — export at up to 2× the display width for retina screens and stop there. Use srcset if you want the browser to pick per device, and loading="lazy" for anything below the fold.

Choose the format deliberately

• JPEG — photos with wide support. Still a fine default.
• PNG — UI, screenshots, logos, transparency. Compression (below) makes them small.
• WebP — 25–35% smaller than JPEG at similar quality; supported by every current browser.
• AVIF — smallest of all for photos, slightly slower to encode; great as the first choice in a <picture> element.

Compress the exports

Whatever your design tool exports, it's rarely optimal. TinyPresso batch-compresses the lot on your Mac: PNGs come out 60–80% smaller for UI and flat-color work with no visible difference, JPEGs are re-saved at a leaner quality, and the Format picker converts everything to WebP or AVIF in the same pass. No upload limits and it works offline — handy when the exports are client work you'd rather not send to a third-party server. See how it compares in our TinyPNG comparison.

Quick checklist before you ship

1. Dimensions ≤ 2× displayed size
2. Right format per image type (photo vs UI vs transparency)
3. Everything batch-compressed (a 2.4 MB landscape should be ~700 KB; UI PNGs far less)
4. loading="lazy" below the fold, explicit width/height to avoid layout shift