How to compress images for a website without losing quality

Step 1. Resize before you compress

The biggest saving usually comes not from compression but from dimensions. A 4000 × 3000 phone photo shown in an 800-pixel-wide column carries far more pixels than anyone will see. Rule of thumb: make the image as wide as its largest display size, times 2 if you want it sharp on high-density (“Retina”) screens. For an 800 px column that means about 1600 px wide.

Use an image resizer first, then compress.

Step 2. Pick the right format

WebP is supported by all current major browsers. Google’s own comparison reports lossy WebP files roughly 25–34% smaller than JPEGs of similar quality, and lossless WebP about a quarter smaller than PNG; your results will vary with the image. A common mistake is saving photos as PNG — a photo in PNG can easily be several times larger than a good JPEG or WebP with no visible benefit.

Step 3. Choose the quality setting

“Quality” in JPEG and WebP encoders is a scale, not a percentage of the original. A setting of about 75–85 is a common starting point for photos. The honest way to decide is visual:

1. Open the image compressor and load the image.
2. Choose WebP or JPEG and lower the quality while watching the before/after comparison at 100% zoom.
3. Stop when you start to see blockiness, banding in skies or halos around text, then go back up a few steps.

Images with large smooth areas (sky, gradients) show artefacts sooner; busy, detailed photos tolerate lower settings. Text inside images suffers the most — consider real HTML text instead.

Step 4. Strip what you don’t need

Camera photos include EXIF metadata — camera model, date and sometimes GPS location. It adds weight and can leak private information. Re-encoding in a compressor usually removes it; you can check with an EXIF viewer. For SVG files, an SVG optimizer removes editor junk and comments.

Step 5. Serve images efficiently in HTML

<picture>
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px">
  <img src="hero-1600.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(max-width: 800px) 100vw, 800px"
       width="1600" height="900" alt="Team at work in the office" decoding="async">
</picture>

<!-- below the fold: let the browser load it later -->
<img src="chart.webp" width="1200" height="675" alt="Monthly sales chart" loading="lazy" decoding="async">

• <picture> with a WebP <source> lets browsers that support WebP use it and others fall back to JPEG.
• srcset and sizes let phones download the smaller version.
• width and height reserve space so the layout does not jump while the image loads (this affects Cumulative Layout Shift).
• loading="lazy" defers off-screen images. Don’t lazy-load the main image at the top of the page — it delays Largest Contentful Paint.
• Always write meaningful alt text: it helps screen-reader users and image search.

Quick checklist

• Dimensions ≤ display size × 2.
• Photos → WebP (or AVIF) with JPEG fallback; logos → SVG; screenshots → PNG or lossless WebP.
• Quality chosen by eye, typically in the 75–85 range for photos.
• Metadata removed; width, height and alt set; lazy loading below the fold.

Need to convert a whole batch of JPG or PNG files? The WebP converter does it in the browser.