Skip to content
ImageUtility

Resize

Resize an image for a website

Photographs straight from a camera are several times larger than any web page needs, and they are the single most common reason a page feels slow.

Loading the tool...

The fix is unglamorous: size the image to the space it actually occupies, and encode it as WebP. This tool does both against a budget for each kind of slot, and unlike the other pages here the numbers are ours rather than a platform's - they follow from how browsers and screens work.

How to resize an image for a website

  1. Choose the slot: content image, hero banner, thumbnail or blog header.
  2. Drop the image in - or the whole set of images for the page.
  3. It is resized and re-encoded as WebP against that slot's budget.
  4. Download it, or repeat for the next image.

Supported formats

This tool accepts JPG, PNG, WebP, GIF, BMP and AVIF files. Everything is decoded by your own browser, so the formats available depend on what your browser can open - which for HEIC in particular varies between Safari and other browsers.

Frequently asked questions

Why WebP rather than JPEG?

Because every browser in current use decodes it, and it is meaningfully smaller than JPEG at the same visual quality - typically a quarter to a third less for a photograph. That saving is free: the reader sees the same picture and the page loads sooner. The one reason to stay on JPEG is a workflow downstream that cannot read WebP, which is now rare.

How wide does a content image actually need to be?

Rarely more than about 1200 pixels. A text column is seldom wider than that even on a large monitor, and the browser simply downscales anything bigger while still having downloaded every byte. The exception is a full-bleed hero, which spans the whole viewport and justifies going up to around 1920.

What about high-density phone screens?

They matter less than the arithmetic suggests, because a phone's layout width is small: a full-width image on a typical phone occupies around 400 CSS pixels, so even at three times density it needs about 1200 real pixels - the same figure as a desktop column. Serving several sizes with a srcset is the thorough answer, and one well-chosen size is a large improvement over an unresized original.

Are the file size budgets here a standard?

No. They are working figures for a page that should feel fast, and the page labels them that way. Nobody publishes a limit for an image on your own site; what exists is the consequence - every extra 100 KB is time your reader spends waiting, especially on a phone connection.

Should I resize every image on my site by hand?

For a handful, yes, because you get to choose the crop. For a whole gallery, use the bulk resizer instead: it applies one setting across up to a hundred files and gives you a ZIP. This page is the right one when the image matters enough to look at individually.

Guides

Looking for something else? Browse all ImageUtility tools.