How to Fix Slow Images on Your Website

Images are almost always the heaviest thing on a page, and they are almost always the easiest win. A single uncompressed hero photo can weigh more than every script and stylesheet combined. Image optimization is mechanical work. Once you know which files are heavy, the fix is a short checklist.

This guide walks through the five steps we run on every site we audit. Work through them in order, then move on to render blocking CSS and heavy JavaScript once your images are under control. For a broader picture of how these pieces fit together, see our complete guide to page loading speed.

Step 1: Find the heaviest images

You cannot fix what you cannot see. Start by making a list of the images that actually matter. There are two fast ways to do this.

The manual route, open your page in Chrome, hit the Network tab, filter by Img, and sort by size. The heaviest files rise to the top. Write down anything over a couple hundred kilobytes.

The automated route, paste your URL into our Website Optimizer. We flag every image above the threshold, show its exact weight, and tell you whether it is already using a modern format or responsive markup. For multi-page sites, our Heavy Asset Finder crawls the whole sitemap and returns one consolidated list.

Step 2: Compress your existing images

Before changing formats or markup, squeeze the files you already have. Most images ship to production at roughly the quality they left the designer's computer, which is usually far higher than a web browser needs.

Drop each heavy image into Squoosh or TinyPNG and pull the quality slider down until you see a visible difference, then back off a step. For JPEGs, quality around 75 is usually safe. For PNGs of photographic content, convert to JPEG or WebP instead of trying to compress the PNG itself.

If you have hundreds of images, run the batch through Sharp or an equivalent CLI. A single script can reprocess an entire folder in minutes.

Step 3: Convert to WebP or AVIF

WebP and AVIF consistently produce smaller files than JPEG or PNG at the same visible quality. Browser support is now universal per caniuse.com, so there is little reason to serve the older formats for photographic content.

Re-export your compressed images as WebP for a safe, widely supported win, or AVIF if you want the smallest files and do not mind slightly slower encoding. Most image CDNs do this conversion on the fly, so if you are using Cloudinary, Imgix, or a similar service, switching formats is often a single query parameter.

Use the picture element when you want to supply an AVIF version with a WebP fallback for older browsers, though in practice a plain img pointing at a WebP file works everywhere that matters.

Step 4: Serve responsive sizes with srcset

A phone does not need the same 2000 pixel wide image as a 4K monitor. Responsive images let the browser pick the right file for the screen.

Generate at least three widths of each image, something like 480, 960, and 1920 pixels wide. Then reference them with srcset and sizes so the browser does the math for you.

<img
  src="/img/hero-960.webp"
  srcset="/img/hero-480.webp 480w, /img/hero-960.webp 960w, /img/hero-1920.webp 1920w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 1920px"
  alt="..."
/>

If you use a CMS or framework that supports responsive images natively, such as Next.js or WordPress, turn that feature on and let it handle the widths for you.

Step 5: Lazy load offscreen images

Most users never scroll to the bottom of your page. There is no reason to download footer images, testimonial photos, or long article illustrations before the visitor shows any interest in them.

Add the native loading attribute to every image below the fold:

<img src="/img/testimonial.webp" loading="lazy" alt="..." />

One exception, never lazy load your hero image. It is almost always the Largest Contentful Paint element, and deferring it delays your main performance metric.

Once you finish these five steps, run your URL through our analyzer again. The heavy image list should be short, and your total page weight should drop by a large margin. If any images are still flagged, work through the steps again for those specific files.