Reduce Image Size Online — Compress Photos Without Visible Quality Loss

Most web images are 5–20× larger than they need to be. A camera produces a 5MB JPEG at maximum resolution; a web page displays it at 600×400px. Serving the camera-original is waste — you’re transmitting megabytes of resolution no browser will ever use.

Use the Image Compressor to reduce image size directly in the browser without uploading files to a server.

The two ways to reduce image size

Method 1: Resize (reduce dimensions)

If an image displays at 800×600px and you’re serving a 3200×2400px image, you’re serving 16× more pixels than the browser will display. Resizing to 800×600 before compression removes 93.75% of the pixels and produces a dramatically smaller file.

Rule: Resize to the maximum display dimensions before compressing. If the same image appears at different sizes on different screen sizes, create multiple resized versions and use srcset.

For 2× (Retina/HiDPI) screens: serve an image at 2× the CSS display dimensions. A 400px-wide CSS element gets a 800px image. The browser downscales it to 400px at 2× density for crisp display.

Method 2: Compress (reduce quality or apply better algorithm)

Without resizing, apply compression to reduce the file size. For JPEG, this means reducing quality (lossy). For PNG, this means applying better lossless compression or converting to a more efficient format.

In practice, do both: resize first (if the image is oversized), then compress.

Target file sizes for web

Context	Target size	Max acceptable
Hero image (above fold)	100–200KB	400KB
Product / gallery image	50–200KB	300KB
Card thumbnail	20–50KB	100KB
Background image	100–300KB	500KB
Blog inline image	50–150KB	250KB
Favicon	1–5KB	—

Anything above 500KB for a single image will negatively affect Largest Contentful Paint (LCP) on mobile connections.

JPEG quality settings: what each level looks like

JPEG quality is usually expressed as a scale from 0–100 (or 0–12 in some encoders). Here’s what the quality levels mean in practice:

Quality	File size vs original	Visual result	Use case
95–100	30–50% reduction	Indistinguishable from original	Source file archival
85–90	50–70% reduction	Excellent — nearly indistinguishable	High-quality print/digital
75–80	70–80% reduction	Very good — subtle artifacts in gradients	Most web photography
65–70	80–85% reduction	Good — minor artifacts visible up close	Thumbnails, mobile-first
50–60	85–90% reduction	Visible artifacts	Low-bandwidth scenarios
Below 50	90%+ reduction	Noticeable degradation	Not recommended for web

Recommendation: start at quality 80 for JPEG web images. Compare the result to the original at actual display size (not zoomed in). If you can’t tell the difference at display size, the compression is good enough.

PNG size reduction techniques

PNG is lossless, so true compression quality is binary — the image data is preserved. However, PNG file size can still be reduced substantially through:

1. Reducing color depth

If your image has fewer than 256 distinct colors (many icons, logos, illustrations do), converting from 24-bit PNG to 8-bit palette PNG (PNG-8) reduces file size by 60–70%.

Tools: pngquant (lossy palette reduction with excellent quality at ≤256 colors).

pngquant --quality=80-90 --output output.png input.png

2. Removing metadata

PNG files often contain metadata chunks: creation date, author, software information, color profiles. optipng or oxipng strip unnecessary metadata while keeping image data intact.

optipng -o5 image.png       # Optimize with 5 passes
oxipng -o 4 image.png       # Rust-based, faster than optipng

3. Converting to WebP

A lossless WebP is typically 26% smaller than an equivalent PNG. If browser compatibility allows (all modern browsers support WebP), convert PNG assets to lossless WebP.

cwebp -lossless -q 100 input.png -o output.webp

When to convert formats

Original format	Better format for web	Reason
JPEG photo	WebP (lossy)	25–35% smaller at same quality
PNG screenshot	PNG (stay) or lossless WebP	PNG needed for exact pixel accuracy
PNG icon/logo	SVG (if vector) or WebP	SVG is resolution-independent
PNG with <256 colors	PNG-8 (palette)	60–70% size reduction
GIF animation	WebP animation or MP4/WebM	Much smaller file sizes
TIFF	WebP or PNG	TIFF has no web use case
BMP	WebP or PNG	BMP is uncompressed; always convert

Responsive images for multiple screen sizes

A single image at the right resolution for desktop (1200px wide) is oversized for a 375px mobile screen. Responsive images let the browser choose the appropriate size:

<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: 1000px) 800px,
         1200px"
  alt="Description"
  loading="lazy"
>

With this markup:

• A 375px mobile device downloads photo-400.jpg (smallest needed)
• A 768px tablet downloads photo-800.jpg
• A 1920px desktop downloads photo-1200.jpg

This is the single highest-impact optimization for image-heavy pages — it prevents mobile users from downloading desktop-resolution images.

With WebP and fallback:

<picture>
  <source
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    type="image/webp"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  >
  <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: 1000px) 800px, 1200px"
    alt="Description"
    loading="lazy"
  >
</picture>

Lazy loading

The loading="lazy" attribute defers loading images that are below the fold until the user scrolls near them. This dramatically improves initial page load:

<img src="product.jpg" alt="Product" loading="lazy" width="600" height="400">

Important: always include width and height attributes when using loading="lazy". Without them, the browser doesn’t know the image dimensions until it loads, causing layout shift (CLS — Cumulative Layout Shift).

Only the first visible image (above the fold) should NOT have loading="lazy". That image is part of LCP and needs to load as fast as possible.

Batch compression workflow

For a website with many images, automate compression:

// Using Sharp in Node.js:
const sharp = require('sharp');
const { glob } = require('glob');
const path = require('path');
const fs = require('fs');

async function compressImages(inputDir, outputDir) {
  const images = await glob(`${inputDir}/**/*.{jpg,jpeg,png}`);
  
  for (const inputPath of images) {
    const relativePath = path.relative(inputDir, inputPath);
    const outputPath = path.join(outputDir, relativePath)
      .replace(/\.(jpg|jpeg|png)$/, '.webp');
    
    // Ensure output directory exists
    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
    
    await sharp(inputPath)
      .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 82 })
      .toFile(outputPath);
    
    const inputSize = fs.statSync(inputPath).size;
    const outputSize = fs.statSync(outputPath).size;
    const saving = ((1 - outputSize / inputSize) * 100).toFixed(1);
    console.log(`${relativePath}: ${(inputSize/1024).toFixed(0)}KB → ${(outputSize/1024).toFixed(0)}KB (-${saving}%)`);
  }
}

compressImages('./src/images', './dist/images');

Measuring image optimization impact

Google PageSpeed Insights: paste any URL and it will flag:

• Images larger than needed (“Properly size images”)
• Images not using WebP (“Serve images in next-gen formats”)
• Images with excessive quality (“Efficiently encode images”)

Lighthouse: run via Chrome DevTools (F12 → Lighthouse) for detailed image savings estimates.

Squoosh (squoosh.app): Google’s browser-based image compression tool with side-by-side comparison and multiple format support.

Related tools

• Image Compressor — compress images in the browser
• Favicon Generator — create favicons from images
• Color Picker — pick and convert colors for CSS