how to reduce image file size without losing quality

why images are often much larger than they need to be

most people never think about image file sizes until they have a problem. your phone's camera produces images between 3mb and 15mb. screenshots from a retina display can easily hit 2-3mb. images downloaded from stock photo sites are often 10mb or more because they're optimized for print, not web.

when those images end up on a website or in an email, the result is slow load times and frustrated users. a page that takes more than 3 seconds to load loses a significant portion of its visitors before they ever see the content. on mobile connections, large images are the single most common cause of slow pages.

the good news is that most images can be reduced by 50 to 90 percent without any perceptible quality loss, using a combination of the techniques below.

1. choose the right format first

this is the highest-impact change you can make, and it doesn't require any quality tradeoffs. simply using the right format for the type of image can reduce file size by 30 to 80 percent.

consider webp for website images. Google's tests found smaller webp files than comparable jpeg and png files, but savings vary by image and encoder. current major browsers support webp.

use svg for logos and icons. svg is a vector format, meaning it's described mathematically rather than as a grid of pixels. a complex logo as svg might be 5-20kb. the same logo as png might be 200kb or more, and it scales infinitely without any quality loss.

avoid png for ordinary photographs when file size matters. png's lossless compression can produce much larger photo files. jpg or webp may be smaller, but inspect the converted image because lossy settings can remove detail.

2. resize images to their display size

this is one of the most commonly overlooked optimizations. if an image is displayed at 800x600 pixels on your website, there's no reason for the file to be 4000x3000 pixels. every pixel that isn't displayed is pure wasted data.

your phone's camera takes photos at 12, 48, or even 108 megapixels. that level of detail is useful when you're printing a large poster, but it's completely unnecessary for a website thumbnail or a profile photo. resizing a 4000px wide photo to 800px wide doesn't just reduce the dimensions, it typically reduces the file size by 80-90% even before you apply any additional compression.

a simple rule: the maximum image width you'll need on a standard website is around 1600-2000 pixels for full-width hero images, 800-1200 pixels for article content images, and 400-600 pixels for thumbnails and cards.

3. adjust quality settings intelligently

for lossy formats (jpg and webp), the quality setting is a direct dial between file size and visual fidelity. most people never change this from the default, which is often 95-100% and unnecessarily large.

quality loss at these settings can be subtle at normal display sizes, but it is still image-dependent. zoom in on fine detail and gradients before choosing a setting.

4. strip metadata

every photo taken by a camera or phone contains metadata, information embedded in the file about the camera model, lens settings, gps location, date and time, copyright information, and more. this metadata is stored in formats called exif and iptc data.

this metadata is completely invisible to anyone looking at the image on a screen, but it can add 50-200kb to every photo. for a gallery with 20 images, that's potentially 4mb of invisible data.

most image optimization tools strip metadata automatically. it's worth checking that your tools do this, and worth being aware that some privacy-sensitive metadata (like gps coordinates showing where a photo was taken) may be something you want to remove for reasons beyond file size.

5. use progressive loading for large images

progressive jpg and interlaced png files load in a way that shows a low-quality preview of the entire image first, then gradually sharpens as more data loads. this doesn't make the file smaller, but it makes the page feel faster because users see content immediately rather than watching the image load top-to-bottom.

this technique is particularly effective for hero images and large photos where the load time is unavoidably longer. the perceived performance improvement is significant even when the actual load time is the same.

6. use responsive images on the web

modern html lets you provide different image sizes for different screen widths using the srcset attribute. instead of serving a 2000px wide image to a mobile phone that's only 400px wide, you serve the appropriate size for each device.

this looks something like this in practice:

this way a mobile user downloads a 60kb image while a desktop user downloads the 200kb version. the mobile user's experience is dramatically faster, and your total bandwidth usage drops significantly.

how much can you actually save?

to make this concrete, here's what a realistic optimization looks like. starting with a typical iphone photo: 4032x3024 pixels, saved as jpg, approximately 4.5mb.

in this example, that is about a 95% reduction. it is an illustration rather than a typical guaranteed result, so compare both appearance and file size on your own images.

we also measured this instead of relying only on an illustration. in our three-image CozyConvert test, WEBP at 85% saved 64% on a photo-like source, 96% on a text-heavy graphic, and 26% on a transparent icon. the icon's JPG output was actually larger than its original PNG, which is a good reminder that “convert it” is not the same advice as “keep the result.”