Skip to main content

Shrink Images for the Web: Size, Format, Quality

3 min read

When a page is slow or an upload hits a size limit, most people lower the quality slider first. But there is a better order. This summary is based on measurements with the same photo (1280×854).

Step 1: Resize to the size you need

The biggest way to cut file size is not to use an image larger than it appears on screen. Smartphone photos can be over 4000 pixels wide, while a blog's text column is usually around 800 pixels. All those pixels you can't even see are file size.

SettingWidthFile size
JPG, quality 80, original size (1280×854)1280px298KB
JPG, quality 80, width 800px800px118KB

We kept the quality the same and only reduced the width to 800 pixels, and the file shrank by more than 60%. Unless you need a double-size version for high-density (Retina) screens, match the display size. On this site, set the width in px under Size in the options and the aspect ratio is preserved.

Step 2: Pick a format that suits the image

This is the same photo saved in different formats. 1280×854, with quality 90 for formats that have a quality setting.

FormatFile size
JPG417KB
WebP370KB
GIF656KB
PNG2.2MB
BMP3.1MB

A photo saved as PNG is more than five times the JPG. If the photos on your website are PNG, changing the format alone is the easiest improvement. Conversely, for logos and screenshots with few colors and text, PNG is often smaller or similar, and converting to JPG blurs the text. A good rule: JPG or WebP for photos, PNG or WebP for transparent backgrounds and simple graphics. The difference between the two is covered further in WebP vs JPG.

Step 3: Adjust quality last

If you want to shrink further after fixing the size and format, that's when you touch quality.

JPG qualityFile size
95556KB
90417KB
80298KB
60202KB

Going from 95 to 80 nearly halves the file. For photos, 80-85 usually still looks fine to the eye, and below 60, blocky patterns start to appear in smooth areas such as the sky. These numbers come from a single image, so for important images check the result's size and actual quality by eye.

Step 4: Remove information you don't need

Camera photos carry EXIF data such as the device, time and location. It isn't big in file size, but it matters for privacy. Results from this site don't include that information by default.

Summary: the priority order

  1. Resize to the displayed size. This has the biggest effect.
  2. Save photos as JPG or WebP. PNG photos shrink a lot just by changing the format.
  3. Start quality at 80-85 and lower it if needed.
  4. Check the result's size and actual quality.

You can add many files at once, convert them with the same settings and download them as a ZIP.

Convert PNG to WebP Convert PNG to JPG

More guides