A single uncompressed product photo can weigh 5-8MB. Load twenty of those on one e-commerce page and you've shipped 100-160MB before the visitor sees a single "add to cart" button. Compression is the single biggest lever most sites have for page speed, and it's also the one most teams get wrong: either they skip it entirely and ship bloated pages, or they compress too aggressively and ship visibly blurry, artifacted images that make the site look cheap.
This guide explains what's actually happening when an image gets compressed, how to choose between formats, and how to compress without anyone noticing the difference.
Core Concepts: How Compression Actually Works
Every image file is, at its core, a grid of pixel values. Compression is the process of representing that grid with less data. There are two fundamentally different ways to do it.
Lossless Compression
Lossless compression removes redundancy without discarding any information. A large block of identical blue sky pixels, for example, can be stored once with an instruction to "repeat this value 40,000 times" instead of storing 40,000 individual pixel values. Decompress the file and you get back the exact original, pixel for pixel. PNG uses lossless compression, which is why it's the right choice for logos, icons, and screenshots with sharp edges and flat colors, but a poor choice for photos, where lossless files stay large because there's little redundancy to exploit.
Lossy Compression
Lossy compression goes further: it identifies detail the human eye is unlikely to notice and discards it permanently. It leans on how human vision actually works, we're far more sensitive to changes in brightness than to changes in color, and far more sensitive to sharp edges than to fine texture in busy areas. JPEG, WebP, and AVIF all use lossy compression by default, which is why they achieve much smaller file sizes on photos than PNG ever could. The trade-off is real: push the quality setting too low and the discarded detail becomes visible as blocky artifacts, blurring, or color banding.
Choosing a Format
| Format | Compression | Best for | Browser support |
|---|---|---|---|
| PNG | Lossless | Logos, icons, screenshots, transparency | Universal |
| JPEG | Lossy | Photos, legacy compatibility | Universal |
| WebP | Lossy or lossless | Photos and graphics, general web use | All modern browsers |
| AVIF | Lossy or lossless | Photos where max compression matters most | Most modern browsers, growing |
| SVG | Vector, not pixel-based | Icons, illustrations, logos that need to scale | Universal |
As a default for 2026: serve photos and complex UI images as WebP, keep PNG for anything that needs a transparent background and sharp flat edges, and reach for AVIF specifically on high-traffic pages where every extra percentage of compression is worth the added encoding complexity.
Real-World Applications
- E-commerce: Product galleries are usually the heaviest part of the page. Compressing and serving WebP product images is one of the fastest ways to cut load time and reduce cart abandonment tied to slow pages.
- Blogs and content sites: Featured images and inline screenshots add up fast across hundreds of posts; batch compression during publishing keeps the whole site fast without per-image effort.
- Mobile apps: Compressed images reduce app bundle size and mobile data usage, which matters directly for users on limited data plans.
- Email marketing: Many email clients cap message size or throttle image-heavy emails; compression keeps deliverability high.
- SEO: Page speed is a ranking factor, and Core Web Vitals metrics like Largest Contentful Paint are frequently dominated by an unoptimized hero image.
Best Practices
- Resize before you compress. Don't upload a 4000px-wide photo and compress it at that size if it will only ever display at 800px. Resize to final display dimensions first, then compress.
- Use responsive images. Serve different image sizes for different screen widths with
srcset, so mobile visitors don't download a desktop-sized file. - Target 70-85% quality for photos. This range is visually lossless for most images while cutting file size dramatically compared to 100% quality.
- Strip metadata. Camera EXIF data, color profiles, and thumbnails embedded in image files add weight and rarely matter for web display.
- Common mistake: compressing already-compressed images repeatedly. Each lossy re-compression pass compounds quality loss. Always compress from the original source, not from a previously compressed copy.
- Common mistake: one-size-fits-all quality settings. A photo with fine texture can tolerate more compression than a screenshot with sharp text; test rather than assume.
Compress without the guesswork
Pro Image Edit handles compression, resizing, cropping, and format conversion right in the browser, free, with no upload limits on your privacy since processing happens client-side.
Future Outlook
Format support keeps improving: AVIF adoption is rising as encoders get faster, and browsers increasingly let sites serve the best format automatically via the <picture> element with fallbacks. On the AI side, generative upscaling and AI-assisted compression are starting to reconstruct fine detail from more heavily compressed source data, which could push the achievable compression ratio further without a visible quality hit. For now, the fundamentals, resize first, pick the right format, target a sensible quality range, still account for the large majority of the win.
Frequently Asked Questions
Does compressing an image reduce quality?
Lossless compression does not reduce quality at all, it just removes redundant data. Lossy compression can reduce quality, but at moderate settings (roughly 70-85% quality for JPEG or WebP) the loss is invisible to the human eye while file size drops significantly.
What's the best image format for websites in 2026?
WebP is the safe default for photos and complex images today, with 25-35% smaller files than JPEG at equal quality and support in all modern browsers. AVIF compresses even further but has more variable encoder support and slower compression time, so many teams serve AVIF with a WebP fallback.
Should I compress images before or after resizing?
Resize first, then compress. Compressing a large image and then shrinking its dimensions wastes the compression pass, since resizing recalculates all the pixel data anyway. Always get the image to its final display dimensions first.
How much can I compress an image before it looks bad?
It depends on the image, but as a rule of thumb, JPEG and WebP quality settings between 70 and 85 are usually visually lossless for photos. Below 60, artifacts like blocky patches and color banding start to show, especially in images with flat color areas or text.
Conclusion
Compression isn't a single setting, it's a chain of decisions: right format, right dimensions, right quality target. Get those three right and you'll typically cut image weight by 60-80% with zero visible difference to your visitors. Skip any one of them and you're either shipping bloated pages or blurry images.
Try it yourself with Pro Image Edit, or if you're optimizing a full site's image pipeline, our consultancy team can help. Get in touch, or browse more articles on the NoCubical blog, including our guide to cloud migration.