How to Compress Images for the Web
Step-by-step guide to optimizing images for faster websites. Learn which format to use, what quality settings to choose, and how to compress JPEG, PNG, and WebP images without visible quality loss.
Compress Images for Web in 3 Steps
Oversized images are the single most common cause of slow web pages. Compressing before upload can cut file sizes by 60–80% with no visible quality difference to users.
- Choose the right format: JPEG for photos, PNG for images with transparency or text, WebP for the best compression on both. Convert first if needed.
- Set quality level: For JPEG and WebP, 75–85% quality is the sweet spot — visually identical to the original but 50–70% smaller. Drop to 60–70% for thumbnails.
- Compress and download: Drop your images into the compressor, adjust quality, and download the optimized versions ready for upload.
Choosing the Right Image Format
- JPEG: Best for photographs and images with gradients. Lossy compression — each save slightly degrades quality. Use for hero images, product photos, and blog post images. Target: under 200 KB for full-width images, under 50 KB for thumbnails
- PNG: Best for logos, screenshots, illustrations, and images with sharp edges or transparency. Lossless — no quality loss on save. Larger than JPEG for photos but essential when transparency is needed
- WebP: Modern format supported by all current browsers. 25–35% smaller than JPEG at the same quality for photos, and supports transparency like PNG. Best choice for new web projects targeting current browsers
- AVIF: Even newer than WebP — 50% smaller than JPEG. Browser support still catching up (Chrome/Firefox yes, Safari partial). Consider for future-proofing
- SVG: For icons, logos, and illustrations — infinitely scalable with tiny file sizes. Not a raster format so can't replace photos
Target File Sizes for Common Web Uses
- Full-width hero image (1920px wide): Under 200 KB — use JPEG at 80% or WebP at 80%
- Blog post inline image (800px wide): Under 100 KB — JPEG or WebP at 75–80%
- Product thumbnail (400px): Under 30 KB — JPEG or WebP at 70–75%
- Profile/avatar (200px): Under 15 KB — JPEG or WebP at 70%
- Logo (SVG preferred): Under 10 KB as SVG; under 20 KB as PNG if SVG isn't available
- Open Graph / social preview image (1200×630): Under 300 KB — social platforms recompress anyway, but start optimized
Frequently Asked Questions
How much can I compress a JPEG without visible quality loss?
For most photographs, JPEG quality 75–85% is visually indistinguishable from the original at normal viewing distances on screen. Quality 60–70% is acceptable for thumbnails and less-prominent images. Below 60%, compression artifacts (blocky areas, color banding) become visible — avoid for hero images and product photos. The exact threshold varies by image content: high-frequency detail (hair, grass, fabric texture) shows artifacts sooner than smooth gradients (sky, skin).
Does image compression affect SEO?
Yes — page load speed is a confirmed Google ranking factor, and images are the most common cause of slow pages. Google's Core Web Vitals (specifically Largest Contentful Paint) measures how fast the main image loads. Compressing images directly improves LCP scores, which improves search rankings. Google PageSpeed Insights and Lighthouse will flag unoptimized images — compressing them is one of the highest-impact SEO improvements you can make to an existing site.
Should I resize images before or after compressing?
Resize first, then compress. There's no benefit to compressing a 4000px-wide image if it'll be displayed at 800px — serving an oversized image wastes bandwidth even if it's well-compressed. Use the image resizer to set the exact dimensions you need (match the CSS display size or double it for retina screens), then compress the resized image. This two-step approach produces the smallest possible file while maintaining sharpness at the target display size.