How to Reduce Image File Size: Every Method Explained

Method 1: Switch to a Modern Image Format (Highest Impact)

The single biggest file size reduction comes from switching image format. JPEG was designed in 1992. PNG was designed in 1996. Both use compression algorithms that modern formats vastly outperform.

Converting your existing JPEG and PNG images to AVIF delivers the largest file size reduction of any single technique. Use our free converter to compress images to AVIF in seconds.

Method 2: Adjust Compression Quality

All lossy formats (JPEG, WebP, AVIF) have a quality setting that controls the trade-off between file size and visual fidelity. Many developers export images at default quality settings (typically quality 80 to 90) without considering that lower settings are often indistinguishable on screen.

Method 3: Resize Images to Their Display Size

Serving a 2400px wide image for a 400px thumbnail wastes 96% of the pixels. The browser downloads the full image and then scales it down. Always generate images at or near the size they will be displayed.

Use the HTML srcset attribute to serve different sizes to different screen widths:

<img
  srcset="image-400.avif 400w,
          image-800.avif 800w,
          image-1200.avif 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  src="image-800.avif"
  alt="Description"
  width="800" height="600"
>

A mobile device receives the 400px image at 40 KB instead of the desktop 1200px image at 120 KB. That is a 67% reduction for mobile visitors from resizing alone.

Method 4: Remove Image Metadata

JPEG files store EXIF metadata: camera settings, GPS coordinates, copyright information, and editing history. This metadata is invisible to visitors but can add 20 to 100 KB to every image. Stripping EXIF data during compression removes this overhead.

Our converter strips EXIF metadata by default. If you need to preserve metadata (for professional photography workflows or copyright enforcement), keep original files and only strip metadata from web delivery copies.

Method 5: Lazy Load Images

Lazy loading does not reduce file sizes but it reduces the bytes transferred on initial page load. Images below the fold only download when the user scrolls near them. Add loading="lazy" to all below-the-fold images:

<img src="image.avif" alt="Description"
     width="800" height="600"
     loading="lazy">

Do not add loading="lazy" to your hero image or any image visible in the initial viewport. Lazy loading the LCP image delays it and worsens your Core Web Vitals score.

Method 6: Use a CDN for Image Delivery

A CDN (Content Delivery Network) serves images from edge nodes close to each visitor, reducing latency. Major image CDNs like Cloudflare Images, Cloudinary, and imgix also auto-convert images to AVIF or WebP based on browser support.

With Cloudflare Images, you upload a single source image and serve it via a URL like imagedelivery.net/id/w=800,format=auto. The CDN serves AVIF to browsers that support it, WebP to others, and JPEG as a final fallback.