How to Compress Images for the Web Without Losing Quality
Images account for nearly half of the average web page's total weight. A single unoptimized hero image can add 2 to 5 MB to your page, pushing load times past the threshold where users leave. The solution is compression, but doing it wrong means blurry photos and visible artifacts.
This guide explains how to compress images effectively, what quality settings to use for each format, and how to verify your results.
Why Image Compression Matters
Page weight directly affects three things that matter for any website:
Speed. A 3 MB page loads in about 2.4 seconds on a mobile 4G connection. Cut the images by 50% and that drops to 1.5 seconds. Users notice the difference, and Google measures it via Largest Contentful Paint (LCP).
Bandwidth costs. Every byte you serve costs money, either through your hosting provider, your CDN, or your users' mobile data plans. For a site serving 100,000 page views per month with 2 MB of images per page, a 40% reduction saves roughly 80 GB of transfer per month.
Core Web Vitals. Google's LCP metric is directly tied to image loading speed. Pages with a LCP under 2.5 seconds are rated "good" and benefit from a ranking boost. Images are the LCP element on roughly 70% of web pages.
Lossy vs Lossless | A Quick Overview
There are two fundamental types of image compression:
Lossy compression permanently removes visual information to reduce file size. The removed data is chosen to minimize perceptible impact, typically high-frequency details that the human eye is less sensitive to. JPG and WebP lossy use this approach. The trade-off is controlled by a quality parameter: lower quality means smaller files but more visible degradation.
Lossless compression reduces file size by encoding the data more efficiently without removing any information. The decompressed image is pixel-for-pixel identical to the original. PNG and WebP lossless use this approach. The trade-off is that file sizes are significantly larger than lossy compression.
For web images, lossy compression is almost always the right choice. The file size savings are dramatic (50 to 80% vs the uncompressed original), and at appropriate quality settings, the visual difference is invisible to the human eye.
What Quality Level Should You Target?
Quality settings range from 1 (maximum compression, worst quality) to 100 (minimum compression, best quality). The right setting depends on the image type and its role on the page.
For photographic content (JPG and WebP lossy):
| Quality | Typical savings | Visual impact | Best for |
|---|---|---|---|
| 85-95 | 20-40% | None | Hero images, portfolios |
| 75-84 | 40-55% | None at normal viewing | Standard web images |
| 60-74 | 55-70% | Minor on close inspection | Thumbnails, backgrounds |
| Below 60 | 70%+ | Visible artifacts | Not recommended for most uses |
Quality 80 is the recommended default. It delivers substantial file size reduction with no visible quality difference for photographic content at typical web viewing sizes.
For AVIF:
AVIF is more efficient than JPG and WebP, so you can use lower quality numbers for equivalent results. An AVIF at quality 65 to 70 matches a JPG at quality 85 visually, at roughly half the file size.
For PNG (lossless):
PNG does not have a quality parameter in the traditional sense. PNG compression is always lossless, but you can control the compression effort (how hard the encoder works to find the smallest representation). Higher effort means slower encoding but smaller files, with no quality difference.
Compression by Format | JPG, PNG, WebP, AVIF
Here is how each format performs on a typical 1200x800 photograph:
| Format | Setting | File size | vs Original JPG Q100 |
|---|---|---|---|
| JPG Q100 | Maximum quality | 850 KB | Baseline |
| JPG Q85 | Standard web | 350 KB | -59% |
| JPG Q75 | Aggressive | 250 KB | -71% |
| WebP Q80 | Standard web | 240 KB | -72% |
| WebP Q70 | Aggressive | 180 KB | -79% |
| AVIF Q70 | Standard web | 170 KB | -80% |
| AVIF Q55 | Aggressive | 120 KB | -86% |
The takeaway: switching from JPG Q85 to WebP Q80 saves about 30%. Switching to AVIF Q70 saves about 50%. Combining format conversion with quality optimization delivers the largest gains.
For graphics, icons, and screenshots:
| Format | Mode | File size |
|---|---|---|
| PNG (unoptimized) | Lossless | 120 KB |
| PNG (optimized) | Lossless | 85 KB |
| WebP lossless | Lossless | 65 KB |
| WebP Q90 | Lossy | 25 KB |
For sharp-edged graphics where pixel accuracy matters, use WebP lossless. For graphics where minor compression artifacts are acceptable, WebP lossy at Q90 produces dramatically smaller files.
How to Compress Images Online
The fastest way to compress images is with an online tool. No installation, no command line.
With Morphix:
- Go to the compression page for your format: Compress JPG, Compress PNG, or Compress WebP.
- Drop your image file on the upload area.
- Adjust the quality slider to your desired level.
- Click Compress.
- Download the optimized file.
You can also convert and compress in one step by using the conversion tools (JPG to WebP, JPG to AVIF). The quality setting applies during conversion, so you get both format optimization and compression in a single operation.
Measuring Compression Results
Compression is only useful if the output looks good. Here is how to verify your results:
Visual inspection. Open the original and compressed images side by side at 100% zoom. Check areas with fine textures (hair, fabric, foliage), sharp edges (text, logos), and smooth gradients (sky, backgrounds). If you cannot tell the difference, the compression is good enough.
File size comparison. Compare the original and compressed file sizes. For web images, aim for at least 30% reduction. If you are getting less than 20%, your source image may already be well compressed.
Lighthouse and PageSpeed Insights. These tools analyze your pages and flag images that could be further compressed. They also estimate the potential savings in kilobytes and loading time.
SSIM (Structural Similarity Index). For technical validation, SSIM compares the structural similarity between two images. A score above 0.95 means the compressed image is virtually indistinguishable from the original. Most well-compressed web images score between 0.93 and 0.98.
Compress Your Images
Morphix compresses JPG, PNG, and WebP images directly in your browser. No registration required for the free plan.