Compress Images for Website — Free Online
Reduce image file size for faster page loading, better Core Web Vitals, and higher Google rankings — 100% browser-based, your images never leave your device.
Drop image here or click to upload
JPG, PNG, WebP, HEIC — max 20MB
You can also paste an image (Ctrl+V)
Why Website Image Size Directly Affects Google Rankings
Google measures page speed using Core Web Vitals — specifically LCP (Largest Contentful Paint), the time until the largest visible element on the page finishes loading. For most websites, the LCP element is the hero image or first content image. Google uses LCP as a direct ranking signal: pages with LCP under 2.5 seconds rank higher than slower pages with otherwise equal content.
Images account for 50–70% of typical web page weight. A single uncompressed 4MB hero image can push LCP above 5 seconds on mobile — dropping a site from page 1 to page 3. Compressing that same image to 200KB at quality 80 produces no visible quality difference at screen resolution (72–96 DPI) but can improve LCP by 2–4 seconds. That improvement alone can move a site from a failing Core Web Vitals score to a passing one.
Recommended Image Size for Every Web Use Case
| Image type | Max dimensions | Target size | Quality setting |
|---|---|---|---|
| Hero / banner image | 1920×1080px | < 300KB | 78–82 |
| Blog featured image | 1200×630px | < 150KB | 78–82 |
| Product photo | 1000×1000px | < 200KB | 80–85 |
| Gallery / portfolio | 1200×800px | < 200KB | 78–82 |
| Card / thumbnail | 400×300px | < 50KB | 72–78 |
| Background image | 1920×1080px | < 200KB | 70–75 |
| Logo (JPEG) | 300×100px | < 20KB | 82–85 |
| Icon / small UI | 64×64px | < 5KB | 80 |
These targets apply to JPEG output. WebP at the same quality setting produces files 25–35% smaller — so a 150KB JPEG target becomes roughly 100KB in WebP. Use quality 80 as your starting point and adjust based on the actual output size shown after compression.
JPEG vs WebP vs PNG — Which to Use on Your Website
JPEG
Best for: Photos, hero images, blog content
Pros: Universal support, smallest file for photos, works everywhere
Cons: No transparency, slight color banding at low quality
WebP
Best for: All images on modern websites
Pros: 25–35% smaller than JPEG at same quality, supports transparency, modern browsers
Cons: Not supported in very old IE/Safari (pre-2020)
PNG
Best for: Logos, icons, screenshots with text
Pros: Lossless quality, full transparency support
Cons: Large file sizes for photos — never use for full-width images
How to Compress Images for Different Website Platforms
WordPress
Upload images already compressed — WordPress generates multiple thumbnail sizes from the original, so the source file size affects all derivatives. Target under 500KB for full-size uploads. Use quality 80 for content images, 85 for featured images.
Shopify
Shopify CDN resizes images but does not heavily compress originals. Upload product photos at 2048×2048px, under 500KB, JPEG quality 82. For hero/banner images, use 1920px wide at under 300KB for best LCP scores.
Squarespace
Squarespace uses Imgix to deliver images but does not compress your originals. Upload images already under 500KB. Squarespace's editor recommends 1500px wide for full-bleed images — compress to under 200KB at that width.
Webflow
Webflow delivers images via Fastly CDN without automatic compression. Upload compressed images directly. Target under 200KB for content images and under 400KB for hero/background images.
Wix
Wix compresses images automatically but still benefits from pre-compressed uploads — smaller originals mean faster uploads and better baseline quality. Target under 500KB per image, quality 80.
Custom HTML / static site
No automatic optimization — every byte you upload is what visitors download. Compress all images before deployment. Use WebP where possible, JPEG as fallback. Serve from a CDN for global performance.
5 Image Mistakes That Kill Website Speed
❌ Uploading camera-original photos (3–10MB)
✓ Resize to the display width first, then compress. A 4000px photo displayed at 800px wastes 5× the pixels and bandwidth.
❌ Using PNG for photos
✓ PNG is lossless — a PNG photo of a sunset is 5–10× larger than a JPEG at equivalent quality. Use JPEG or WebP for all photos.
❌ Skipping compression because "the CDN handles it"
✓ CDNs cache and serve your files faster, but they do not compress the original. Upload compressed files to the CDN/CMS to save bandwidth and improve LCP.
❌ Setting quality to 100 "to keep it sharp"
✓ At screen resolution (72–96 DPI), quality 100 and quality 80 are visually identical. Quality 100 produces files 3–5× larger for zero visible benefit.
❌ Not compressing hero and above-the-fold images
✓ These images directly determine your LCP score. A 2MB hero image is the most expensive mistake on a page — it alone can cause a failing Core Web Vitals audit.
Core Web Vitals and Image Compression
Google's Core Web Vitals report in Search Console shows three scores — LCP, INP, and CLS. Images primarily affect LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift). LCP measures how quickly the biggest visible element loads. CLS measures how much the layout shifts as images load in.
To pass Core Web Vitals for LCP: compress your largest above-the-fold image to under 200KB and set explicit width and height attributes on all <img> tags. The width/height attributes prevent layout shift (CLS) by reserving space before the image loads. Both optimizations together produce the fastest improvement in Google's field data, which determines your actual ranking signal.
Your Images Never Leave Your Device
All compression runs in your browser using JavaScript. Your images are never uploaded to any server — there is no upload step. Safe for unreleased designs, client work, and confidential assets. Free with no limits, no watermarks, no account required.