How to Compress Images for Your Website (Free, Boost PageSpeed & Core Web Vitals)

Run your website through Google's PageSpeed Insights and there's a good chance the top recommendation is the same one almost every site gets: optimize your images. Images typically make up the majority of a page's total weight, and it's usually the single fastest fix available — faster than rewriting code, faster than switching hosting, faster than anything else on the list.

Why Image Size Directly Affects Your PageSpeed Score

Google identifies Largest Contentful Paint (LCP) as one of the three Core Web Vitals used to evaluate page experience. Google's "good" threshold is LCP under 2.5 seconds, measured from real visitor data rather than a lab simulation; anything over 4 seconds is rated "poor." In many websites, the LCP element is a large hero image, making image optimization one of the quickest ways to move a page from "poor" into "good" — an unoptimized 3-5MB photo straight from a camera or phone can single-handedly push LCP past 4 seconds on its own, even if every other part of your site is fast.

How Oversized Images Quietly Damage Your SEO Health, Not Just Speed

Slow loading is the obvious symptom, but oversized images cause a few other problems that are easy to miss:

• Weaker user engagement — slow pages often cause visitors to leave before engaging with the content, reducing user satisfaction and overall page effectiveness
• Wasted crawl budget on larger sites — Googlebot allocates a limited amount of time to crawling each site; pages bloated with unnecessarily large images take longer to crawl and render, meaning fewer of your other pages get crawled and indexed promptly in the same crawl session
• Poor mobile experience — more than half of web traffic is mobile, often on inconsistent connections, so heavy images hurt a much larger share of your real visitors than desktop-only testing reveals
• Compounding effect at scale — a single oversized image is a minor issue; the same mistake repeated across hundreds of blog posts or product pages becomes a site-wide performance problem that's much harder to fix retroactively

This is why image optimization is treated as foundational SEO technical hygiene, not just a performance nice-to-have.

The Image Mistake That Hurts a Different Metric: CLS

Compression fixes loading speed, but a separate Core Web Vital — Cumulative Layout Shift (CLS) — gets hurt by a different, unrelated image mistake: not telling the browser an image's dimensions in advance. Google's "good" threshold for CLS is under 0.1, and anything over 0.25 is rated "poor."

Here's why this happens: if your HTML doesn't specify an image's width and height attributes, the browser doesn't know how much space to reserve for it before the file finishes downloading. Text and other elements load first, the image pops in a moment later, and everything visually jumps to make room — that jump is exactly what CLS measures. A perfectly compressed image can still cause a bad CLS score if this one detail is missing from the HTML.

The fix costs nothing in file size: always include explicit width and height attributes on every <img> tag, even though CSS controls the final displayed size. This lets the browser reserve the correct space immediately, before the image data has even arrived.

The Right Format: AVIF vs. WebP vs. JPG vs. PNG

• AVIF — the newest format, often 10-20% smaller than WebP at similar visual quality, with support across all current major browsers. The strongest choice when squeezing out every extra kilobyte matters most, though slightly slower to encode than WebP.
• WebP — the safer default for most sites in 2026: typically 25-35% smaller than JPEG at equivalent visual quality, with broad, well-established browser support and faster encoding than AVIF.
• JPG — a safe fallback for older browsers, good for photographs
• PNG — only use this for images that genuinely need transparency (logos, icons); using PNG for photographs bloats file size for no visual benefit

In practice, WebP remains the pragmatic default — the file size difference against AVIF is usually small enough not to matter, while WebP's faster, more universally consistent encoding makes it the lower-risk choice for most sites. AVIF is worth reaching for specifically on your highest-traffic pages, where a further 10-20% reduction directly compounds into real LCP gains at scale.

How to Compress Images for Your Website Using CompressFor

1. Step 1 — Go to the Presets tab on CompressFor
2. Step 2 — Click the Website / Blog preset card
3. Step 3 — Upload your image — drag and drop or click to browse
4. Step 4 — The tool automatically converts to WebP and compresses for fast web loading
5. Step 5 — Download and upload directly to your site

Everything runs in your browser — nothing is uploaded to a server, so this works even for sensitive or pre-launch content.

What File Size Should You Target?

• Hero / above-the-fold images — aim for under 150-200KB, since this is often your LCP element
• Product or card-style images — under 80-120KB is a reasonable target for smaller supporting visuals
• Blog post images — under 150KB keeps pages loading quickly without visible quality loss on a typical screen

Can You Compress Images Too Much?

Yes. Over-compressing introduces visible artifacts and blur, and the goal isn't the smallest possible file — it's the smallest file that still looks sharp on the screen where it will actually be viewed. For most websites, moderate compression combined with WebP provides a good balance between quality and loading speed. If a compressed image starts looking noticeably soft or blocky, it's usually a sign the quality setting was pushed further than the source image could reasonably support.

Common Mistakes That Hurt Page Speed and SEO

• Uploading camera-resolution originals directly — a 4000px-wide photo displayed at 800px wide on your site wastes bandwidth for zero visible benefit. If your image files are also just generally too large for your host or platform's upload limit, this guide covers the most common reasons why.
• Using PNG for photographs — as covered above, this inflates file size significantly compared to JPG or WebP
• Uploading HEIC files from an iPhone directly — some website platforms and older browsers don't render HEIC properly at all. If your images are coming straight from an iPhone, here's how to convert HEIC to JPG first.
• Never revisiting old images — a site's oldest blog posts and pages often carry the heaviest, least-optimized images, since compression wasn't top of mind when they were first uploaded. For a deeper look at balancing file size against visible quality, see how to reduce image size without losing quality.

Why Use CompressFor?

• Works entirely in your browser — nothing uploaded to a server
• No sign-up required, no watermark
• Automatic WebP conversion for the fastest web-ready format
• Free for unlimited images, no per-file limits
• Works for bulk cleanup of an entire existing site, not just new uploads

Frequently Asked Questions

How do I compress an image for my website for free?

Upload your image to CompressFor's Website/Blog preset, and it automatically converts to WebP and compresses it for fast loading — free, with no signup.

Does compressing images actually improve my PageSpeed score?

Yes. Images are typically the largest contributor to page weight, and reducing their size directly improves Largest Contentful Paint, one of Google's three core Core Web Vitals metrics.

Do large images actually hurt my SEO, or just my page speed?

Both, though indirectly. Beyond slower load times, oversized images increase the chance visitors leave before engaging with your content, waste crawl budget on larger sites, and disproportionately hurt the mobile majority of your traffic — all of which can affect how a page performs over time, even though file size itself isn't a direct ranking factor.

Does Google prefer WebP images?

Google supports WebP and smaller image files can contribute to better page performance, but simply switching to WebP doesn't automatically improve rankings on its own. The actual performance gains from a smaller, faster-loading file matter more than the format itself.

Should I use WebP or JPG for my website?

WebP is the better default for most website images in 2026, offering meaningfully smaller file sizes than JPG at the same visual quality, with support across virtually all modern browsers.

Is AVIF better than WebP for website images?

AVIF typically produces files 10-20% smaller than WebP at similar visual quality, and modern browsers support it. WebP remains the more pragmatic default for most sites due to faster encoding and slightly broader compatibility, but AVIF is worth using specifically on high-traffic pages where every extra kilobyte saved compounds into real performance gains.

What is CLS and how do images affect it?

Cumulative Layout Shift measures how much content unexpectedly moves around as a page loads. Images without explicit width and height attributes in the HTML cause this, since the browser doesn't know how much space to reserve before the image finishes loading. Adding these attributes fixes it at no cost to file size.

What image size is best for website page speed?

Aim for under 150-200KB for hero or above-the-fold images, and under 100KB for smaller supporting images, depending on how the image is displayed on your page.

Is there a free tool to optimize images for web performance?

Yes. CompressFor's Website/Blog preset compresses and converts images to WebP automatically, for free, with no signup and no watermark, entirely in your browser.

Related Guides

• File Too Large? Top 5 Reasons & Fixes
• How to Reduce Image Size Without Losing Quality
• What is an Image Compressor and How Does It Work?
• Why Won't My iPhone Photos Open on Windows?
• Convert Image Format (JPG, PNG, WebP)