How to Compress Images for the Web — A Complete Guide

Why Image Size Matters for the Web

Images account for roughly 50% of the average web page's total weight. A single unoptimized photograph can be 3–8 MB — larger than the rest of the page combined. The consequence is slower load times, higher bounce rates, worse search rankings, and increased hosting costs.

Google's Core Web Vitals explicitly measure Largest Contentful Paint (LCP), which is often an image. Pages that load their hero image in under 2.5 seconds rank better; pages that take 4+ seconds get penalized. Image compression is one of the highest-leverage SEO and performance optimizations you can make.

Lossy vs Lossless Compression

These are two fundamentally different approaches:

• Lossy compression discards visual information that the human eye is unlikely to notice. JPEG and WebP (lossy mode) use this approach. At 80–85% quality, the difference from the original is nearly invisible, but the file can be 60–80% smaller.
• Lossless compression reduces file size without losing any data. PNG and WebP (lossless mode) use this approach. Savings are smaller — typically 10–30% — but the image is bit-for-bit identical when decoded.

For photographs on the web, lossy compression is almost always the right choice. For UI assets with sharp edges and transparency (logos, icons), lossless is safer.

Practical Compression Methods

1. Browser-Based Compressor

FileKit Image Compressor lets you drop images, adjust quality, optionally resize dimensions, and convert to a more efficient format (WebP) — all in your browser. You see the file size before and after, so you can dial in the exact tradeoff you want.

2. Build-Time Optimization

For websites and apps, compress images during the build step:

• Sharp (Node.js) — fast, supports JPEG/PNG/WebP/AVIF, commonly used in Next.js and Astro projects.
• Squoosh CLI — Google's compression tool with excellent defaults and format support.
• imagemin — plugin-based, works with webpack, Rollup, and Vite.

3. CDN-Level Optimization

Services like Cloudflare Image Resizing, Imgix, and Cloudinary can resize, compress, and format-convert images on the fly at the CDN edge. The browser sends an Accept header declaring WebP/AVIF support, and the CDN serves the optimal format automatically.

Choosing the Right Quality Level

Resize Before Compressing

Compression and resizing are complementary but different operations. If your source image is 4000 × 3000 pixels but it displays at 800 × 600 on screen, you are shipping 25× more pixels than needed. Resize to the display dimensions (or 2× for Retina screens) first, then compress. This alone can reduce file size by 80%+.

Format Selection Cheat Sheet

• Photograph, modern browsers: WebP at 80%. If you can afford slow encoding, AVIF at 70% is even smaller.
• Photograph, maximum compatibility: JPEG at 85%.
• Screenshot or UI: PNG (lossless, handles text and hard edges cleanly).
• Simple graphic or icon: SVG (vector, infinitely scalable, tiny file size).
• Animated content: WebP or MP4 — avoid GIF, which is enormous.

Performance Checklist

• All images have explicit width and height attributes (prevents layout shift).
• Hero image uses fetchpriority="high" and loading="eager".
• Below-the-fold images use loading="lazy".
• Images are served in WebP or AVIF where browser support exists.
• No image is wider than 2× its rendered display size.
• Total image weight per page is under 500 KB for most content pages.