Images account for over 50% of average page weight on the web. That means a slow website is almost always an image problem. Compressing images correctly is the single highest-ROI action you can take for web performance, Core Web Vitals scores, and — by extension — SEO rankings.
Google's Core Web Vitals use Largest Contentful Paint (LCP) as a primary ranking signal. LCP measures how long it takes for the main image on the page to appear. An uncompressed 3 MB hero image can single-handedly cause LCP >4 seconds — classified as "Poor" — costing you rankings.
| Format | Best Use Case | Browser Support | vs JPEG File Size |
|---|---|---|---|
| WebP | All web images (photos + graphics) | 97%+ of browsers | 25–34% smaller |
| AVIF | Photos, high-fidelity images | ~85% (no IE/Safari 15) | 40–50% smaller |
| JPEG | Photos (fallback) | Universal | Baseline |
| PNG | Logos, screenshots, transparency | Universal | Often 3–5× larger than JPEG |
| SVG | Icons, logos, illustrations | Universal | Resolution-independent |
| GIF | Avoid — use WebP animated or video | Avoid | Up to 10× larger than WebP |
<picture> with AVIF → WebP → JPEG fallback. This serves the best format each browser supports without sacrificing compatibility.
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="...">
</picture>
| Image Type | Max Width | Target Size (WebP) | Target Size (JPEG) |
|---|---|---|---|
| Hero / banner | 1920 px | <150 KB | <200 KB |
| Blog post featured image | 1200 px | <80 KB | <120 KB |
| Product image (e-commerce) | 800 px | <60 KB | <100 KB |
| Thumbnail / card image | 400 px | <20 KB | <35 KB |
| Avatar / profile photo | 200 px | <10 KB | <15 KB |
| Background (full viewport) | 1440 px | <100 KB | <150 KB |
Never serve a 4000 px wide image in a 800 px column. Resize to the maximum display width first. If you're serving retina/HiDPI, use 2× the CSS display size — so a 400 px column gets a 800 px image, then compress heavily.
For maximum privacy and speed, use ImgMin — all processing happens in your browser. Drag up to 10 images, compress, download as a ZIP. No uploads, no limits, no account needed.
For server-side workflows (CI/CD, CMS), tools like Sharp (Node.js), Pillow (Python), or cwebp (CLI) are excellent options for automation.
Add loading="lazy" to all images below the fold. This defers loading until the user scrolls near the image, saving bandwidth and improving initial page load time significantly.
Always specify width and height attributes on your <img> tags. This reserves space in the layout and prevents Cumulative Layout Shift (CLS) — another Core Web Vitals metric that affects SEO.
If you're on Cloudflare, Vercel, or AWS CloudFront, enable automatic image optimization. These services can serve WebP to modern browsers and cache optimized versions at edge nodes worldwide — reducing latency significantly.
add_image_size() calls to match actual display sizes_800x.jpg suffix to serve correctly sized imagesWebP is the best default for 2026 — 25–34% smaller than JPEG at equivalent quality, supported by 97%+ of browsers. Use AVIF for even better compression if your audience is on modern Chrome or Firefox. Keep JPEG/PNG as fallbacks.
Hero images: under 200 KB. Content images: under 100 KB. Thumbnails: under 30 KB. Background images: under 150 KB. These are WebP/JPEG targets — your exact threshold depends on image complexity.
Yes, directly. Google uses Core Web Vitals (LCP, CLS) as ranking signals. Large uncompressed images are the leading cause of slow LCP scores. Compressing images improves page speed, reduces bounce rate, and can meaningfully lift search rankings — especially on mobile.
Batch compress up to 10 images at once. No upload, no account, no limits.
Compress Images Now →Last updated: April 2026. Browser support percentages sourced from caniuse.com.