Image Compression for Core Web Vitals — Boost LCP and Page Speed

Images account for roughly 50% of the total bytes on most web pages. When Google measures your Core Web Vitals, the Largest Contentful Paint (LCP) metric is almost always an image — a hero banner, a product photo, or a background graphic. If that image is 2 MB instead of 200 KB, your LCP score tanks, your page feels slow, and your search rankings suffer.

The good news is that image compression is one of the highest-impact, lowest-effort optimizations you can make. Compressing a single hero image can shave 1–3 seconds off your LCP. Multiply that across every image on your site, and the performance gains are dramatic.

Why Images Are the LCP Bottleneck

Largest Contentful Paint measures how long it takes for the biggest visible element to render. On most pages, that element is an image. Google considers an LCP under 2.5 seconds "good," between 2.5 and 4 seconds "needs improvement," and over 4 seconds "poor."

Here is the math that matters: on a typical 4G mobile connection (roughly 10 Mbps), downloading a 1 MB image takes about 800 milliseconds just for the transfer. Add DNS lookup, TLS handshake, server response time, and rendering, and you are already past 2 seconds before the browser even starts painting. A 200 KB compressed version of the same image transfers in about 160 milliseconds — that difference alone can move your LCP from "poor" to "good."

According to the HTTP Archive, the median web page loads about 1 MB of images. The top 10% of pages load over 4 MB. If your site is in that top 10%, image compression is not optional — it is the single most impactful thing you can do for performance.

Understanding Image Compression Types

Lossy Compression

Lossy compression permanently removes data that the human eye is unlikely to notice. JPEG has used this approach since 1992, and modern formats like WebP and AVIF have gotten remarkably good at it. A well-compressed JPEG at quality 80 is visually indistinguishable from the original for most photos, while being 60–80% smaller.

The key insight is that lossy compression exploits how human vision works. We are much more sensitive to changes in brightness than color, so lossy algorithms aggressively compress color data while preserving luminance detail. This is why a photo can lose 70% of its file size and still look sharp.

Lossless Compression

Lossless compression reduces file size without removing any data. PNG uses lossless compression, which is why it is preferred for screenshots, diagrams, and images with text. The tradeoff is that lossless compression typically achieves only 10–30% size reduction compared to 60–90% for lossy.

WebP and AVIF both support lossless modes that outperform PNG by 25–35%, making them excellent choices when you need pixel-perfect output at smaller file sizes.

The Modern Image Format Landscape

JPEG: Still the Default

JPEG remains the most widely used image format on the web. It is universally supported, well-understood, and good enough for most photos. If you are compressing photographs and need maximum compatibility, JPEG at quality 75–85 is a solid baseline.

WebP: The Practical Choice

WebP, developed by Google, offers 25–35% smaller files than JPEG at equivalent quality. Browser support reached 97% globally in 2024, making it safe to use as a primary format. WebP supports both lossy and lossless compression, transparency (alpha channel), and animation — replacing JPEG, PNG, and GIF with a single format.

AVIF: The Performance Leader

AVIF delivers 40–50% smaller files than JPEG and 20% smaller than WebP. It is based on the AV1 video codec and produces excellent results at very low bitrates. Browser support is now above 92%, with Safari adding support in version 16. The main downside is slower encoding speed, which matters for real-time compression but not for static assets.

Compression Strategies by Image Type

Hero Images and Banners

These are your LCP elements. Compress aggressively — quality 70–80 for JPEG, quality 60–75 for WebP. Resize to the maximum display size (not the original camera resolution). A hero image should rarely exceed 150–200 KB. Consider using fetchpriority="high" and preload hints to ensure the browser downloads it first.

Product Photos

Quality matters more here because users zoom in and scrutinize details. Use quality 80–85 for JPEG, 75–80 for WebP. Serve different sizes for thumbnails versus detail views using srcset. A product thumbnail can be 20–40 KB; the detail view might be 100–150 KB.

Screenshots and Diagrams

These contain sharp edges and text, so lossy compression creates visible artifacts. Use PNG or lossless WebP. If the screenshot is large, consider reducing the color palette — most UI screenshots use fewer than 256 colors, and an 8-bit PNG can be 70% smaller than a 24-bit one.

Icons and Logos

Use SVG whenever possible. SVGs are resolution-independent, typically tiny (1–5 KB), and can be styled with CSS. For raster icons, use WebP or PNG at the exact display size. A 64×64 icon does not need to be exported from a 1024×1024 source. Also check out our complete favicon guide for icon best practices across devices.

Measuring the Impact

Before and after compression, measure your results:

1. Run PageSpeed Insights and note your LCP score
2. Compress your images using an image compressor
3. Deploy and re-run PageSpeed Insights
4. Compare the LCP values — you should see measurable improvement

For ongoing monitoring, use the Chrome User Experience Report (CrUX) to track real-user LCP data over time. Field data matters more than lab data because it reflects actual user conditions — slow phones, congested networks, and varying screen sizes.

You can also use the diff checker to compare your HTML before and after adding responsive image markup, ensuring you have not missed any srcset or sizes attributes.

Quick Wins: A 5-Minute Image Audit

If you want immediate results, do this right now:

1. Open Chrome DevTools, go to the Network tab, filter by "Img"
2. Sort by size (largest first)
3. Any image over 500 KB is a candidate for compression
4. Check dimensions — if an image is 4000×3000 but displayed at 800×600, resize it first
5. Run the top 3–5 largest images through a compressor

This five-minute audit typically reduces total page weight by 30–60%. Combined with proper format selection and responsive images, you can often cut image bytes by 80% or more.

For a broader look at optimizing your entire web stack, check out our guide on converting images to WebP format and our sitemap generator guide to make sure search engines can find your optimized pages.

The Bottom Line

Image compression is the lowest-hanging fruit in web performance. It requires no code changes, no architecture decisions, and no framework migrations. You take an image, compress it, and your site gets faster. With Core Web Vitals directly influencing search rankings, every kilobyte you save translates to better SEO, lower bounce rates, and happier users.

Start with your largest images, use modern formats where browser support allows, and make compression part of your build pipeline. Your LCP scores — and your users — will thank you.