🌍 Web Performance Guide
Compress Images for Your Website — PageSpeed, LCP & Core Web Vitals
Images account for 60–80% of average page weight and cause most failed Core Web Vitals scores. This guide covers the complete web image optimization stack — from manual compression to automated CDN pipelines.
Fix PageSpeed "Efficiently encode images"
Improve Largest Contentful Paint (LCP)
WebP conversion guide
Cloudflare Polish & Cloudinary
Automated pipeline with Sharp
60–80%
of average page weight is images (HTTP Archive)
2.5s
LCP target for Google "Good" rating
50–75%
typical file size reduction after compression + WebP
~1s
LCP saved per MB of image payload reduced on 3G
Quick answer: For web use: convert JPEG and PNG to WebP (25–35% smaller), serve images at the correct display size, and use lazy loading below the fold. These changes combined typically cut image payload by 50–70%. Convert images at
Convertlo — free, in-browser.
Compress Web Images Free
Browser-based, no upload. Compress then convert to WebP for the complete stack.
The LCP Problem: Why Images Decide Your Score
Largest Contentful Paint (LCP) measures how long until the biggest visible element on your page finishes rendering. For most websites, that element is an image — the hero photo, the featured product shot, the above-the-fold banner. Google counts LCP as the most important Core Web Vitals metric for search ranking.
Good (<2.5s)
Improve (2.5–4s)
Poor (>4s) — Google ranking impact
A 2 MB JPG hero image on a typical mobile 4G connection adds roughly 1 second to LCP. On 3G — still the baseline for large parts of the world — it's closer to 2 seconds. Compress that image to 280 KB WebP and you've recovered 1.5–1.8 seconds of LCP, often enough to move from the "Poor" bucket all the way to "Good."
The highest-leverage fix on almost any page: compress the hero/banner image, convert it to WebP, and add a preload hint. Three changes, often 2+ seconds of LCP improvement.
The Complete Web Image Optimization Checklist
1
Compress all images
JPEG at 75–82%, WebP at 78–84%, PNG lossless. Run every image through the compressor before it goes on your site. This alone reduces most page image weight by 50–70%.
2
Convert to WebP
WebP is 25–35% smaller than JPEG at equal quality. Convert all JPG and PNG images to WebP using the converter. 97%+ browser support — safe for production.
3
Match dimensions to display size
Don't serve a 4000px image at 800px CSS width. Resize to display size × 2 (for retina). A correctly-sized image is 4–6× smaller with identical visual quality at the displayed size.
4
Preload the LCP image
Add <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> in your document head. Tells the browser to fetch it before CSS blocks rendering.
5
Lazy load below-fold images
Add loading="lazy" to all <img> tags below the fold. Defers their download until the user scrolls — reducing initial page weight.
6
Set width and height attributes
Always set explicit width and height on every <img>. Prevents Cumulative Layout Shift (CLS) — the browser reserves space before the image loads.
Image Size Targets by Content Type
| Image Type | Recommended Format | Target File Size | Quality Setting |
|---|
| Hero / banner (above fold) | WebP | <250 KB | 80–84% |
| Blog body images | WebP | <150 KB | 75–80% |
| Thumbnail / card images | WebP | <60 KB | 68–74% |
| Product photos (e-commerce) | WebP | 150–400 KB | 83–88% |
| Background images | WebP | <300 KB | 70–78% |
| Logos (transparent) | SVG or lossless WebP | <50 KB | Lossless |
| Icons | SVG | <10 KB | — |
| OG / social share images | JPEG or PNG | <300 KB | 85% |
LCP-Optimized Image Pattern
The complete HTML pattern for a hero image that maximizes LCP performance:
<!-- In <head> — preload the LCP image before CSS blocks rendering -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> — WebP with JPEG fallback + explicit dimensions -->
<picture>
<source srcset="/hero-800.webp 800w, /hero-1600.webp 1600w"
type="image/webp" sizes="(max-width:800px) 100vw, 1600px">
<img src="/hero-1600.jpg" alt="Descriptive alt text"
width="1600" height="900"
fetchpriority="high"
decoding="async">
</picture>
Key elements: preload link (discovers the image before the HTML finishes parsing), fetchpriority="high" (tells the browser this is the most important image to download), width/height attributes (prevents CLS by reserving space), srcset (serves correctly-sized image to each screen width), WebP with JPEG fallback (WebP for modern browsers, JPEG for old iOS/IE).
Automating Image Optimization — CDN and Pipeline Options
| Solution | Approach | Cost | Best For |
|---|
| Cloudflare Polish | Edge-layer auto-compress + WebP conversion on every request | $20/mo (Pro plan) | Sites already on Cloudflare — zero code changes |
| Cloudinary | Image CDN with URL-based transforms (f_auto,q_auto) | Free tier + paid | Large product catalogs, e-commerce, dynamic image pipelines |
| Sharp (Node.js) | Build-time compression + WebP conversion in CI/CD | Free / open source | Static sites, Jamstack, Next.js, build-time asset optimization |
| ImageKit | Image CDN with smart compression + WebP auto-delivery | Free tier + paid | Teams wanting a Cloudinary alternative with simpler pricing |
| Manual (Convertlo) | Browser-based batch compression, one-time or periodic | Free | Existing image libraries, one-off optimizations, small sites |
For most teams, the right progression is: start with browser-based compression for existing assets, set up Cloudflare Polish for new uploads going forward, and add Sharp to your CI pipeline for build-time optimization. Each layer catches what the others miss.
Three PageSpeed Image Audits — and How to Fix Them
| PageSpeed Audit | Fix | Typical LCP Impact |
|---|
| "Serve images in next-gen formats" | Convert JPG/PNG to WebP. 25–35% smaller at equal quality. | High — directly reduces image load time |
| "Efficiently encode images" | Compress images at quality 75–82. Fires when >4 KB savings available. | High — especially for uncompressed sources |
| "Properly size images" | Resize images to display dimensions × 2 retina. Don't serve 4000px for 800px display. | Medium — reduces bytes, often same as compression |
| "Defer offscreen images" | Add loading="lazy" to below-fold images. | Medium — reduces initial page weight |
| "Preload Largest Contentful Paint image" | Add <link rel="preload" as="image" href="hero.webp"> to document head. | Very high — often 0.5–2s LCP improvement alone |
Frequently Asked Questions
How do I compress images for a website?
Open
convertlo.pro/compress.html, drop your images, set quality to 75–82% for JPEG or 78–84% for WebP, and download the compressed results. Then convert to WebP using the
JPG → WebP converter for an additional 25–35% reduction. The two-step workflow typically cuts total image weight by 75–85%.
What is the best image format for websites in 2025?
WebP for most images — 25–35% smaller than JPEG at equal quality, 97%+ browser support. SVG for logos and icons. JPEG for email and print. Avoid PNG for photographs (3–10× larger than JPEG without quality benefit). AVIF is emerging but tooling is immature; WebP is the safe, widely-supported choice.
How does image compression improve PageSpeed and SEO?
Smaller images load faster, directly reducing Largest Contentful Paint (LCP). Google uses LCP as a Core Web Vitals ranking signal. PageSpeed Insights flags uncompressed images under "Efficiently encode images" and "Serve images in next-gen formats" — both resolved by compression and WebP conversion. Moving from LCP "Poor" (>4s) to "Good" (<2.5s) via image optimization is achievable for most sites.
Should I use Cloudflare Polish for image optimization?
If you're already on Cloudflare, yes — it's one of the most cost-effective performance upgrades available. Polish automatically compresses images and converts them to WebP at the CDN edge, affecting every image request without any code changes. Enable it in the Cloudflare dashboard under Speed → Optimization → Polish. Requires the Pro plan ($20/month).
Should I lazy load all images on my website?
Lazy load all below-fold images with loading="lazy". Never lazy load the LCP image (usually the hero) — instead add a preload hint and fetchpriority="high". The distinction matters: lazy loading the LCP image delays the most important content and actively hurts your LCP score.
What dimensions should web images be?
Match the CSS display width × 2 for retina screens. For a 600px-wide content column, serve images at 1200px wide. For a full-width hero on a 1440px desktop, serve at 2880px wide (capped at your layout max). Use srcset to serve multiple sizes — mobile gets a smaller image, desktop gets the larger one. Never serve a 4000px image for a 400px display.
What image size should I use for a website?
Match image dimensions to display size (check your CSS). For a hero image displayed at 1200px wide, serve a 1200px or 2400px (2× for retina) image — not a 4000px original. Each additional pixel you don't need costs bandwidth. Rule of thumb: use the largest display size in your CSS × 2 for retina, then cap at 2000px for most layouts.