Image Compression Guide — Reduce File Size Without Losing Quality

A 4MB product photo slows your page load by 3–4 seconds on a mobile connection. A properly compressed version of the same image can weigh 200KB and look identical on screen. Image compression is the highest-return optimization you can make to most web pages.

Use the Image Compressor on this site to compress JPG, PNG, and WebP files directly in the browser — no upload to a server, files stay on your device.

How image compression works

Lossless compression

Lossless compression reduces file size by eliminating redundant data without discarding any image information. The original image can be perfectly reconstructed from the compressed file.

How it works:

• Run-length encoding (RLE): repeated values are stored as (value, count). A row of 500 white pixels is stored as “white, 500” instead of 500 individual values.
• Dictionary encoding (LZ77/LZ78): patterns that repeat are replaced with references to a dictionary entry.
• Huffman coding: frequently occurring values get shorter bit codes; rare values get longer codes. The most common pixel value needs fewer bits than the rarest.
• Deflate: combination of LZ77 and Huffman coding, used in PNG compression.

Lossless compression typically achieves 10–50% size reduction, depending on image content. Images with large areas of solid color compress dramatically (a blue sky compresses far more than a photo of leaves).

Best for: PNG, GIF, lossless WebP, TIFF. Use when pixel-perfect reproduction is required: screenshots, UI mockups, icons, images with text, logos.

Lossy compression

Lossy compression discards image data that human perception doesn’t easily detect. The compression is irreversible — the original cannot be reconstructed from the compressed file.

How JPEG lossy compression works:

1. Color space conversion: converts RGB to YCbCr (luminance + two chrominance channels). Humans are more sensitive to brightness (luminance) than color (chrominance), so chrominance is subsampled.
2. Block division: the image is divided into 8×8 pixel blocks.
3. Discrete Cosine Transform (DCT): each block is transformed into frequency components. Low frequencies represent broad color areas; high frequencies represent fine detail and edges.
4. Quantization: frequency components are divided by a quantization table. At high compression, high-frequency components (fine details) round to zero and are discarded. This is where quality is lost.
5. Entropy coding: the quantized values are compressed with Huffman coding.

The “quality” slider in JPEG encoders controls how aggressive the quantization table is. Quality 95 = minimal quantization (large file, high quality). Quality 60 = aggressive quantization (small file, visible artifacts at edges).

Best for: photographs, complex imagery with many colors, images without text or sharp edges.

JPEG vs PNG vs WebP vs AVIF

JPEG (JPG)

• Compression: lossy
• Color depth: 8-bit per channel (16.7 million colors)
• Transparency: not supported
• Best for: photographs, images with gradients
• Avoid for: images with text, sharp edges, logos, screenshots
• Typical compression: 70–95% size reduction from uncompressed

At quality 80, a JPEG typically looks near-identical to the original for photographic content while being 10–20× smaller than a lossless format.

PNG

• Compression: lossless (Deflate)
• Color depth: 8-bit, 16-bit, or 24-bit; supports alpha transparency
• Transparency: full alpha channel support
• Best for: screenshots, logos, icons, UI elements, images with text
• Avoid for: large photographs (file sizes will be much larger than JPEG)
• Typical compression: 10–50% reduction from uncompressed

PNG files can be further compressed with tools like OptiPNG, pngquant (lossy PNG optimization), or TinyPNG without converting format.

WebP

Developed by Google (2010). Supports both lossy and lossless compression, and alpha transparency.

• Lossy WebP: 25–35% smaller than JPEG at equivalent visual quality
• Lossless WebP: 26% smaller than PNG on average
• Browser support: Chrome, Firefox, Edge, Safari 14+ — modern browsers only

WebP is the preferred format for new web projects targeting modern browsers. For compatibility with older iOS (<14) and some social media embedding, you may still need JPEG/PNG fallbacks.

<!-- Use WebP with JPEG fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

AVIF

AV1 Image File Format (AVIF) — the newest major image format, derived from the AV1 video codec.

• 50% smaller than JPEG at similar visual quality
• Better at high compression than WebP
• Browser support: Chrome 85+, Firefox 93+, Safari 16+
• Slower encoding than WebP (important for build pipeline performance)

AVIF is the future, but encoding speed and slightly lower browser support make WebP the practical choice for most projects in 2026.

SVG

For icons, logos, and simple illustrations, SVG is better than any raster format:

• Resolution-independent (looks sharp at any size)
• Often smaller than PNG for the same icon
• Fully supported in all modern browsers
• Can be animated and styled with CSS

Use SVG for: logos, icons, charts, diagrams, illustrations with few colors. Use raster formats for: photographs and complex imagery.

Compression settings by use case

Hero images (above the fold)

Priority: perceived performance (LCP - Largest Contentful Paint).

• Format: WebP (with JPEG fallback for older browsers)
• Compression: lossy WebP quality 75–85
• Size: resize to maximum display dimensions before compressing. If the image displays at 1200×600px, don’t serve a 3000×1500px original.
• Resulting file size target: 100–200KB

Product images (e-commerce)

Priority: visual quality (users making purchase decisions need to see detail).

• Format: WebP quality 80–90, or JPEG quality 80–90
• Include srcset for different screen densities: 1x and 2x versions
• Target: 100–300KB per image

Thumbnails and card images

Priority: fast loading, many images on one page.

• Format: WebP quality 70–80
• Resize to exact display dimensions (e.g., 400×300 for a 400×300 card)
• Target: 20–50KB each

Background images (decorative)

Priority: performance, quality secondary.

• Format: WebP quality 60–75 (or JPEG if compatibility needed)
• Target: 50–150KB

Icons and UI elements

Priority: sharp edges, small file size.

• Format: SVG preferred, PNG at actual display size if SVG not possible
• PNG: lossless, exact pixel dimensions
• Target: under 10KB per icon

Using the Image Compressor

The Image Compressor runs entirely client-side:

1. Upload your JPG, PNG, or WebP file (drag and drop or click to select)
2. Adjust the quality slider (default: 80 — good starting point)
3. See the preview comparison and file size before and after
4. Download the compressed file

Processing happens in your browser using the Canvas API — the image is never sent to a server. This matters for confidential product images, unreleased designs, or client photos.

Compression in build pipelines

For web projects, integrate image compression into the build process rather than manually compressing each image:

Sharp (Node.js)

const sharp = require('sharp');

await sharp('input.jpg')
  .resize(1200)          // resize to max 1200px wide
  .webp({ quality: 82 }) // convert to WebP
  .toFile('output.webp');

// Batch compress all JPGs:
const { glob } = require('glob');
const images = await glob('src/images/**/*.jpg');
for (const img of images) {
  await sharp(img)
    .webp({ quality: 80 })
    .toFile(img.replace('.jpg', '.webp'));
}

Vite / Astro (vite-imagetools)

// vite.config.js
import { defineConfig } from 'vite';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
  plugins: [imagetools()],
});

// In your component:
import heroImage from './hero.jpg?w=1200&format=webp&quality=82';

imagemin (general CLI)

npx imagemin src/images/* --out-dir=dist/images --plugin=imagemin-webp
npx imagemin src/images/*.png --out-dir=dist/images --plugin=imagemin-pngquant

Common compression mistakes

Re-compressing an already-compressed JPEG. Each lossy compression pass degrades quality further. Always start from the original uncompressed or highest-quality source. If you only have a compressed JPEG, don’t compress it again.

Wrong format for the image type. Compressing a screenshot as JPEG introduces block artifacts around text. Use PNG or lossless WebP for screenshots.

Not resizing before compressing. Compressing a 4000×3000px image to 80% quality is still a large file. Resize to the maximum display dimensions first, then compress. A 1200px-wide image at quality 80 is far smaller than a 4000px image at quality 50.

Forgetting srcset and sizes. On a 375px mobile screen, loading a 1200px image wastes bandwidth even if it’s well-compressed. Use responsive images:

<img 
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="image-1200.webp"
  alt="Product name"
>

Measuring the impact

Use Google PageSpeed Insights or Lighthouse to measure your page’s image optimization score. Look for:

• “Serve images in next-gen formats” — suggests converting to WebP/AVIF
• “Properly size images” — serving oversized images
• “Efficiently encode images” — JPEG quality too high for the content

Each of these recommendations maps directly to the compression decisions above.

Related tools

• Image Compressor — compress JPG, PNG, and WebP in the browser
• Favicon Generator — create favicons from image files
• QR Code Generator — generate QR codes as SVG or PNG