Images account for roughly 50% of the average web page's total weight. A single unoptimized photo from a modern smartphone can be 5–10 MB - that is more than some entire web pages should weigh.
The good news: you can compress most images by 60–80% without any visible difference to the human eye. This guide covers the exact settings, workflows, and tools to do it right.
Why Image Compression Matters
Unoptimized images create a cascade of problems:
- Slower page loads: Every extra MB adds seconds on mobile connections. 53% of mobile users abandon sites that take over 3 seconds to load.
- Lower search rankings: Google's Core Web Vitals include Largest Contentful Paint (LCP), and oversized images are the #1 cause of poor LCP scores.
- Higher bandwidth costs: If your site serves 100,000 page views per month, compressing images from 3 MB to 500 KB saves roughly 250 GB of bandwidth monthly.
- Worse user experience: Slow-loading images cause layout shifts (CLS problems) and make pages feel sluggish.
Lossy vs Lossless Compression
Lossless Compression
Removes redundant data without changing any pixels. The decompressed image is identical to the original, bit for bit. Typical savings: 10–30%.
- Used by: PNG, WebP (lossless mode), TIFF
- Best for: Logos, text, screenshots, master files
Lossy Compression
Discards image data that the human eye is least sensitive to. The result looks the same but is not pixel-identical. Typical savings: 60–90%.
- Used by: JPEG, WebP (lossy mode), HEIC
- Best for: Photographs, content images, backgrounds
Key insight: Lossy compression at the right quality setting is visually indistinguishable from the original. The trick is knowing where that threshold is - which is what the next section covers.
Optimal Compression Settings by Format
JPEG Quality Settings
| Use Case | Quality | Typical Savings | Visual Impact |
|---|---|---|---|
| Hero / banner images | 82–88 | 50–60% | None visible |
| Content / blog images | 75–82 | 60–70% | None at normal viewing |
| Thumbnails / cards | 65–75 | 70–80% | Acceptable at small sizes |
| Background textures | 55–65 | 80–90% | Slightly soft, usually fine |
WebP Quality Settings
WebP's compression is more efficient, so you can use lower quality numbers for the same visual result:
- Quality 75–80: Equivalent to JPEG quality 85–90
- Quality 65–75: Equivalent to JPEG quality 78–85
- Quality 50–65: Equivalent to JPEG quality 70–78
PNG Optimization
PNG is lossless, so "quality" works differently. Optimization removes unnecessary metadata, reduces color palette when possible, and applies better compression algorithms:
- PNG-8 (256 colors): Use for simple graphics, icons, and small images
- PNG-24/32: Optimize with tools that strip metadata and apply maximum DEFLATE compression
- Typical savings from optimization: 20–50% without any quality change
Step-by-Step Compression Workflow
Step 1 - Resize First, Compress Second
This is the single most impactful optimization. A 4000×3000 pixel photo scaled to 800×600 in CSS still downloads the full 4000×3000 file. Resize to the actual display dimensions before compressing.
- Blog content images: 800–1200 px wide
- Hero/banner images: 1600–1920 px wide
- Thumbnails: 300–400 px wide
- Product images: Match marketplace requirements (typically 1000–2048 px)
Use the image resizer to set exact dimensions.
Step 2 - Choose the Right Format
- Photos → WebP (or JPEG fallback)
- Screenshots with text → PNG
- Logos/icons → SVG (or PNG if raster needed)
- Simple graphics → PNG-8
Step 3 - Apply Compression
Upload your resized image to the image compressor. Set quality to 78–82 for most web images. The tool shows you the compressed size and lets you preview the result before downloading.
Step 4 - Strip Metadata
Camera photos contain EXIF metadata: GPS coordinates, camera model, lens info, timestamps. This data adds 10–100 KB per image and is rarely needed on your website. Most compression tools strip it automatically, but verify.
Check what metadata your images contain using the metadata viewer.
Step 5 - Verify Results
Open the compressed image at 100% zoom and compare against the original. If you cannot tell the difference at normal viewing distance, the compression is correct. If you see artifacts, increase quality by 5 points.
Format-Specific Optimization Tips
JPEG Optimization
- Use progressive JPEG: Loads a blurry preview first, then sharpens - better perceived performance
- Enable chroma subsampling (4:2:0): Reduces color data by 50% - invisible to the human eye in photos
- Avoid re-compressing: Each save cycle degrades quality. Start from the original file.
PNG Optimization
- Reduce color palette: If your graphic uses fewer than 256 colors, convert to PNG-8
- Use indexed color: Significant size reduction for flat-color graphics
- Consider WebP: Lossless WebP is 26% smaller than PNG on average
WebP Optimization
- Use lossy mode for photos: 25–35% smaller than equivalent JPEG
- Use lossless mode for graphics: Smaller than PNG with identical quality
- Set the effort parameter high: Slower encoding but better compression. Worth it for production images.
Batch Compression for Large Sites
If your website has hundreds or thousands of images, manual optimization is not practical. Here is a systematic approach:
- Audit current images: Check total image weight per page using browser DevTools → Network → Img filter
- Identify the worst offenders: Sort by file size - the largest images offer the biggest savings
- Batch process by type: Upload photos and graphics separately (different optimal settings)
- Use the batch compressor: Upload multiple images at once and download the compressed versions as a ZIP
- Set up prevention: Establish upload guidelines so new images are compressed before they reach your server
Impact on Core Web Vitals & SEO
Largest Contentful Paint (LCP)
LCP measures how long the largest visible element takes to load. On image-heavy pages, the hero image is usually the LCP element. Compressing it from 2 MB to 200 KB can improve LCP by 1–3 seconds on mobile.
- Good: LCP under 2.5 seconds
- Needs improvement: 2.5–4.0 seconds
- Poor: Over 4.0 seconds
Cumulative Layout Shift (CLS)
Images without width and height attributes cause layout shifts as they load. Always specify dimensions in your HTML, regardless of compression level.
First Input Delay (FID) / Interaction to Next Paint (INP)
Oversized images consume bandwidth that could be used for JavaScript and interactive elements. Lighter images free up the connection for faster interactivity.
Common Image Optimization Mistakes
1. Compressing Without Resizing
Compressing a 5000 px wide image to quality 80 still produces a large file. Resize to the display dimensions first - this alone often reduces file size by 80%+.
2. Over-Compressing
Quality below 60 for JPEG introduces noticeable artifacts: blocking, banding, and smeared details. If compression artifacts are visible, you have gone too far.
3. Using PNG for Photographs
PNG uses lossless compression, which is terrible for photo-like content. A photo saved as PNG can be 10× larger than the same image as JPEG with no visible benefit.
4. Ignoring Retina Displays
For devices with 2× pixel density, serve images at 2× the display size but compressed more aggressively. A 1600 px wide JPEG at quality 70 looks identical to an 800 px image at quality 90 on a Retina display - but loads faster.
5. Not Using Modern Formats
Sticking with JPEG when WebP offers 25–35% better compression for the same quality. In 2026, browser support for WebP is universal enough for production use.
Frequently Asked Questions
What is the best quality setting for JPEG compression?
For web use, JPEG quality 78–82 provides the best balance. At this range, file sizes drop 60–70% compared to quality 100, but the visual difference is imperceptible to most viewers. For hero images, use 85. For thumbnails, 70 is sufficient.
Does compressing images hurt SEO?
No - compressing images helps SEO. Google uses page speed as a ranking factor, and images are often the largest elements on a page. Properly compressed images improve Largest Contentful Paint (LCP) scores, which directly impacts Core Web Vitals and search rankings.
How much can I reduce image file size without losing quality?
Typically 60–80% without visible quality loss. A 2 MB JPEG photo can usually be compressed to 300–500 KB with no perceptible difference. The exact savings depend on the image content, format choice, and compression settings.
Should I use WebP or JPEG for my website?
Use WebP whenever possible. It produces files 25–35% smaller than JPEG at the same visual quality and has 97%+ browser support. Serve JPEG as a fallback for the rare browsers that don't support WebP.
What is the ideal image file size for web pages?
Aim for under 200 KB per image for standard content images, under 500 KB for full-width hero images, and under 50 KB for thumbnails. Total image weight per page should ideally stay under 1.5 MB for fast loading on mobile connections.
Start Compressing Your Images
Image compression is the highest-impact web performance optimization available. Resize first, compress at quality 78–82, use WebP where possible, and strip metadata. These four steps will make your pages noticeably faster.
Try the free image compressor to see how much file size you can save. For bulk processing, upload multiple images at once and download the optimized set as a ZIP.