Guides / Images

How to Compress and Resize Images for the Web

Last reviewed October 12, 2026

Oversized images are the most common reason a web page loads slowly. A photo straight from a phone can be 5 MB or more, when a page only needs a few hundred kilobytes. Shrinking images costs you almost nothing in appearance and can make pages load several times faster. Here is a simple, reliable method using Anvil.

The three levers

File size depends on three things you control: the format, the pixel dimensions and the quality setting. Changing all three together gives the biggest savings.

  1. Format. Photos should be JPG or WebP. Graphics with flat colour and sharp edges are usually smaller as PNG. See PNG vs JPG vs WebP.
  2. Dimensions. A picture shown 800 pixels wide on a page does not need to be 4000 pixels wide. Setting a maximum width cuts the file size dramatically.
  3. Quality. For JPG and WebP, a quality of about 80 to 85 removes a lot of data without a visible difference in most photos.

Step by step with Anvil

  1. Open the Images tool and drop in your image or images (up to 25 MB each).
  2. Choose WebP or JPG as the target format.
  3. Type a maximum width in pixels. Anvil shrinks the picture to fit and keeps the proportions. It never enlarges a small image.
  4. Set the quality, for example 85.
  5. Press Convert. One image downloads directly. Several images are converted one by one and returned as a single ZIP file.

Which width should you pick?

  • About 1600 pixels for a full-width hero image or banner.
  • About 1000 to 1200 pixels for a main image inside an article.
  • About 600 to 800 pixels for images inside a narrow column or a card.
  • About 300 to 400 pixels for thumbnails.

If you want sharp images on high density (retina) screens, choose about twice the width the image is displayed at. Going beyond that adds file size without any visible gain.

Choosing a quality value

Quality is a trade between file size and visible detail. As a rule of thumb: 90 and above is nearly indistinguishable from the original but saves little space, 80 to 85 is the best balance for most photos, 60 to 75 suits small thumbnails and background images, and anything below 50 usually shows blocky artefacts. Always look at the result before you publish it. Quality applies to JPG and WebP only, since PNG is lossless.

Common mistakes

  • Saving a screenshot with text as JPG, which blurs the letters. Use PNG or high quality WebP.
  • Re-saving the same JPG many times. Each pass loses a little quality, so always compress from the original file.
  • Resizing in the browser with CSS only. The visitor still downloads the full-size file.
  • Forgetting to batch. Select all the images at once and convert them in one go instead of one at a time.

Try it now

Open the Images tool. It is free, needs no account, and your files are deleted right after conversion.

Related guides