How to Compress Images for a Website Without Losing Quality

Why image compression matters for your website

Images are the single largest contributor to page weight on most websites. According to HTTP Archive, images account for over 40% of the average web page's total size. A page that takes 4 seconds to load loses roughly half its visitors before they see your content — and Google's Core Web Vitals penalize slow pages directly in search rankings.

The good news: image compression is one of the highest-leverage optimizations you can make. Compressing images properly can cut page load time by 30–60% with no change to your content, hosting, or code.

The three variables of image compression

Every image compression decision involves three variables:

1. File format — the container that determines what compression algorithm is used. JPEG, PNG, WebP, and AVIF all handle different types of content at different quality levels.

2. Quality setting — the degree of lossy compression applied. Quality 80 typically produces files that are 60–70% smaller than uncompressed, with differences invisible to most viewers. Quality 50 produces very small files with visible degradation.

3. Dimensions — the pixel resolution of the image. Serving a 4000×3000 photo in a 400×300 container is wasteful — the browser downloads 10x more data than it displays. Always resize to the display dimensions before compressing.

Which format to use

JPEG — Use for photographs and images with continuous color gradients. JPEG's lossy compression handles complex photographic content extremely efficiently. It does not support transparency.

PNG — Use for graphics, logos, icons, and screenshots with flat colors, text, or transparency. PNG uses lossless compression, so file sizes are larger than JPEG but there's no quality loss. Never use PNG for photographs — the files will be enormous.

WebP — Use for everything, whenever you can. WebP was designed by Google specifically for web delivery. It provides:

Browser support for WebP is now universal — Chrome, Firefox, Safari, Edge, and all major mobile browsers support it. There's no reason not to use WebP in 2026.

AVIF — The next-generation format, offering 30–50% better compression than WebP. Browser support is not yet as universal, so use WebP as your primary target and AVIF as an enhancement for supported browsers.

The right quality settings

For JPEG:

For WebP:

For PNG: PNG is lossless, so "quality" isn't a setting — only file size optimization (removing metadata, optimizing the compression level) applies.

Step-by-step: compressing images for your website

Step 1 — Start with correct dimensions. Before compressing, make sure the image is sized to its display dimensions. If an image displays at 800×600 on your site, save it at 800×600 (or 1600×1200 for 2x displays). Never upload a 6000×4000 original and rely on CSS to resize it.

Step 2 — Choose the right format. Photo? Use WebP (with JPEG fallback). Logo or icon? Use SVG if possible, PNG if not. Screenshot? WebP or PNG. Animation? WebP or MP4 video.

Step 3 — Compress with quality 80. For WebP, quality 80 is the standard starting point. Use a tool like SammaPix, which compresses entirely in your browser with no file size limit.

Step 4 — Check the result visually. Look at the compressed image at 100% zoom. If you see blocking artifacts, color banding, or blurring that bothers you, increase quality to 85. If the image looks fine, you're done.

Step 5 — Check the file size. As a rule of thumb:

If you're significantly over these targets, reduce quality or dimensions.

Step 6 — Add correct alt text. Every image on your site needs an alt attribute. For decorative images, use an empty alt. For informative images, describe what's in the image. This affects both accessibility and SEO.

Tools for compressing images for the web

SammaPix — Browser-based compression and WebP conversion. No file size limits, images never leave your browser, includes AI-powered SEO renaming. Free for individual use.

Squoosh — Google's open-source image compression tool. Excellent for experimenting with different codecs and quality settings side by side. Slower than SammaPix for batch processing.

ImageOptim — macOS desktop app for PNG and JPEG optimization. Great lossless PNG compression using multiple algorithms.

Sharp — Node.js image processing library for programmatic compression in build pipelines. If you're running a large site, integrating Sharp into your build process is the right long-term solution.

Lazy loading: the other half of image performance

Compression reduces the size of each image. Lazy loading reduces how many images are downloaded on initial page load. Both are necessary.

The HTML attribute is simple:

```html

<img src="photo.webp" alt="..." loading="lazy" width="800" height="600">

```

Always include explicit width and height to prevent layout shift (CLS), which affects both user experience and Core Web Vitals scores.

Common mistakes to avoid

Uploading originals and scaling with CSS. This downloads 10–100x more data than necessary. Always resize before uploading.

Using PNG for photos. A JPEG photograph at quality 80 is 5–20x smaller than the same image in PNG. The file size difference is enormous.

Setting quality to 100. There's no perceptible quality difference between 85 and 100, but file sizes double or triple. Quality 80–85 is the professional standard.

Forgetting WebP conversion. If your workflow produces JPEG output in 2026, you're leaving 30% file size savings on the table.

No lazy loading. If your site loads all images on page load — including images below the fold — you're wasting bandwidth and hurting Core Web Vitals.

FAQ

Does compressing images affect SEO?

Yes — indirectly but significantly. Page speed is a confirmed Google ranking factor. Images are the primary contributor to page weight. Compressed images load faster, improving Core Web Vitals (LCP in particular), which directly affects search rankings. Additionally, properly named images with descriptive filenames and alt text help with Google Image Search rankings.

What's the difference between lossy and lossless compression?

Lossy compression (JPEG, WebP lossy) permanently removes some image data to achieve smaller file sizes. The data that's removed is chosen to minimize visible quality loss, but at high compression levels the artifacts become visible. Lossless compression (PNG, WebP lossless) reduces file size without removing any data — the original can be perfectly reconstructed. Lossless is always larger but preserves every pixel.

Should I compress images before or after uploading to my CMS?

Before uploading, whenever possible. Many CMS platforms (including WordPress with plugins, Shopify, and Squarespace) compress images on upload — but they often apply their own quality settings that may not match your targets. Pre-compressing gives you exact control. It also reduces storage requirements on your hosting plan.