Image Compression for the Web: Formats, Tools, and Best Practices

Images account for roughly half of the total bytes transferred on the average web page. A single unoptimized hero image can be larger than an entire page's HTML, CSS, and JavaScript combined. When images are too large, pages load slowly, users bounce, and Core Web Vitals scores suffer — directly impacting your search rankings. The good news is that modern image compression has come a long way, and the tools available today make it straightforward to deliver sharp images at a fraction of the original file size.

This guide covers everything you need to know about image compression for the web: how compression algorithms work, when to use which format, how to implement responsive images, and the practical techniques that will make your site faster without sacrificing visual quality.

Lossy vs. Lossless Compression

All image compression falls into one of two categories, and understanding the distinction is fundamental to making the right choices for your images:

Lossy Compression

Lossy compression permanently removes image data that the algorithm determines is least perceptible to the human eye. The result is a significantly smaller file, but the original data cannot be perfectly reconstructed. JPEG is the classic example — it uses Discrete Cosine Transform (DCT) to discard high-frequency detail that our visual system is least sensitive to.

The key parameter is the quality setting, typically expressed as a number from 0 to 100. For most photographs, a quality of 75–85 produces files that are 60–80% smaller than the original with no visible difference at normal viewing distances. Below quality 50, compression artifacts — blocking, banding, and color shifts — become noticeable.

Lossless Compression

Lossless compression reduces file size without discarding any data. The decompressed image is bit-for-bit identical to the original. PNG uses lossless compression with DEFLATE (the same algorithm behind gzip). Lossless compression ratios are more modest — typically 20–50% reduction — but the quality tradeoff is zero.

Use lossless compression for images where every pixel matters: screenshots, diagrams, text overlays, logos with sharp edges, and any image that will be edited further. Use lossy compression for photographs and complex images where slight quality loss is imperceptible and the file size savings are substantial.

Image Formats Compared

Choosing the right format is the single most impactful decision you can make for image optimization. Here is how the major web formats compare:

JPEG (Joint Photographic Experts Group)

Type: Lossy only
Best for: Photographs, complex gradients, images with millions of colors
Limitations: No transparency support, no animation, visible artifacts at low quality
Browser support: Universal

JPEG has been the workhorse of web images since the 1990s. It excels at compressing photographs but struggles with sharp edges, text, and flat color areas — these produce visible ringing artifacts. For photographic content with no transparency, JPEG at quality 80 remains a solid choice.

PNG (Portable Network Graphics)

Type: Lossless
Best for: Screenshots, diagrams, logos, images with text, images requiring transparency
Limitations: Much larger file sizes than JPEG for photographs
Browser support: Universal

PNG supports full alpha transparency and produces razor-sharp output for graphics and text. However, a PNG photograph can easily be 5–10× larger than an equivalent JPEG. Always use PNG for graphics; never use it for photographs unless you specifically need lossless quality.

WebP

Type: Both lossy and lossless
Best for: General-purpose web images — an excellent replacement for both JPEG and PNG
Limitations: Slightly less efficient than AVIF for photographic content
Browser support: All modern browsers (Chrome, Firefox, Safari 14+, Edge)

Developed by Google, WebP typically achieves 25–35% smaller file sizes than JPEG at equivalent quality, and lossless WebP is about 26% smaller than PNG. WebP also supports transparency and animation, making it a versatile single-format solution. With Safari adding support in 2020, WebP is now safe to use as the primary format for most projects.

AVIF (AV1 Image File Format)

Type: Both lossy and lossless
Best for: Maximum compression of photographs and complex images
Limitations: Slower encoding, limited support in older browsers
Browser support: Chrome 85+, Firefox 93+, Safari 16.4+

AVIF is derived from the AV1 video codec and delivers the best compression ratios of any current web image format — typically 40–50% smaller than JPEG at the same visual quality. The trade-off is that encoding is significantly slower (10–100× compared to JPEG), which makes it less suitable for real-time processing but excellent for static assets optimized at build time.

Implementing Responsive Images

Serving a single 2400px-wide image to every device is wasteful. A user on a 375px-wide phone screen does not need — and should not download — a 2MB desktop image. HTML provides two powerful tools for serving appropriately sized images:

The srcset Attribute

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="A descriptive alt text"
>

The browser evaluates the sizes attribute to determine how wide the image will be displayed, then selects the most appropriate source from srcset. This ensures mobile users download a small image while desktop users get a sharp high-resolution version.

The picture Element for Format Negotiation

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Fallback for older browsers">
</picture>

The <picture> element lets you provide multiple formats and the browser will use the first one it supports. This is the recommended approach for adopting modern formats like AVIF and WebP while maintaining backward compatibility.

Lazy Loading

Images below the fold should not block the initial page load. Native lazy loading defers the download until the image is about to enter the viewport:

<img src="photo.jpg" loading="lazy" alt="Description">

The loading="lazy" attribute is supported in all modern browsers. For images above the fold — your hero image, logo, and any content visible without scrolling — do not use lazy loading, as it would delay their appearance and hurt your Largest Contentful Paint (LCP) score.

Tip: Combine loading="lazy" with explicit width and height attributes (or CSS aspect-ratio) to prevent layout shift as images load. This directly improves your Cumulative Layout Shift (CLS) score.

Impact on Core Web Vitals

Image optimization directly affects two of the three Core Web Vitals that Google uses for search ranking:

Largest Contentful Paint (LCP) — Measures when the largest visible element finishes rendering. Hero images are often the LCP element. Reducing their file size, using modern formats, and preloading them with <link rel="preload"> can dramatically improve LCP.
Cumulative Layout Shift (CLS) — Measures unexpected layout movement. Images without explicit dimensions cause layout shift as they load. Always specify width and height or use CSS aspect-ratio.

A practical checklist for image-related Core Web Vitals improvements:

Serve images in AVIF or WebP with JPEG fallback
Use responsive images with srcset and sizes
Lazy load below-the-fold images
Preload the LCP image: <link rel="preload" as="image" href="hero.webp">
Set explicit dimensions on all <img> elements
Compress to quality 75–85 for lossy formats
Use a CDN with automatic format negotiation if possible

Compress your images instantly — supports JPEG, PNG, and WebP with adjustable quality. 100% client-side processing.

Open Image Compressor →

Build-Time vs. Runtime Optimization

There are two main approaches to optimizing images, and the best strategy often combines both:

Build-time optimization processes images during your build step (e.g., with tools like Sharp, Squoosh CLI, or imagemin). This is ideal for static assets — you can afford slower AVIF encoding and generate multiple sizes and formats ahead of time. Build-time optimization produces the best results because there are no time constraints on the compression algorithm.

Runtime optimization uses an image CDN or service (like Cloudinary, imgix, or Cloudflare Images) that transforms images on-the-fly based on the requesting device. The CDN detects the browser's format support via the Accept header and serves the optimal format automatically. This is excellent for user-uploaded content where you cannot predict dimensions in advance.

For a typical website, use build-time optimization for your own assets (logos, illustrations, hero images) and runtime optimization for dynamic or user-generated content.

Conclusion

Image optimization is not a one-time task — it is an ongoing practice that should be part of your development workflow. The combination of modern formats (WebP, AVIF), responsive image techniques (srcset, <picture>), lazy loading, and appropriate compression quality settings can reduce total image weight by 60–80% without any visible quality loss. That translates directly into faster page loads, better user experience, higher search rankings, and lower bandwidth costs.

Need to quickly compress images for your site? Our Image Compressor handles everything in your browser — drop your images in, adjust the quality slider, and download optimized files instantly. No uploads, no waiting, no privacy concerns.