How to Compress Images for Web: Complete Guide

Updated June 2026 · 5 min read

Images make up over 60% of the average web page's total weight. Compressing them is the single most impactful thing you can do to improve page speed, Core Web Vitals, and SEO rankings. Here's exactly how to do it — without ruining your images.

Step 1: Pick the Right Format

• Photos: WebP (best) or JPG at 85% quality. Avoid PNG for photos — it produces files 5-10x larger.
• Graphics/logos: WebP lossless or PNG-8 (256 colors). Never use JPG for graphics — the compression artifacts around sharp edges are obvious.
• Transparency needed: WebP (lossy+alpha) for smallest files; PNG-24 for maximum compatibility.

Step 2: Resize Before You Compress

A 4000x3000 photo displayed at 800x600 is wasting 95% of its pixels. Always resize images to their actual display dimensions before compressing. Every pixel you eliminate is a pixel you don't have to compress.

Step 3: Strip Metadata

EXIF data, GPS coordinates, camera settings, color profiles, and thumbnail previews add 5-50KB per image. Strip everything except the ICC color profile (for accurate colors across displays).

Step 4: Compress with the Right Tool

• JPG: mozjpeg at quality 75-85 — best compression-to-quality ratio
• PNG: pngquant + optipng — converts to PNG-8 with palette optimization
• WebP: Our browser-based converter or cwebp at quality 80-90
• AVIF: avifenc at quality 50-70 (AVIF quality scale differs from WebP)

Step 5: Serve Responsive Images

Use the <picture> element to serve different formats and sizes to different browsers and screen sizes. Modern browsers get WebP/AVIF; legacy browsers fall back to JPG/PNG.

For bulk conversion to web-optimized formats, use our free batch image converter — it handles WebP, PNG, JPG, and GIF in a single workflow, entirely in your browser.

Written by Alex Chen — Frontend Engineer. building web apps for 10+ years. Built WebP2PNG when tired of converters that upload your files. More about me →