How do I compress website images without losing too much quality?

To compress website images without losing too much quality, use a mix of the right format, dimensions, and compression settings.

1) Resize before compressing

Don’t upload huge images and let CSS shrink them.

• If the image displays at 1200 px wide, don’t use a 4000 px file.
• Resize to the largest size it will actually appear on the site.
• This often saves more than compression alone.

2) Use the best image format

Choose the format based on the image type:

• JPEG/WebP/AVIF: best for photos and complex images
• PNG: only when you need transparency or sharp graphics
• SVG: best for logos, icons, and simple illustrations
• WebP: usually a great default for modern websites
• AVIF: even smaller than WebP in many cases, but slower to encode and not as universally supported in older setups

3) Use “lossy” compression for photos

For photos, use lossy compression at a reasonable quality level:

• JPEG quality: around 60–80
• WebP quality: around 60–75
• AVIF quality: often around 35–60 depending on the image

Start higher and lower it until artifacts become noticeable.

4) Use lossless or near-lossless for graphics

For logos, screenshots, and UI graphics:

• Prefer SVG if possible
• If raster is needed, use PNG or WebP lossless
• Avoid overly aggressive compression on text-heavy images, since it can blur edges

5) Remove unnecessary metadata

Strip:

• EXIF data
• Camera info
• GPS location
• Color profiles if not needed

This can reduce file size without affecting visual quality.

6) Use responsive images

Serve different sizes for different screens with srcset and sizes.

This prevents mobile users from downloading desktop-sized images.

Example:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description">

7) Use lazy loading

Load images only when they’re near the viewport:

<img src="image.webp" loading="lazy" alt="Description">

This doesn’t reduce file size, but it improves page performance.

8) Automate optimization

Use tools or build steps so images are optimized before upload:

• Squoosh for manual optimization
• ImageMagick for batch processing
• Sharp for Node.js workflows
• TinyPNG / TinyJPG for quick compression
• CMS plugins or CDN image optimization features

9) Test quality visually

Always compare the original and compressed versions.

Look for:

• blockiness
• blurry text
• color banding
• halos around edges

If you can’t tell the difference at normal viewing size, the compression is probably good enough.

Good practical workflow

1. Resize image to correct display size
2. Convert to WebP or AVIF for most images
3. Set moderate quality
4. Strip metadata
5. Use responsive images
6. Test on desktop and mobile

If you want, I can also give you:

• a recommended compression setup for WordPress
• command-line examples
• or a simple image optimization workflow for a static website