How to Compress Images for a Website (2026 Guide): Boost PageSpeed

CompressImage.io Team · June 18, 2026 · Updated June 24, 2026 · 9 min read

Images are the largest single contributor to page weight on the typical website, according to the HTTP Archive Web Almanac. They’re also the most common reason Google PageSpeed hands you a low score, and the most impactful thing you can fix today.

This guide covers everything: which format to use, what file size to target, how to compress images before uploading, and how to automate compression if you’re running a CMS.

Key Takeaways

Images are the biggest contributor to page weight, so compressing them is the highest-impact speed fix you can make.

Use WebP for photos (25% to 34% smaller than JPEG), SVG for logos and icons, and PNG only when you need transparency.

Aim for under 200 KB on hero images and under 100 KB on blog images, then resize to the dimensions you actually display.

Compress before you upload. CompressImage.io does it in your browser, so your files never leave your device.

Add width, height, and loading="lazy" to your <img> tags to protect your Core Web Vitals.

Why Image Compression Matters for Your Website

Compressing images is the fastest way to speed up a slow site, because images outweigh every other resource on a typical page. Slow pages don’t just frustrate visitors, they cost money and rankings. Google treats page speed as a ranking signal, and a heavy hero image is usually what drags down your score.

Google uses page speed as a ranking factor for both desktop and mobile search
Largest Contentful Paint (LCP), one of Google’s Core Web Vitals, is almost always caused by a large uncompressed hero image
Every 100ms of page load time reduces conversions by roughly 1% (Deloitte research on e-commerce)
Mobile users on slower connections are hit hardest, since a 5MB image takes about 14 seconds on a 3G connection

The good news: image compression is free, takes minutes, and typically cuts a page’s image weight by 50% to 80%.

Step 1: Choose the Right Image Format

The right format is the biggest lever you have, because picking the wrong one can make a 5x difference in file size. Photos belong in WebP or JPEG, logos and icons belong in SVG, and PNG is for graphics that need transparency. Using PNG for a photograph is the single most common mistake people make.

Format Decision Guide

For photographs (product images, hero images, blog photos): Use WebP as your primary format, JPEG as fallback

WebP is 25% to 34% smaller than JPEG at equal quality
All modern browsers support WebP (Chrome, Firefox, Safari 14+, Edge)
Use <picture> tags to serve WebP with JPEG fallback for older browsers

For logos, icons, and graphics: Use SVG if the image is a vector (from Illustrator/Figma). Use PNG if the image has transparency and can’t be SVG. Use WebP (lossless) as a smaller alternative to PNG for web.

For screenshots and UI images: Use PNG (preserves text sharpness), or WebP for smaller file size.

For animated content: Use animated WebP (30% to 50% smaller than GIF), or a silent MP4 video (5x to 10x smaller than GIF). Use GIF only for maximum compatibility.

Step 2: Know Your Target File Sizes

Aim for under 200 KB on hero images and under 100 KB on blog images before you compress anything, so you have a clear finish line. The numbers below come from Google’s PageSpeed recommendations. If your current images are 5x to 20x these targets, you’ve got plenty of room to improve without any visible quality loss.

Image Type	Target Size
Hero / banner image	< 200 KB
Product image (e-commerce)	< 150 KB
Blog post featured image	< 100 KB
Thumbnail / card image	< 30 KB
Background image	< 500 KB
Logo (raster)	< 20 KB
Logo (SVG)	< 5 KB
Icon / favicon	< 10 KB

Step 3: Compress Your Images Before Uploading

Always compress images before uploading them to your CMS or server, because plugins that compress after the fact often can’t reach your original files and only work on already-uploaded versions. Doing it up front gives you the cleanest source and the smallest result. Here’s the golden rule, then the fastest way to follow it.

The fastest way: CompressImage.io

Go to compressimage.io (or the format-specific page for your image type)
Drop your images. You can drop multiple at once for batch compression
Set quality to 80 (default). This is the sweet spot for web images
Download. Your images are ready to upload

The tool processes everything offline in your browser. Your images never leave your device.

For JPEG/WebP (photographs):

Quality setting: 75% to 85% for most web images
Quality setting: 65% to 75% for thumbnails where small file size matters more
Quality setting: 85% to 90% for images that will be zoomed or enlarged by users

For PNG (graphics/logos):

Enable lossy compression if the image has limited colours (logos, illustrations)
Maintain full quality for images with gradients or photographic content

Step 4: Resize Images to Display Dimensions

Resize your images to the dimensions you actually display, because compression alone won’t save you if the file is oversized. A 3000x2000px photograph shown at 800x533px still loads the full 3000x2000 image, so you’re paying for pixels the visitor never sees. Upload at the largest size an image will ever appear, not at your camera’s original resolution.

Practical sizes:

Full-width hero image: 1440px wide maximum (for 4K displays)
Content column image: 800px to 1200px wide
Product thumbnail: 400px to 600px wide
Sidebar image: 300px to 400px wide

Most image compressors, including ours, have a resize option. Resize first, then compress for best results.

Step 5: Use Responsive Images in Your HTML

Serve the right image size to each device, because shipping the same large file to a 4K monitor and a mobile phone wastes bandwidth on the smaller screen. Responsive image attributes let the browser pick the best size automatically. Even with perfectly sized and compressed images, srcset and <picture> are what close the last gap.

<!-- Serve different sizes based on viewport width -->
<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1440.webp 1440w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1440px"
  alt="Hero image description"
  width="1440"
  height="810"
  loading="lazy"
/>

<!-- Serve WebP with JPEG fallback for older browsers -->
<picture>
  <source srcset="hero.webp" type="image/webp" />
  <source srcset="hero.jpg" type="image/jpeg" />
  <img src="hero.jpg" alt="Hero image description" width="1440" height="810" />
</picture>

Always include width and height attributes on your <img> tags. This prevents layout shift (CLS) and is required for a good Core Web Vitals score.

Step 6: Enable Lazy Loading

Add loading="lazy" to below-the-fold images so the browser only loads them when they’re about to enter the viewport, which trims your initial page load. Images a visitor hasn’t scrolled to yet don’t need to load right away. For image-heavy pages, this one attribute typically cuts initial load time by 30% to 50%.

<!-- Hero image: load eagerly (it's above the fold) -->
<img src="hero.webp" alt="..." loading="eager" />

<!-- Other images: load lazily (they're below the fold) -->
<img src="product.webp" alt="..." loading="lazy" />

Lazy loading is now supported in all modern browsers.

Automating Image Compression (For CMS Users)

If you’re running a CMS and need ongoing compression for every image that gets uploaded, the right plugin handles it on upload so you don’t have to think about it. Pick one tool per platform and let it convert to WebP automatically. Here’s what works on the major platforms.

WordPress

ShortPixel. Compresses on upload, supports WebP conversion, AVIF. Best overall.
Imagify. Clean interface, good compression, free tier available.
Smush. Popular free option, though the free tier has limits.
TinyPNG plugin. Simple and reliable, limited free tier.

Shopify

Shopify automatically converts uploaded images to WebP for supported browsers. No additional plugin needed for basic compression.
For more control, use Crush.pics or SEO Image Optimizer from the Shopify App Store.

Webflow / Framer / Squarespace

These platforms handle some automatic optimisation, but you should still compress before uploading for best results.

Next.js / Astro / Gatsby

Use the built-in <Image> component (Next.js), which handles responsive sizing, WebP conversion, and lazy loading automatically.
Astro’s @astrojs/image integration does the same.

Checking Your PageSpeed Score

After compressing and uploading your images, test the result so you know the work paid off. The three tools below cover everything from a quick score to a frame-by-frame load timeline. Aim for 90 or higher on both mobile and desktop.

Google PageSpeed Insights (free), pagespeed.web.dev. Look for “Serve images in next-gen formats” and “Efficiently encode images” recommendations.
Google Search Console. The Core Web Vitals report shows LCP, CLS, and INP for your actual users.
WebPageTest (advanced). Shows a waterfall diagram of exactly when each image loads.

Common Mistakes to Avoid

Mistake	Fix
Uploading photos straight from camera (5MB to 15MB)	Compress to under 200KB before uploading
Using PNG for photographs	Use JPEG or WebP instead
Using JPEG for logos with transparency	Use PNG or SVG instead
Not specifying image dimensions in HTML	Always add `width` and `height` attributes
Loading all images on page load	Add `loading="lazy"` to below-fold images
Uploading the same image at multiple sizes via CSS	Use `srcset` to serve different sized files
Recompressing already-compressed JPEGs	Start from the original source file

Quick Reference Checklist

Before publishing any web page, run through this:

Images are under the target file size for their type (see table above)
Photographs are saved as WebP or JPEG (not PNG)
Logos/icons are SVG where possible, PNG otherwise
Images are sized to their display size (not original camera size)
width and height attributes are set on all <img> tags
Hero image uses loading="eager", all others use loading="lazy"
WebP with JPEG fallback is used via <picture> tags
PageSpeed Insights shows no “image encoding” warnings

Frequently Asked Questions

What is the best image format for websites?

WebP is the best all-around format for web photos, since it runs 25% to 34% smaller than JPEG at the same quality and works in every modern browser. Use SVG for logos and icons because vectors stay sharp at any size, and reserve PNG for graphics that need transparency.

How much should I compress images for web?

A quality setting of 80 is the sweet spot for most web photos, balancing small file size against visible quality. Drop to 65 to 75 for thumbnails where weight matters most, and stay around 85 to 90 for images users might zoom into. Aim for under 200 KB on hero images.

Does image compression help SEO and page speed?

Yes. Images are the largest contributor to page weight, so compressing them directly improves load time, and Google uses page speed as a ranking signal. A heavy hero image is the usual cause of a poor Largest Contentful Paint score, one of the Core Web Vitals that feed into your rankings.

What size should website images be?

Match each image to the dimensions it actually displays at, never your camera’s full resolution. A full-width hero tops out around 1440px wide for 4K displays, content images sit at 800px to 1200px, and thumbnails need only 400px to 600px. Resize first, then compress.

Do I need a plugin to compress images?

No. You can compress images for free in your browser with CompressImage.io before you upload them, which gives you the cleanest source file and the smallest result. Plugins help with ongoing automation on a CMS, but compressing up front is the more reliable habit.

Compress your web images now, free, offline, no file size limits. Or go straight to the format you need: JPEG · PNG · WebP · SVG