How to choose formats, quality settings, and resizing strategies to cut image weight for web and email without hurting visual quality.

Shrink Your Images Without Losing Quality: WebP/AVIF vs JPEG/PNG

Audience: Developers, content managers, marketers
Goal: Pick the right format, quality, and resizing settings to reduce image size while keeping visuals crisp.

The core trade-offs

Images dominate page weight. The right format and modest resizing can cut 50–90% of bytes without visible loss. Choose lossy vs lossless based on content type (photo vs UI/screenshot) and target channel (web, email, print).

Format cheat sheet

• JPEG: Best for photos; wide support; lossy only. Use progressive + quality ~70–85 for web.
• PNG: Best for UI, text, line art, transparency; supports lossless. Optimize palette for further savings.
• WebP: Great balance of size/quality for web; supports lossy and lossless + alpha; broad modern support.
• AVIF: Newer, often 20–40% smaller than WebP at similar quality; supports alpha; needs modern browser support.

Quality settings (practical starting points)

• JPEG: 70–80 for general web use; 85–90 for hero images; below 60 risks visible artifacts.
• WebP (lossy): 70–80 is a sweet spot for photos; try lossless for UI/graphics.
• AVIF: Quality sliders vary by encoder; start midrange and visually compare. Expect smaller files than WebP.
• PNG: Use lossless but optimize palette; consider converting to WebP lossless for better size.

Resize first, then compress

• Match dimensions to delivery: if you display at 1280px max, resize down from 4000px before compressing.
• Create multiple sizes (e.g., 400/800/1280/1920) for responsive srcset; serve the smallest that fits.
• For email, keep dimensions modest (e.g., 1200px max width) and sizes small (under ~200–300 KB if possible).

Metadata and privacy

• Strip EXIF/GPS for public sharing to remove location/device info.
• Keep color profiles if color fidelity is critical; otherwise strip for a few extra bytes saved.

Examples (typical results)

• Photo (4000px → 1600px): JPEG q80: ~75% reduction; WebP q75: ~82% reduction; AVIF mid-quality: ~88% reduction vs original.
• Screenshot with text: PNG optimized: 30–50% reduction; WebP lossless: often smaller than optimized PNG; AVIF lossless can be smaller still but check support.

Workflow tips

• Batch process with consistent presets (e.g., “Web: 1600px, WebP q78, strip EXIF”).
• Use side-by-side previews to judge artifacts on edges, text, and gradients.
• Prefer WebP/AVIF for modern browsers; keep JPEG/PNG fallbacks only if your audience needs them.
• Use progressive JPEG for slightly better perceived load; ensure CDN caching is set (long max-age with fingerprinted filenames).

When to pick which

• Photos, general web: WebP q70–80 or AVIF mid-quality; fallback JPEG if needed.
• UI, transparency, logos: PNG optimized or WebP lossless; AVIF lossless if supported.
• Email: JPEG q75–85 or WebP (check client support); keep sizes lean.
• Archival/print: Keep higher quality; avoid over-compressing originals.

Where your tools fit

• Image Compressor: Choose lossy/lossless, quality sliders, resize, strip metadata; export JPEG/PNG/WebP/AVIF.
• Image Resizer & format converters (JPG↔PNG↔WEBP): Resize first, then convert/compress.
• Image to Base64: For embedding small assets; use sparingly to avoid bloating HTML/CSS.

Final checklist

• Resize to target dimensions before compressing.
• Pick format by content type (photo vs UI) and audience support.
• Use WebP/AVIF for best size; keep minimal fallbacks.
• Strip EXIF/GPS for privacy unless needed.
• Test visually on edges, text, gradients; iterate quality a few points if needed.