Skip to content

How to Compress Images for Web

Complete guide to making images smaller without losing quality. Improve page speed, Core Web Vitals, and user experience.

Updated PixelConvertor

Why image compression matters for the web

Images typically make up 50-65% of a web page's total weight. Unoptimized images slow page loads and hurt Core Web Vitals scores (LCP in particular), which raises bounce rates and lowers conversions. Google uses page speed as a ranking factor, so image optimization also affects your SEO.

Most images can lose 40-70% of their file size without any visible drop in quality, just by using the right format and compression settings.

Step 1: Choose the right format

Each format has a different job:

  • WebP is the best all-around choice for the web. More than 95% of browsers support it, and files are typically 25-35% smaller than JPG and 26% smaller than PNG.
  • AVIF is the newest format and compresses best, at 20-30% smaller than WebP. Chrome, Firefox and Edge support it, and Safari support is improving.
  • JPG is for when you need universal compatibility, such as legacy systems or email attachments. It has no transparency support.
  • PNG is for images that need transparency, sharp edges or text. Lossless PNG is much larger than lossy formats, so compress PNGs aggressively or convert them to WebP.

If you're not sure which format suits a particular image, use our Image Format Advisor. It analyzes the image and suggests a format and quality setting.

Step 2: Compress with our tool

Open the compressor for your image format:

The tools run entirely in your browser, and your images never leave your device.

  1. Upload your image (or drag and drop)
  2. Adjust the quality slider if needed (the default usually works well)
  3. Compare the before/after preview
  4. Download the compressed file

Step 3: Check quality vs. size tradeoff

After compressing, check the result in three ways. First, zoom in to 100% and look for artifacts around edges, text and fine details; if the image looks clean, the quality setting is fine. Then compare the compressed size with the original: for photos at quality 75-85, a 50-70% reduction is typical. Finally, think about where the image will appear. A social media thumbnail can take more compression than a product photo on an e-commerce site, so set the quality to match.

If the file is still too large, resize the image before or after compressing it. Displaying a 4000px photo at 800px wastes bandwidth.

Step 4: Implement lazy loading and responsive images

How you serve images matters as much as how you compress them.

For lazy loading, add loading="lazy" to <img> tags for images below the fold. The browser then waits to load them until the user scrolls near them, which reduces the initial page weight.

For responsive images, use <picture> elements or srcset attributes to send an image sized for each screen width. A mobile device with a 400px-wide viewport gains nothing from a 2400px image.

Serve compressed images through a CDN with proper cache headers, so returning visitors don't download them again.

Add <link rel="preload"> for above-the-fold images (especially the LCP image) so the browser starts fetching them right away.

Tools you'll need

Use the tools below to compress and optimize your web images:

Frequently Asked Questions

What's a good file size for web images?

For most web images, aim for under 200 KB for standard content images and under 100 KB for thumbnails and icons. Hero images and large banners can be up to 500 KB if they're the dominant visual element. Using modern formats like WebP or AVIF, most photos can be kept well under these limits without visible quality loss.

Should I use WebP or AVIF?

AVIF offers better compression (typically 20-30% smaller than WebP at the same quality) but has slightly less browser support. WebP is supported by 95%+ of browsers and is the safest modern choice. For maximum savings, serve AVIF with a WebP fallback. Our format advisor tool analyzes your image and recommends the best format automatically.

How much can I compress without losing quality?

For JPG, quality levels between 75-85 typically produce files that are visually identical to the original while being 50-70% smaller. For WebP and AVIF, quality 70-80 achieves similar results. The threshold depends on the image content: photos with gradients and solid areas compress better than those with fine text and sharp edges.

What resolution should web images be?

For responsive web design, images should match their display size on screen. A common approach is to serve images at 1x and 2x resolutions for high-DPI screens. Most content images work well at 800-1200px wide, thumbnails at 200-400px, and hero images at 1600-2400px. Always check the actual container width before deciding on resolution.