Large images are the number one reason websites load slowly. A single unoptimized photo can be 5-10 MB — that's more than most entire web pages should weigh. But compressing images doesn't have to mean blurry, pixelated results.
This guide explains how image compression works, when to use lossy vs lossless, which formats to choose, and how to reduce file sizes by up to 80% while keeping your images looking sharp.
How image compression works
Every digital image is a grid of pixels, and each pixel stores color data. Compression reduces file size by encoding this data more efficiently. There are two fundamental approaches:
- Lossless compression — reduces file size without discarding any data. The decompressed image is pixel-identical to the original. Think of it like a ZIP file for images. Typical savings: 10-30%.
- Lossy compression — selectively removes data that the human eye is least likely to notice. The image looks nearly identical but is technically different. Typical savings: 50-80%.
For most web images, lossy compression at 80-85% quality is the sweet spot — visually indistinguishable from the original but dramatically smaller.
Choosing the right format
The image format matters as much as the compression level. Here's when to use each:
JPEG — best for photographs
JPEG uses lossy compression optimized for continuous-tone images like photos. It handles gradients and color variations well but struggles with sharp edges, text, and flat colors. Use JPEG for hero images, product photos, and background images.
PNG — best for graphics with transparency
PNG uses lossless compression and supports transparency (alpha channel). It's ideal for logos, icons, screenshots, and any image with text or sharp edges. PNG files are larger than JPEGs for photos, but much sharper for graphics.
WebP — best for web performance
WebP supports both lossy and lossless compression and produces smaller files than JPEG and PNG at equivalent quality. It also supports transparency and animation. All modern browsers support WebP. If you're optimizing for the web, WebP is usually the best choice.
AVIF — best quality-to-size ratio
AVIF is the newest format, offering even better compression than WebP. Browser support is growing but not yet universal. Use it as a progressive enhancement alongside WebP or JPEG fallbacks.
Practical compression workflow
Here's a step-by-step workflow for compressing images for your website or project:
- Start with the right dimensions. Don't compress a 4000px image if it'll display at 800px. Resize first using an image resizer to match the display size (or 2x for retina screens).
- Choose the format. Photo? Use JPEG or WebP. Logo or screenshot? Use PNG or WebP. Need transparency? PNG or WebP. You can convert between formats with an image format converter.
- Compress. Run the image through an image compressor. Start at 80% quality and compare. If it looks good, try 75%. Find the lowest quality setting where the image still looks sharp.
- Compare before and after. Always check the compressed image at full size. Zoom in on areas with fine detail, text, or sharp edges. If you see artifacts (blocky patches or color banding), increase the quality slightly.
Batch processing
If you have dozens or hundreds of images, compressing them one by one isn't practical. Use a bulk image resizer to resize and process multiple images at once. This is especially useful for:
- E-commerce product catalogs
- Photo galleries and portfolios
- Blog post images
- Social media content batches
Common mistakes to avoid
- Compressing an already compressed image. Each round of lossy compression degrades quality further. Always compress from the original source file, not from a previously compressed version.
- Using JPEG for screenshots or text. JPEG compression creates visible artifacts around sharp edges and text. Use PNG for anything with text overlays.
- Ignoring dimensions. A 6000x4000 photo compressed to 200KB still takes time to decode in the browser. Resize to the actual display size first.
- Setting quality too low. Below 60% quality, JPEG artifacts become obvious — blurry halos around edges, blocky patches in gradients. Stay above 70% for anything user-facing.
Target file sizes
As a rough guide, here are reasonable file size targets for web images:
- Hero/banner images (full-width): 100-200 KB
- Content images (blog posts, articles): 50-100 KB
- Thumbnails (cards, grids): 15-40 KB
- Icons and logos: 5-15 KB (use SVG when possible)
These are guidelines, not hard rules. A complex photograph may need 200KB to look sharp, while a simple graphic might look great at 20KB. Always prioritize visual quality over hitting a specific number.
Tools to get started
All free, browser-based, no sign-up required:
- Image Compressor — compress JPEG, PNG, and WebP with adjustable quality
- Resize Image — resize to exact dimensions or percentage
- Image Format Converter — convert between JPEG, PNG, WebP, and more
- Bulk Image Resizer — process multiple images at once
Image compression is one of the easiest performance wins you can get. Resize, pick the right format, compress at 80%, and you'll typically cut 60-80% off your file sizes without anyone noticing the difference. Your users (and Google's Core Web Vitals) will thank you.