Sirv Content Hub
Blog
February 16, 2026

How to Reduce Image File Size Without Losing Quality

Practical techniques to compress images without visible quality loss. Covers JPEG, PNG, WebP, AVIF settings, tools like Sharp and Squoosh, and CDN automation.

S
Sirv Team

Images make up roughly half of a typical web page’s total weight. A single unoptimized product photo can easily hit 2-5 MB. Multiply that across a page with a dozen images and you’re asking visitors to download 20-50 MB just to see your content.

The good news? You can cut image file sizes by 50-80% with zero visible quality loss if you pick the right techniques.

Why Image File Size Matters

The stakes are real:

  • Page speed: Images are the single largest contributor to slow load times on most websites. A 1-second delay in page load can reduce conversions by 7%.
  • Bandwidth costs: Serving millions of page views? Every kilobyte adds up. Dropping average image size from 500 KB to 150 KB can slash your monthly bandwidth bill.
  • Mobile experience: Over half of web traffic comes from mobile devices, many on throttled or metered connections. Heavy images don’t just load slowly. They cost your visitors real money.
  • Core Web Vitals: Google’s LCP (Largest Contentful Paint) metric is directly affected by how fast your hero image loads. Oversized images are the number one cause of poor LCP scores.

Lossy vs Lossless Compression

All image compression falls into two categories. Understanding the difference matters.

Lossless Compression

Lossless compression reduces file size by finding more efficient ways to encode the same pixel data. No information is thrown away. The decompressed image is bit-for-bit identical to the original.

When to use it: Screenshots with text, logos, technical diagrams, anything where pixel-perfect accuracy matters.

Typical savings: 10-30% file size reduction.

Lossy Compression

Lossy compression gets much bigger file size reductions by selectively throwing away data the human eye is least likely to notice. Once applied, you can’t recover the original data.

When to use it: Photographs, product images, hero banners, lifestyle shots. Basically any continuous-tone image.

Typical savings: 50-80% file size reduction at acceptable quality levels.

Here’s the thing: the human visual system is remarkably tolerant of lossy compression. A JPEG compressed at quality 80 is virtually indistinguishable from quality 100 to most viewers, yet the file is often 3-5x smaller.

Best Compression Settings by Format

JPEG

JPEG remains the workhorse of web photography. For most images, a quality setting between 75-85 hits the sweet spot between file size and visual quality.

QualityUse CaseTypical Size (1920px wide photo)
90-100Print-ready, archival800 KB - 2 MB
80-85Hero images, product detail200 - 400 KB
70-80Thumbnails, gallery grids100 - 200 KB
Below 60Not recommendedVisible artifacts

Pro tip: Enable progressive JPEG encoding. Progressive JPEGs render a blurry preview first and sharpen incrementally, which feels faster to users and often compresses slightly smaller than baseline JPEGs.

PNG

PNG is lossless by nature, so “compression” here means optimizing the encoding without changing pixels. Use PNG only when you need transparency or pixel-perfect rendering (logos, icons, screenshots).

To reduce PNG file size:

  • Use indexed color (PNG-8) instead of truecolor (PNG-24) when your image has fewer than 256 colors
  • Strip unnecessary metadata (EXIF, ICC profiles) if not needed
  • Tools like pngquant can apply lossy quantization to PNGs, reducing 24-bit images to 8-bit with dithering, often achieving 60-80% savings with minimal visible change

WebP

WebP supports both lossy and lossless compression and typically achieves 25-35% smaller files than equivalent JPEG or PNG. Browser support is now universal across Chrome, Firefox, Safari, and Edge.

  • Lossy WebP quality 75-80 matches JPEG quality 85 visually, at a much smaller file size
  • Lossless WebP beats PNG by 20-30% on average
  • WebP also supports transparency (replacing the need for PNG in many cases) and animation (replacing GIF)

AVIF

AVIF is the newest contender, based on the AV1 video codec. It offers the best compression ratios available today: roughly 50% smaller than JPEG at equivalent quality, and 20% smaller than WebP.

  • AVIF quality 60-70 matches JPEG quality 85 visually
  • Encoding is slower than JPEG or WebP, making it less suited for on-the-fly generation without caching
  • Browser support is strong in Chrome, Firefox, and Safari 16+
  • Ideal for sites that can pre-generate images or use a CDN with AVIF caching

Tools for Image Compression

Command Line: Sharp (Node.js)

Sharp is the go-to image processing library for Node.js. It’s built on libvips and handles JPEG, PNG, WebP, AVIF, and TIFF with excellent performance.

Here’s a practical batch compression script:

import sharp from 'sharp';
import { readdir } from 'fs/promises';
import path from 'path';

const INPUT_DIR = './images/originals';
const OUTPUT_DIR = './images/optimized';

async function compressImages() {
  const files = await readdir(INPUT_DIR);
  const imageFiles = files.filter(f =>
    /\.(jpe?g|png|webp|avif)$/i.test(f)
  );

  for (const file of imageFiles) {
    const inputPath = path.join(INPUT_DIR, file);
    const name = path.parse(file).name;

    // Generate optimized JPEG
    await sharp(inputPath)
      .resize(1920, null, { withoutEnlargement: true })
      .jpeg({ quality: 80, progressive: true })
      .toFile(path.join(OUTPUT_DIR, `${name}.jpg`));

    // Generate WebP variant
    await sharp(inputPath)
      .resize(1920, null, { withoutEnlargement: true })
      .webp({ quality: 78 })
      .toFile(path.join(OUTPUT_DIR, `${name}.webp`));

    // Generate AVIF variant
    await sharp(inputPath)
      .resize(1920, null, { withoutEnlargement: true })
      .avif({ quality: 65 })
      .toFile(path.join(OUTPUT_DIR, `${name}.avif`));

    const original = (await sharp(inputPath).metadata()).size;
    const optimized = (await sharp(
      path.join(OUTPUT_DIR, `${name}.webp`)
    ).metadata()).size;

    console.log(
      `${file}: ${(original / 1024).toFixed(0)} KB → ` +
      `${(optimized / 1024).toFixed(0)} KB WebP ` +
      `(${((1 - optimized / original) * 100).toFixed(0)}% smaller)`
    );
  }
}

compressImages();

Run it with node compress.mjs after installing Sharp (npm install sharp). This script processes each image into three formats, caps the width at 1920px, and logs the file size savings.

Command Line: ImageMagick

ImageMagick is the classic Swiss army knife for image processing. Available on pretty much every platform:

# Compress JPEG to quality 82 and strip metadata
magick input.jpg -quality 82 -strip -interlace Plane output.jpg

# Batch convert an entire directory to WebP
for f in *.jpg; do
  magick "$f" -quality 78 "${f%.jpg}.webp"
done

# Resize and compress in one pass
magick input.jpg -resize 1920x -quality 80 -strip output.jpg

Online Tools

Need to optimize a few images quickly without installing anything?

  • Squoosh (squoosh.app): Google’s open-source tool with real-time visual comparison. Great for finding the optimal quality setting for a specific image.
  • TinyPNG (tinypng.com): Batch-processes PNG and JPEG files with smart lossy compression. The API is handy for CI/CD integration.
  • SVGOMG (jakearchibald.github.io/svgomg): For optimizing SVG files specifically, stripping editor metadata and simplifying paths.

Build-Time vs CDN-Based Optimization

Two fundamentally different approaches to automating image compression. Each has clear trade-offs.

Build-Time Optimization

Process images during your build step using tools like Sharp, imagemin, or framework-specific plugins (e.g., next/image in Next.js, astro:assets in Astro).

Pros:

  • No runtime cost. Images are optimized once
  • Full control over quality settings per image
  • Works with static hosting (no server required)

Cons:

  • You must generate every size and format variant at build time
  • Adding a new breakpoint means rebuilding all images
  • Build times grow linearly with catalog size
  • You’re responsible for serving the right format via <picture> tags or Accept header negotiation

CDN-Based Optimization

An image CDN processes and caches images on demand. You upload a single high-resolution original, and the CDN generates optimized variants in real time based on URL parameters or automatic detection.

Pros:

  • Upload once, serve everywhere. The CDN handles all sizing and format conversion
  • New breakpoints or formats require zero code changes
  • Scales to any catalog size without affecting build times
  • Automatic content negotiation (WebP for Chrome, AVIF where supported, JPEG as fallback)

Cons:

  • Adds a service dependency
  • First request for each variant has slightly higher latency (subsequent requests are cached)

For e-commerce stores with large or frequently changing catalogs, CDN-based optimization is almost always the better pick. The operational simplicity far outweighs the small latency cost on cache misses.

How Sirv Handles This Automatically

Sirv compresses and converts images on the fly using smart defaults tuned for the web. When a browser requests an image, Sirv automatically:

  1. Detects browser format support and serves AVIF, WebP, or optimized JPEG accordingly
  2. Applies optimal compression without you specifying quality parameters (though you can override them via URL if needed)
  3. Resizes dynamically based on URL parameters like ?w=800&h=600
  4. Strips metadata (EXIF, ICC profiles) that adds weight without visual benefit
  5. Caches at edge locations worldwide, so repeated requests are served in under a millisecond

A product image URL might look like:

https://demo.sirv.com/products/jacket.jpg?w=800&q=80

But in most cases you don’t even need the quality parameter. Sirv’s automatic optimization already picks the right balance. The same image served without any parameters will still be compressed and format-converted based on the requesting browser.

Real-World File Size Savings

Want to see actual numbers? Here’s what typical optimization looks like for a standard 2000x1500 product photo:

FormatQualityFile SizeSavings vs Original
Original JPEG (uncompressed)1001.8 MB-
JPEG (quality 82)82380 KB79%
WebP (quality 78)78260 KB86%
AVIF (quality 65)65170 KB91%

That’s a 10x reduction from the original to AVIF, with no perceptible quality loss in a product listing or gallery view.

Your Next Move

Reducing image file size is the single highest-impact performance fix for most websites. The approach is straightforward:

  1. Pick the right format: Serve AVIF or WebP where supported, JPEG as fallback
  2. Set quality appropriately: 75-85 for JPEG, 75-80 for WebP, 60-70 for AVIF
  3. Resize to actual display dimensions: Never serve a 4000px image in a 400px container
  4. Automate it: Whether at build time or via a CDN, manual optimization doesn’t scale

If you want to skip the tooling setup entirely, Sirv handles all of this automatically. Upload your originals and the CDN takes care of format conversion, compression, and responsive delivery. Fastest path from unoptimized images to measurably faster pages.

Ready to optimize your images?

Sirv automatically optimizes, resizes, and converts your images. Try it free.

Start Free Trial