Reduce Image File Size — Compress Images Without Losing Quality

Reducing image file size for websites involves three levers: choosing the right format, adjusting compression quality, and resizing to the actual display dimensions. Together, these can reduce image sizes by 60–95% without meaningful quality loss.

Use the Image Compressor to compress JPEG and PNG files directly in your browser.

The three ways to reduce image file size

1. Choose the right format

Format choice is often the highest-leverage decision:

Situation	Best format	Savings vs wrong choice
Photograph	JPEG or WebP	50–90% vs PNG
Logo / icon	SVG	90%+ vs PNG
Screenshot / diagram	PNG or WebP	N/A
Semi-transparent image	PNG or WebP	N/A
All modern browsers	WebP	25–35% vs JPEG

The biggest mistake: Saving photographs as PNG. A 2MB JPEG photograph saved as PNG becomes 8–15MB. Convert photographs to JPEG.

2. Adjust compression quality

For JPEG: quality 75–85 is usually indistinguishable from quality 95, at 2–4× smaller file size.

Original JPEG: 4MB (quality 95)
Quality 85:    1.2MB (70% smaller — often imperceptible)
Quality 75:    800KB (80% smaller — acceptable for most web use)
Quality 60:    500KB (87.5% smaller — slight artifacts visible)

For PNG: use lossless compression at maximum level (no quality loss) plus quantization (reduces color depth, small quality impact):

• Standard PNG compression: saves 5–15%
• PNG quantization (pngquant): saves 40–80%

3. Resize to display dimensions

An image displayed at 800×600px that’s stored at 4000×3000px is 25× larger than needed. The browser downloads the full 4000×3000 version and scales it down — wasted bandwidth.

Rule: Store images at the largest size they’ll actually be displayed at, or use responsive images to serve different sizes.

Checking your images with browser DevTools

1. Open DevTools (F12 or Ctrl+Shift+I)
2. Go to Network tab → filter for Img
3. Reload the page
4. Find large images in the list
5. Check: the “Size” column is actual download size; “Transferred” includes cache

Or use Lighthouse (DevTools → Lighthouse → Mobile → Analyze):

• “Properly size images” — lists images larger than needed for display
• “Efficiently encode images” — lists images that would be smaller with better compression
• “Serve images in next-gen formats” — suggests WebP conversion

Target file sizes by context

Context	Target size
Blog post hero image	100–200KB
Product listing thumbnail	15–30KB
Product detail image	80–150KB
Background/banner image	150–300KB
Avatar/profile photo	10–30KB
OG/social share image	80–150KB
Logo	5–20KB (SVG preferred)

These are rough targets. Measure actual impact with a Lighthouse audit.

Tools and workflows

Browser-based (no installation)

The Image Compressor processes images locally in your browser:

1. Upload the image
2. Adjust quality slider
3. Compare preview to original
4. Download

Best for: one-off compression, checking before adding to a project.

Command-line tools

JPEG (ImageMagick):

# Single file:
convert input.jpg -quality 80 -interlace Plane output.jpg

# Batch:
mogrify -quality 80 -path compressed/ *.jpg

PNG (pngquant + oxipng):

# Quantize (lossy):
pngquant --quality=65-80 --ext .png --force *.png

# Optimize (lossless):
oxipng -o 6 *.png

Convert to WebP (cwebp):

# Lossy WebP from JPEG:
cwebp -q 80 input.jpg -o output.webp

# Lossless WebP from PNG:
cwebp -lossless input.png -o output.webp

Build pipeline integration

Vite (via vite-imagetools):

// Add ?format=webp&quality=80 to image imports:
import heroImage from './hero.jpg?format=webp&quality=80'

Next.js (built-in Image component):

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={630} quality={80} />

Next.js automatically converts to WebP if supported, resizes for device, and lazy-loads.

Webpack (image-webpack-loader):

// webpack.config.js:
module.exports = {
  module: {
    rules: [{
      test: /\.(jpg|png)$/,
      use: ['file-loader', {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: { quality: 80 },
          pngquant: { quality: [0.65, 0.80] }
        }
      }]
    }]
  }
}

Sharp (Node.js — most flexible)

const sharp = require('sharp');
const path = require('path');
const fs = require('fs').promises;

async function optimizeImage(inputPath) {
  const ext = path.extname(inputPath).toLowerCase();
  const outputDir = path.join(path.dirname(inputPath), 'optimized');
  await fs.mkdir(outputDir, { recursive: true });
  
  const filename = path.basename(inputPath, ext);
  const processor = sharp(inputPath);
  
  // Generate WebP + original format
  await Promise.all([
    processor.clone().webp({ quality: 80 }).toFile(
      path.join(outputDir, `${filename}.webp`)
    ),
    ext === '.jpg' || ext === '.jpeg'
      ? processor.clone().jpeg({ quality: 80, progressive: true }).toFile(
          path.join(outputDir, `${filename}.jpg`)
        )
      : processor.clone().png({ compressionLevel: 9 }).toFile(
          path.join(outputDir, `${filename}.png`)
        )
  ]);
}

Responsive images for further savings

Different screen sizes need different image sizes:

<img 
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 400px) 400px,
    (max-width: 800px) 800px,
    1600px
  "
  alt="Hero image"
>

The browser downloads only the appropriate size for the current viewport. A mobile user on a 400px screen downloads the 400px image (likely 40–80KB) instead of the 1600px image (300–500KB) — a 4–6× saving on mobile.

Related tools

• Image Compressor — compress images in your browser
• Image Compression Guide — formats and algorithms
• Compress JPEG — JPEG-specific compression settings