How to Compress Images for a Website

Resize images to the size they display at, export JPEG at 70-80 quality or convert to WebP, and get each file under 200 KB with Squoosh, ImageOptim or cwebp.

Pages load slowly because the images are several megabytes each. Resizing and re-encoding them cuts most files by 80 to 95 percent with no visible difference.

Resize to the display size first

Find the width the image occupies on the page: right-click it, choose Inspect, and read the rendered width. Export the file at that width, or double it for high-density screens. A 4000px camera photo in an 800px column should be saved at 800px or 1600px, never 4000px. With ImageMagick installed:

magick photo.jpg -resize 1600x photo-1600.jpg

Resizing alone often removes more bytes than any compression setting.

Pick the format

  • JPEG for photographs. Export at quality 70 to 80; below 70 shows blockiness, above 80 adds size for no visible gain.
  • PNG for flat graphics, logos with transparency, and screenshots with text.
  • SVG for logos and icons, which stay sharp at any size.
  • WebP or AVIF for either kind of image. They are 25 to 50 percent smaller than JPEG at the same quality and every current browser supports them.

Compress with a tool

  • Squoosh (squoosh.app, runs in the browser): drop the image in, choose MozJPEG or WebP on the right, move the quality slider while comparing the two halves, then download.
  • ImageOptim (Mac): drag files onto the window. It strips metadata and recompresses in place. Turn on lossy minification in Preferences for larger savings.
  • Command line, after brew install webp or apt install webp:
cwebp -q 80 photo.jpg -o photo.webp

To convert a folder at once:

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Let the framework do it

Next.js <Image>, Astro <Image> and similar components resize the source and serve WebP or AVIF automatically, so the original can stay in the repo at full size:

import Image from "next/image";

<Image src="/hero.jpg" alt="Sunrise over the harbor" width={1600} height={900} />

Serve WebP with a fallback

Plain HTML sites can offer the WebP file and fall back to JPEG:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Sunrise over the harbor" width="1600" height="900">
</picture>

Target under 200 KB per image. Hero images can run to 300 KB; everything else should be well under. Check the sizes in the Network tab of DevTools after deploying, sorted by size.

Set width and height attributes. The browser uses them to reserve space before the file arrives, which stops the page from jumping as images load. Use the actual pixel dimensions; CSS still controls the displayed size.

More Websites how-tos