10 Ways to Reduce Image File Size (That Actually Work)
Smaller images load faster, cost less bandwidth, and make websites more usable. Here are ten techniques that actually make a difference — from the basic to the things most people skip.
Resize to actual display dimensions
This is the biggest single improvement for most images. If you're displaying an image at 800px wide, serve an 800px wide image. Serving a 4000px original with CSS that shrinks it means the browser downloads all 4000 pixels and then throws most of them away. A 4000px photo at 80% quality is about 2MB. The same photo at 800px is about 80KB. That's a 25x size reduction before you've even applied compression.
Use the right format
Format choice affects file size dramatically. For photos, use JPG or WebP. For screenshots, logos, and graphics with transparency, use PNG or WebP. Never use PNG for photographs on web pages — PNG stores photos losslessly, which makes them much larger than they need to be. A 2MB PNG photograph is often the same photo that would be 150KB as a JPG.
Convert to WebP
WebP files are 25-35% smaller than JPG at the same visual quality. If you're currently using JPG images on a website, converting them to WebP is one of the highest-impact changes you can make with minimal effort. All modern browsers support WebP. The conversion takes a few seconds per image.
Apply compression at 75-85% quality
The quality range 75-85% removes the most file size while keeping visual quality high enough that most people won't notice the difference when viewing images at normal screen zoom. Below 70%, artefacts start appearing in areas with fine detail. Above 90%, you're barely reducing file size at all. 80% is the sensible default.
Strip EXIF metadata
Images taken on cameras and phones contain EXIF data: camera settings, GPS coordinates, timestamp, copyright information, and more. This metadata can add anywhere from a few KB to over 100KB to a file. For web images, you rarely need any of it. Many compression tools strip EXIF automatically. If yours doesn't, it's worth looking for a tool that does.
Blur or simplify backgrounds
Image compression algorithms struggle with areas of high detail. A sharply focused background with lots of texture takes more bytes to represent than a blurred or simple background. If you can blur the background of your image in a photo editor before exporting (or use portrait mode on your phone to do this in-camera), the resulting compressed file will be smaller.
Reduce colour depth for simple images
Photos need millions of colours. But if you have a simple graphic with only a handful of distinct colours — an icon, a chart, a logo — reducing the number of stored colours significantly reduces file size. PNG supports 8-bit (256 colours) and 24-bit (16 million colours). For simple graphics, 8-bit PNG or a properly optimised SVG is much smaller than a full-colour PNG.
Crop before compressing
If you need to crop an image anyway, do it before applying compression. Compressing a 4000x3000 image and then cropping it to 1000x1000 means you compressed three times as many pixels as you needed. Crop first, then compress the smaller result. Less work, smaller output.
Use progressive loading for large images
Progressive JPG and interlaced PNG load a low-quality version of the image first, then sharpen it progressively as more data arrives. This doesn't reduce file size, but it makes large images feel faster to load because users see something immediately rather than waiting for the full image. For images over 100KB, progressive encoding is usually worth enabling.
Test on a slow connection
Open Chrome DevTools, go to the Network tab, set the connection to 'Slow 3G', and load your page. This simulates what users on mobile data in weak signal areas experience. If the page takes more than 5 seconds to show usable content, your images are probably the culprit. This test is humbling but very useful.
Try compressing your image now
Drop an image, see how much you can save. Nothing uploaded, all in your browser.
Compress image for free →