Guides

How to compress images for websites

A practical checklist for reducing image file size while keeping pages sharp and usable.

Images5 min read
Quick guide

What to check first

Resize before compressing

Large camera photos often contain far more pixels than a website needs. A 4000px-wide image shown in a 900px content area wastes bandwidth and can slow down the page.

Start by setting a realistic maximum width and height. Then adjust quality to find the smallest file that still looks good.

  • Use 1200-1600px for many article images
  • Use smaller dimensions for thumbnails
  • Keep original files separately before exporting

Pick the right format

JPEG works well for photos. PNG is useful for graphics that need sharp edges or transparency. WebP and AVIF can produce smaller files, but compatibility and workflow needs still matter.

If a transparent logo becomes a JPEG, the transparency is lost. If a photo stays as PNG, the file may be much larger than necessary.

Compare output sizes

Do not chase the smallest number blindly. A slightly larger image that looks clean is usually better than an over-compressed image with visible artifacts.

Batch compression is helpful when you have a folder of images, but check a few samples before publishing everything.

Frequently asked questions

What image quality should I use?

For many web photos, a quality value around 70-85% is a good starting point. The best value depends on the image detail and format.

Should I resize or compress first?

Resize first when the image dimensions are too large, then compress the resized output.