Images Are Probably Why Your Website Is Slow — Here's How to Fix It

If there's one single most common cause of a slow website, across pretty much every project we've ever audited, it's images — specifically, ones uploaded straight from a phone or camera with no compression at all, often several megabytes each, and displayed at a fraction of their actual size.

Why this happens so often

A photo from a modern phone is frequently 3000+ pixels wide. If it's displayed on a site at 800 pixels, the visitor's browser still downloads the full 3000-pixel file and shrinks it down — all that extra data serves no purpose except making the page slower.

"Optimised" really just means three things: the right format (WebP or AVIF instead of raw JPEG or PNG, usually 25-50% smaller at the same visual quality), the right dimensions (resized to roughly what it's actually displayed at, not the camera's native resolution), and lazy-loading, so images below the fold don't load until someone actually scrolls near them.

A minute-long check you can do yourself

Open any page, right-click an image, and compare its file size and dimensions against how large it's actually shown on screen. A hero background that's a 4MB, 4000-pixel-wide JPEG displayed at 1200 pixels wide is a common, very fixable problem.

Free tools that fix this without touching any code: TinyPNG or Squoosh.app — drag an image in, get a properly compressed one back in seconds.

The fix that actually sticks, though, is structural. A modern framework's built-in image component — Next.js's Image component, for example — handles resizing, format conversion, and lazy-loading automatically for every image going forward, so it's not a cleanup job you have to repeat every time new content gets added.