How to Compress Images for the Web

Make images load faster: resize to the right dimensions, choose a modern format, set quality and strip metadata. A practical workflow with free browser tools.

Why image size matters

Images are usually the heaviest part of a web page. A single unoptimized photo straight from a phone can be 3 to 8 MB, more than the rest of a typical page combined. Every extra megabyte means a longer wait on mobile connections, more data used by visitors on limited plans and, often, a slower Largest Contentful Paint, the Core Web Vitals metric that measures when the main content appears. Search engines consider page experience, and visitors simply leave slow pages.

The good news is that most images can be made five to twenty times smaller with no difference a visitor would notice. The trick is to do the steps in the right order: dimensions first, then format, then quality.

Step 1: Resize to the size you actually display

Resizing has the biggest effect, because file size grows with the number of pixels. A 4000 × 3000 photo has 12 million pixels. If it appears in a 800 pixel wide column, a 1600 pixel wide version is enough even for high-density screens, and it has about one sixth of the pixels.

A useful rule is to export images at twice the largest width they are displayed at, which keeps them sharp on high-density phone and laptop screens. A full-width hero image rarely needs to be wider than 2000 to 2400 pixels, and a thumbnail shown at 300 pixels needs about 600.

1. Open the Image resizer and add your images. You can add up to 20 at once.
2. Keep Lock aspect ratio ticked so the image is not stretched.
3. Type the target width; the height updates automatically. You can also use the 25%, 50% and 75% buttons.
4. Choose the output format and download the results individually or as a ZIP.

Step 2: Choose the right format

For photographs on a website, WebP is generally the best default: it is supported by all current major browsers and is usually noticeably smaller than JPG at similar quality. AVIF can be smaller still, but encoding support varies between browsers. Use PNG or lossless WebP for screenshots, logos and graphics with text, where lossy compression creates visible artifacts. Keep JPG when the image also needs to work in email or in tools that may not handle WebP.

If you are unsure, read our guide comparing JPG, PNG and WebP. The short version: lossy for photos, lossless for graphics, and WebP for the web where you can.

Step 3: Set the quality level

Lossy formats have a quality setting that controls how much detail the encoder discards. The relationship is not linear. Dropping from 100% to 85% usually removes a lot of bytes and very little visible detail, while going below about 60% starts to show blurring and artifacts, especially around edges and in skies.

1. Open the Image compressor, which starts with JPG output at 82% quality, or the Image quality optimizer, which starts with WebP.
2. Add your images and choose the output format: Original keeps each file’s own format, or pick PNG, JPG, WebP or AVIF.
3. Move the Quality slider and watch the result preview and the percentage change in size.
4. Zoom in on faces, text and fine textures in the preview. Lower the quality until you start to see a difference, then step back up a little.
5. Download the image, or the ZIP for a batch.

For most website photos, a quality between 70% and 85% is a good range. If the compressed image would be larger than the original in the same format and size, the Image compressor keeps your original file instead, so you never download a bigger result by accident.

Step 4: Remove metadata

Photos from phones and cameras carry EXIF metadata: camera model, settings, date and often precise GPS coordinates. It adds a little weight and can reveal where a photo was taken. When the compressor or resizer re-encodes an image, the new file is built from pixels and the metadata is not carried over. If the compressor keeps your original because it is already smaller, that original still contains its metadata. To be sure, run published photos through the EXIF metadata remover, or check them with the Image metadata viewer.

Step 5: Serve images well

A well-compressed file is only half of the job. A few HTML habits make sure browsers use it efficiently:

• Set width and height attributes on img elements so the browser reserves space and the layout does not jump while images load.
• Add loading="lazy" to images below the first screen so they load only when a visitor scrolls near them. Do not lazy-load the main image at the top of the page.
• Use srcset and sizes to offer several widths, such as 600, 1200 and 1800 pixels, so phones download smaller files than desktops.
• Write descriptive alt text. It helps visitors using screen readers and helps search engines understand the image.

A quick checklist

• Is the image no wider than about twice its displayed width?
• Is it WebP or AVIF for the web, or JPG where compatibility matters?
• Is graphic content with text saved losslessly?
• Is lossy quality between roughly 70% and 85%, checked at full zoom?
• Has location metadata been removed from personal photos?

Frequently asked questions

Are my images uploaded for compression?

No. All of these tools encode images in your browser, so photos never leave your device. That also means there is no queue and no daily limit.

Why did my PNG barely shrink?

PNG is lossless, so the Quality slider does not apply. For photos saved as PNG, convert to JPG or WebP to make a big difference.