How to Reduce Image File Size for the Web

Images are usually the single heaviest part of any web page, which means they're also the biggest lever for improving page load speed. The good news is that reducing image file size rarely requires visible quality trade-offs if you approach it correctly.

The first and biggest win is picking the right format for the content. Photographs should be saved as JPG or, better yet, WEBP — both use compression specifically tuned for photographic detail, and WEBP in particular typically delivers 25–35% smaller files than JPG at an equivalent visual quality. Flat-color graphics, logos, and icons should stay as PNG or SVG, since applying photo-oriented JPG compression to simple graphics can actually make them both larger and blurrier.

The second lever is resolution. It's extremely common for images to be uploaded at a far higher resolution than they're ever displayed at — a 4000-pixel-wide photo shown in a 600-pixel-wide content column is wasting the vast majority of its file size on detail no visitor will ever see. Resizing images to roughly match their maximum display size, before any compression, is often the single biggest file-size reduction available.

Third, compression quality settings matter more than most people assume. JPG and WEBP both allow a quality dial roughly from 0–100; going from a default of 100 down to around 80–90 typically cuts file size substantially with essentially no visible difference, while quality settings much below 70 start to show noticeable artifacts. There's a real sweet spot, and it's usually lower than whatever an editor's default export setting is.

Fourth, consider format conversion for images already sitting in the wrong format. A PNG screenshot of a photograph, or a JPG re-save of a simple graphic, are both common mismatches that a quick conversion to the right format can fix immediately, often shrinking the file dramatically without any visible change.

Finally, remember that these techniques compound: converting a photo from PNG to WEBP, resizing it to its actual display dimensions, and applying a sensible quality setting together can easily reduce a multi-megabyte image down to a few hundred kilobytes — the difference between a page that loads instantly and one that visibly stalls on a mobile connection.