How to Compress Images for the Web Without Losing Quality
Images are typically the largest assets on a web page, accounting for 50-80% of total bytes. Unoptimized images slow down Largest Contentful Paint (LCP), hurt your Core Web Vitals score, and waste mobile bandwidth. Here is how to fix that without visible quality loss.
Why Image Size Directly Impacts Your Rankings
Google uses Core Web Vitals as a ranking signal. The most image-sensitive metric is Largest Contentful Paint (LCP) — the time it takes for the largest visible element (usually your hero image) to fully render. Google's threshold for "good" LCP is under 2.5 seconds.
A 1.5 MB hero image served over a 4G connection will routinely fail this threshold. The same image, properly compressed to 150 KB, will typically pass.
- Hero images (above the fold): under 150-200 KB
- Inline blog post images: under 100 KB
- Grid thumbnails: under 30 KB
- Avatars / icons: under 10 KB
Lossy vs Lossless Compression
Lossy compression permanently discards data that is imperceptible to the human eye — subtle color gradient differences, fine texture detail in shadows. File sizes shrink dramatically (often 60-80%), with no noticeable quality change at settings of 75-85%.
Lossless compression removes no image data — it only optimizes how the data is stored (removing metadata, using more efficient encoding). The output is bit-for-bit identical visually, but file size savings are much smaller (10-30%).
Use lossy for:
- Photographs
- Hero images and banners
- Backgrounds with complex textures
- Video thumbnails
Use lossless for:
- Logos and brand icons
- Screenshots with text
- UI components and illustrations
- Images with hard edges and flat colors
Image Format Guide for 2026
| Format | Best For | Compression | Support |
|---|---|---|---|
| JPEG | Photos | Lossy, very good | Universal |
| PNG | Logos, UI, transparency | Lossless | Universal |
| WebP | Everything | Lossy+lossless, excellent | 99%+ browsers |
| AVIF | Photos, hero images | Best available | 95%+ browsers |
| SVG | Icons, logos, illustrations | Vector — infinitely scalable | Universal |
The 80/20 Rule of Image Optimization
Four actions cover the vast majority of image optimization gains:
- Resize before compressing. Never serve a 4000px wide image to display it at 400px. Use the correct dimensions. This alone can reduce file size by 90%.
- Use quality 75-85% for JPEG and WebP. The quality reduction is statistically imperceptible to most people. Below 70%, artifacts become visible on high-detail areas.
- Strip EXIF and ICC metadata. Camera photos carry GPS coordinates, camera model, copyright strings, and color profiles that add 10-100 KB and have no visual effect on web display.
- Serve modern formats with fallbacks. Use the
<picture>element to serve AVIF or WebP to supporting browsers with JPEG as fallback. Zero compatibility risk, maximum compression benefit.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img
src="hero.jpg"
alt="Description of the image"
width="1200"
height="630"
fetchpriority="high"
/>
</picture>Optimizing Your LCP Image Specifically
The LCP element (usually the hero image) deserves special treatment:
- Do not lazy-load it. Default
loading="lazy"delays LCP — the browser waits to even request it. Usefetchpriority="high". - Preload it in the head. Add
<link rel="preload" as="image" href="hero.webp" />so the browser discovers it before parsing the body. - Keep it under 150 KB. On a 4G connection (roughly 3 Mbps effective), 150 KB downloads in ~400ms — safely within LCP budget.
- Serve from a CDN edge node. Network latency to origin can easily add 200-800ms. Edge delivery routinely cuts this to under 50ms.
The noserver Image Optimizer compresses JPEG, PNG, and WebP images entirely in your browser using WebAssembly. No upload, no account, no size limit.
Frequently Asked Questions
Does reducing JPEG quality actually make images look worse?+
Not noticeably in the 75-85% range for most photos. The human eye is more sensitive to color than fine detail, and JPEG compression targets imperceptible artifacts first. Below 60%, blocky artifacts appear near high-contrast edges.
Should I use WebP or AVIF in 2026?+
Both have near-universal browser support. AVIF achieves 30-50% smaller files than WebP at the same quality, but encodes slower. WebP is a safe default. Use AVIF for high-traffic sites where bandwidth savings outweigh encoding time.
What is the ideal compression setting for web images?+
Photos: JPEG or WebP at 75-85 quality. Transparency: WebP lossless or PNG. Icons/logos: SVG when possible. For progressive enhancement, serve AVIF to modern browsers with WebP or JPEG fallback via the picture element.
Does Google penalize sites with large images?+
Not directly, but large images hurt LCP which is a Core Web Vitals ranking factor. LCP should be under 2.5 seconds — a hero image over 500KB on a slow connection will commonly fail this.
How many KB should a web image be?+
Hero images: under 150-200KB. Blog images: under 100KB. Thumbnails: under 30KB. Avatars/icons: under 10KB. For the LCP image, aim under 150KB and use fetchpriority='high'.
Is JPEG or PNG better for web photos?+
JPEG is better for photos. PNG lossless compression produces much larger files for photographic content. Use PNG for images needing transparency, text-heavy screenshots, logos, or flat-color UI elements.
Does Next.js automatically optimize images?+
Yes. The next/image component auto-resizes to display dimensions, converts to WebP/AVIF where supported, lazy-loads by default, and prevents layout shift. It processes server-side, so CDN caching is important.