How to compress images for web without losing quality

Large images are the single biggest cause of slow page loads. A photo straight from a camera can be 5–10 MB — on the web, the same image should be under 200 KB. This guide shows you how to get there without visible quality loss.

Why image size matters

Google's Core Web Vitals use Largest Contentful Paint (LCP) as a ranking signal. A hero image that takes 3 seconds to load tanks your LCP score. Compressed images also save bandwidth costs for both you and your visitors — especially on mobile.

• A 1 MB image can often be compressed to under 100 KB with no visible difference.
• Every 100 ms of page speed delay reduces conversions by ~1% (Deloitte research).
• Google rewards faster pages with better rankings in mobile search.

Choosing the right format

The format you choose has more impact than compression level alone:

• WebP — Best choice for the web. 25–35% smaller than JPEG at the same quality. Supported in all modern browsers.
• JPEG — Good for photos. Lossy compression, very widely supported including older browsers and email clients.
• PNG — Best for graphics, logos, and screenshots that need transparency. Lossless but larger file sizes.
• SVG — Best for icons and illustrations. Resolution-independent and tiny file size for vector graphics.

Rule of thumb: Use WebP for photos on the web. Fall back to JPEG for older system compatibility. Use PNG only when you need transparency or lossless quality.

What quality level to use

For JPEG and WebP, quality is a slider from 0 (worst) to 100 (original). The sweet spot is:

• 70–80% for photos on blog posts and landing pages — usually invisible loss.
• 80–85% for product images where detail matters (e-commerce).
• 60–70% for thumbnails and preview images.

Always compare the compressed image at 100% zoom before publishing. Compression artefacts appear mostly in areas with sharp edges and gradients.

How to compress images in your browser

1. Open ToolBite's image compressor — no upload to a server required.
2. Drop your image onto the tool or click to select a file (JPEG or PNG).
3. Adjust the quality slider — start at 80 and move down until you see the file size you want.
4. Choose output format: JPEG (wider compatibility) or WebP (smaller size).
5. Click Download to save the compressed file.

Since everything runs in your browser, your images never leave your device. This is especially important for client work, sensitive product photos, or any image that hasn't been published yet.

Serving images responsively (bonus)

After compression, consider serving different sizes for different screens using the HTML srcset attribute:

<img
  src="photo-800w.jpg"
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Description">

This ensures mobile visitors download a smaller image, saving data and improving LCP on mobile.

Quick checklist before publishing

• Image is under 200 KB (under 100 KB for thumbnails).
• Format is WebP or JPEG (not PNG unless transparency is needed).
• Quality tested at 70–85% — no visible artefacts at full zoom.
• Alt text is descriptive (helps SEO and accessibility).
• Width and height attributes are set on the <img> tag (prevents layout shift).