The Ultimate Guide to Image Compression Tools

Images are the heaviest resources on most web pages, averaging 50-70% of total page weight. Choosing the right compression tool and format can cut image sizes by 80% without visible quality loss.

Image Format Comparison

Format	Best For	Compression	Browser Support
AVIF	Photos, illustrations	Best (50-70% smaller than JPEG)	93%+
WebP	Photos, transparency	Great (25-35% smaller than JPEG)	97%+
JPEG	Photos (fallback)	Good	100%
PNG	Screenshots, transparency	Lossless	100%
SVG	Icons, logos, illustrations	Vector (tiny)	100%

Recommendation: Use AVIF with WebP fallback for photos. SVG for icons. PNG only for screenshots where text clarity matters.

Compression Tools Compared

Online Tools

Squoosh (squoosh.app)

• Built by Google Chrome team
• Side-by-side preview with quality slider
• Supports AVIF, WebP, JPEG, PNG, and more
• Best for: one-off optimizations, testing quality levels

TinyPNG / TinyJPG

• Simple drag-and-drop interface
• API available for automation
• Free tier: 500 images/month
• Best for: quick batch compression

Cloudinary

• Cloud-based image CDN with auto-optimization
• Automatic format negotiation (serves AVIF to supported browsers)
• Responsive image generation
• Best for: production image pipelines at scale

CLI Tools

sharp (Node.js)

npm install sharp

const sharp = require('sharp');

await sharp('input.jpg')
  .resize(1200, 800, { fit: 'inside' })
  .avif({ quality: 65 })
  .toFile('output.avif');

Best for: build pipelines, batch processing, server-side conversion.

cwebp (WebP)

cwebp -q 75 input.png -o output.webp

avifenc (AVIF)

avifenc --min 20 --max 30 input.png output.avif

ImageMagick

convert input.jpg -quality 75 -resize 1200x800 output.jpg

Build Pipeline Integration

Next.js Image Component

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={1200}
  height={800}
  quality={75}
  // Automatically serves AVIF/WebP based on browser support
/>

Vite Plugin

npm install vite-plugin-image-optimizer

Webpack

npm install image-minimizer-webpack-plugin

Quality Settings Guide

Not all images need the same quality level:

Image Type	Quality	Why
Hero / above-fold	75-80	Visible, but compression artifacts hidden by size
Thumbnails	60-70	Small display size hides artifacts
Background images	50-65	Often overlaid with text/gradients
Product photos	75-85	Detail matters for purchase decisions
Blog illustrations	65-75	Good enough for editorial use

Responsive Images

Serving a 3000px image to a 375px phone screen wastes bandwidth. Use responsive images:

<img
  srcset="
    /photo-400.avif 400w,
    /photo-800.avif 800w,
    /photo-1200.avif 1200w,
    /photo-1600.avif 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  src="/photo-800.avif"
  alt="Description"
  width="1600" height="1067"
  loading="lazy"
/>

The browser selects the smallest image that fits the viewport.

Automation Strategy

1. Design phase: Export at 2x resolution, original quality
2. Build step: Automatically compress to AVIF + WebP + JPEG fallback
3. Runtime: Use <picture> or Next.js Image for format negotiation
4. Monitoring: Track total image weight per page

Monitor Image Performance

Image optimization is not a one-time task. New images get added constantly. BadPageSpeed tracks your page weight so oversized images get caught early.

Monitor your page performance →