← Back to Blog

How to Optimize Images for the Web Without Losing Quality

Smaller images mean faster pages. Here's how to choose the right format, the right quality level, and automate everything so you never think about it again.

Why image optimization matters

Images account for the majority of bytes on most web pages. A single unoptimized PNG screenshot can be 5-10MB. Multiply that by a dozen images and your page takes forever to load on mobile. Google uses page speed as a ranking factor. Your visitors bounce after 3 seconds.

The goal: reduce file size dramatically while keeping visual quality indistinguishable from the original.

Choosing the right format

WebP: the default choice

WebP offers 25-35% smaller files than JPEG at equivalent quality, supports transparency (unlike JPEG), and has universal browser support in 2026. If you're not sure which format to use, WebP is the answer.

AVIF: the new frontier

AVIF compresses even better than WebP (roughly 20% smaller) but encoding is slower and browser support, while growing, isn't quite universal yet. Use AVIF if you can serve WebP as a fallback.

JPEG: the reliable fallback

Still the most compatible format. Use JPEG when you need maximum compatibility or when serving to older systems.

PNG: only when you need it

PNG is lossless, which means huge file sizes. Only use it for images where every pixel matters: screenshots with text, diagrams, icons with transparency where WebP isn't an option.

Quality settings that actually matter

The biggest optimization win isn't the format. It's the quality setting. Most images look identical to the human eye at quality 75-85, but the file size difference between quality 100 and quality 80 can be 3-5x.

ConvX's quality slider maps 0-100 to the appropriate codec setting automatically. Quality 80 means the same perceptual thing whether you're encoding WebP, JPEG, or AVIF.

Strip metadata

Photos from cameras and phones carry EXIF metadata: GPS location, camera model, shutter speed, timestamps. This can add 10-50KB per image and may contain information you don't want to publish. The ConvX web-image preset strips metadata automatically.

Automating image optimization

One-off batch conversion

convx convert "./images/*.png" --preset web-image -j 4 -d ./optimized

Converts all PNGs to WebP at quality 80 with metadata stripped, using 4 parallel jobs.

Watch mode for continuous optimization

convx watch ./uploads --to webp -q 80 --filter "*.png,*.jpg"

Every new image dropped into the uploads folder gets optimized automatically.

AI-powered optimization

You: "Optimize all images in my blog assets folder for the web"

Claude (via MCP): batch_convert({
  input_paths: ["./assets/blog/*.png", "./assets/blog/*.jpg"],
  output_format: "webp",
  quality: 80
})

Real-world results

A typical photography blog page with 15 unoptimized PNGs:

• Before: 47MB total, 8.2s load time on 4G
• After (WebP, quality 80): 6.3MB total, 1.4s load time on 4G
• Savings: 87% smaller, 6x faster