Skip to content

My Images Are Huge and Slowing Down My Site, How Do I Fix Them?

6 min read

If your site feels slow and you are wondering why, the most likely culprit is your images. Resize each image to the size it actually displays at, compress it, and serve a modern format like WebP. A hero image should weigh tens of kilobytes, not five megabytes. That one change usually cuts load time more than any code you could write.

Why this happens

You dragged a photo straight off your phone or a stock site and dropped it into the app. That file is often 3000 to 6000 pixels wide and several megabytes, sized for print, not for a 600 pixel slot on a web page. The browser downloads the whole thing and then shrinks it on screen, so the visitor pays the full download cost for pixels they never see.

An AI agent building "add a hero image" wires up the <img> tag and moves on. It uses the file you gave it. It does not resize it, compress it, or convert it, because you did not ask, and on your fast laptop with a cached copy it looks instant. Your first real user on a phone and mobile data sees a blank space for several seconds.

How to check

  1. Open your site, then open the browser DevTools (right-click, Inspect) and go to the Network tab. Reload the page.
  2. Sort the requests by Size. Anything over a few hundred kilobytes is a problem, and anything over a megabyte is a serious one. Images will usually sit at the top.
  3. Click an image row and check its dimensions against how big it appears on screen. A 4000 pixel wide file shown in a 500 pixel box is 8x too large in each direction, roughly 60x too much data.
  4. For a quick verdict, run Google PageSpeed Insights against your URL. "Properly size images" and "Serve images in next-gen formats" flags confirm this is your issue.

The fix

  1. Resize to the real display size. Decide the widest a given image ever appears (say 1200 pixels for a full-width hero) and export it at roughly twice that for sharp screens. Nothing needs to be 5000 pixels wide.
  2. Compress it. Run each image through Squoosh or TinyPNG. At around 75 to 80 percent quality most photos look identical and drop 70 percent or more of their weight.
  3. Convert to WebP (or AVIF). These formats are far smaller than JPEG or PNG at the same quality and every current browser supports them. Squoosh does the conversion in one click.
  4. Let your framework do it automatically where you can. Next.js has a <Image> component that resizes, compresses, and serves modern formats for you. Read the image guide in your version's docs before switching, then swap plain <img> tags for it. On Vercel, Netlify, or Cloudinary, image optimization can be turned on at the platform level.
  5. Re-check the Network tab. Your total page weight should drop sharply. Aim for a full page under one to two megabytes.

The trap to avoid

Do not just set width and height in CSS and call it done. That changes how big the image looks, but the browser still downloads the original multi-megabyte file and shrinks it on screen. The bytes are what make you slow, not the pixels on display. You have to shrink the actual file, not just style the box it sits in.

Where this fits

Slow first impressions cost you beta users before they ever see what you built, and images are the fastest thing to fix. If you are not sure which pages are heavy, the free Readiness Report checks your real site and flags the oversized assets and the pages they drag down. When you want the whole performance pass handled in order, resizing, formats, and the code around them, that is what the Finishing Pass is for. For the bigger picture, see what to fix first when your Lighthouse score is bad and how fast your app actually needs to be for beta.