How to Compress Images for Web Without Losing Quality
Images are the heaviest assets on most web pages, accounting for over 50% of total page weight on the average site. If you don't compress images for web delivery, your pages load slowly, your Core Web Vitals scores drop, and your visitors leave before the content finishes rendering. The challenge is reducing file size without making the image look noticeably worse. This guide covers the practical methods, format choices, and compression targets that get you there.
Why You Need to Compress Images for Web
Google's Core Web Vitals measure real-world user experience, and two of the three main metrics — Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) — are directly affected by images. LCP is the time it takes for the largest element above the fold to render, and that element is usually an image. If your hero image is a 3 MB uncompressed JPEG, your LCP will suffer.
Research from Google shows that as page load time increases from 1 to 3 seconds, the probability of bounce rises by 32%. Compressing your images is the single highest-impact change you can make to improve load times.
Lossy vs Lossless Compression
Every image compression method falls into one of two categories. Understanding the difference helps you choose the right approach for each image.
Lossless compression reduces file size by eliminating redundant data without discarding any visual information. The decompressed image is pixel-identical to the original. PNG uses lossless compression. The file size reduction is modest — typically 10–30%.
Lossy compression discards data that the human eye is unlikely to notice, achieving much smaller files. JPEG and WebP use lossy compression. Reductions of 60–80% are common with minimal visible quality loss.
For most web images — photographs, hero banners, product photos — lossy compression is the right choice. For images with sharp edges, text, or flat color areas (logos, screenshots, diagrams), lossless is better because lossy compression introduces visible artifacts around edges.
Compression Targets by Image Type
Not every image needs the same compression level. Here are practical targets based on how the image is used:
| Image Type | Format | Target Size | Compression Level |
|---|---|---|---|
| Hero / full-width photos | WebP | 100–200 KB | Lossy, quality 75–80 |
| Product thumbnails | WebP | 30–60 KB | Lossy, quality 70–75 |
| Logos and icons | PNG or WebP | Under 10 KB | Lossless |
| Screenshots with text | PNG | 50–150 KB | Lossless |
| Background patterns | WebP | Under 20 KB | Lossy, quality 70 |
Here's a visual showing the file size reduction you can expect:
Original
3.2 MB (Hero)
→
Compressed (WebP)
165 KB
-95%
-97%
-97%
Convert to WebP for Maximum Savings
WebP is the most efficient format for web images right now. It supports both lossy and lossless compression, handles transparency (unlike JPEG), and produces files 25–35% smaller than JPEG at equivalent quality and significantly smaller than PNG for photographic content.
Browser support for WebP is now universal — Chrome, Firefox, Safari, and Edge all support it, covering over 97% of users globally. There's no reason to avoid it in 2026.
To convert your existing images, use a PNG to WebP converter for transparent images and logos, or an image compressor for batch-processing JPEGs and PNGs into compressed WebP files.
Resize Images Before Compressing
Compression reduces file size, but resizing reduces it more. A photo straight from a modern phone is 4000×3000 pixels — far larger than any website needs. If your content area is 1200 pixels wide, serving a 4000-pixel image is wasted bandwidth.
Always resize images to the maximum display dimensions before applying compression. Use an image resizer to set the correct width and height. For responsive designs, generate multiple sizes (e.g., 400px, 800px, 1200px) and serve the appropriate one using srcset attributes.
Responsive Images With srcset
Serving one image size to all devices is inefficient. A mobile user on a 375-pixel-wide screen doesn't need the same 1200-pixel image as a desktop user. The srcset attribute lets the browser choose the right file:
<img src="photo-1200.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
alt="Description" loading="lazy" decoding="async">
This approach, combined with compression, can cut your image payload by 70% or more on mobile devices.
Lazy Loading and Modern HTML Attributes
Two HTML attributes further reduce the impact of images on page load:
loading="lazy"— defers loading of off-screen images until the user scrolls near them.decoding="async"— lets the browser decode the image off the main thread, preventing render-blocking.
Add both to every <img> tag. For images above the fold (especially your LCP image), omit loading="lazy" — you want that image to load immediately.
Compression Tools Comparison
| Tool | Best For | Batch Support | Output Formats |
|---|---|---|---|
| Keynou image compressor | Quick web optimization | Yes | WebP, JPEG, PNG |
| Squoosh | Fine-tuned quality control | No | WebP, AVIF, JPEG |
| ImageOptim (Mac) | Local batch processing | Yes | Various |
| Sharp (Node.js) | Automated build pipelines | Yes | WebP, AVIF, JPEG |
For most website owners, a browser-based image compressor handles 90% of use cases without installing anything.
Measuring the Results
After compressing your images, test your pages with Google PageSpeed Insights to see the impact on Core Web Vitals. Look specifically at LCP — if it drops from 4 seconds to under 2.5 seconds, your compression strategy is working. The web.dev performance documentation covers additional optimization techniques if you want to go further.
Start Compressing Your Images
To compress images for web effectively: resize to the correct dimensions, convert to WebP, apply lossy compression at quality 75–80 for photos, and use lossless for logos and screenshots. Add srcset for responsive delivery and loading="lazy" for off-screen images. These steps routinely reduce image weight by 80% or more with no visible quality loss — and your Core Web Vitals scores will reflect the difference.
