How to reduce image size for a website

Oversized images are the most common reason a site feels slow, and the easiest thing to fix.

Compress images
Whichever tool you use here, the file stays on your device. How that works

Step by step

  1. 1Add JPG, PNG or WebP images and select Keep format, JPG, PNG or WebP output.
  2. 2Check the maximum width: its default is 1920 pixels. Choose Keep original size if dimensions must stay unchanged.
  3. 3Adjust quality for JPG or WebP and compare the reported sizes after processing. PNG ignores this quality setting.
  4. 4Save each result and inspect text and fine detail. Use Compress to a size for a specific KB target.

Displayed size is what matters

Start with dimensions appropriate to the image's actual display area. Compare a JPG and WebP at the same visible size, and check text and gradients. This tool exports files; it does not create srcset HTML, responsive variants or a CDN.

The starting maximum width is 1920 pixels. Choose Keep original size when dimensions must remain unchanged.

JPG and WebP use the quality control. PNG ignores it; compare actual sizes because results can be larger.

A workflow for a whole site

Work out the widest a picture is ever displayed on your page, and make the file about twice that wide so it stays sharp on high density screens. A picture shown at 800 pixels is well served by a 1600 pixel file, and one shown full width rarely needs more than 1920.

Run the whole folder through at once with the same settings, choose WebP for the smallest files, and check a few pictures on the live page afterwards. The size shown for each file lets you spot any that are still too heavy.

Questions

Can I preserve width and height?

Choose Keep original size instead of the default maximum width. JPG or WebP quality changes can reduce bytes but also affect visual detail.

What if the picture will not resize?

JPG, PNG and WebP always open. Other types depend on your browser, so convert them first with Convert format. A very large photo can run out of memory on a phone, so try a computer.

What width should I use for a full width banner?

1920 pixels is the default and is enough for almost every screen. Wider than that adds weight without a visible gain.

Related jobs and next steps

How to shrink photos before sending themSend photos without waiting for a huge upload or blowing through your data, by shrinking them first on your own device.How to prepare photos for a listingGet listing photos to a sensible size and shape so they upload quickly and display properly, without sending them to a third party first.How to make a photo small enough to emailGet photos under an email attachment limit without sending them through a third party service first.

Tools that help with this job

Compress images
Resize imageExact pixels or size presetsConvert formatJPG, PNG and WebP, both directionsImage to PDFTurn photos and scans into a PDFCrop & rotateQuarter turns, flips and ratio crops