When a page is slow to open, the first suspect is usually the hosting. The cause is almost always closer to home: the photos. A single image uploaded straight from a phone can weigh more than the rest of the page combined.
Here is why it happens, how much lighter a photo can get without anyone noticing, what lazy loading is, and how to check your own website in five minutes.
Where an 8 MB photo comes from
A current phone takes photos of 12 megapixels or more: about 4,000 by 3,000 pixels. Saved at high quality, that photo easily weighs between 3 and 8 MB. It's perfect for printing a poster.
On a web page, that same photo is shown in a much smaller space. On a client's phone it takes up about 400 pixels across; on a computer, rarely more than 1,600. Everything beyond that still gets downloaded, even though nobody sees it.
The same photo, from 8 MB to 200 KB
For the web, a photo needs two adjustments:
- Resize it to the size it will be shown at. For a full width image, 1,600 pixels is enough; for a product card, 800.
- Save it in a modern format, such as WebP or AVIF, with reasonable compression.
With those two steps, an 8 MB photo usually ends up between 150 and 300 KB. That's forty times less, and to the eye it looks the same on the screen where it will be viewed.
Do the math on a mobile connection of 10 megabits per second, which is a normal data speed. An 8 MB photo takes about six and a half seconds to arrive. The 200 KB one, less than a fifth of a second. Now multiply by the photos in a gallery.
The cost for your client
Many of the people looking for you do it from their phone, often on mobile data rather than wifi. For them, a heavy page means two things:
- Waiting. The page stays blank or half loaded while the photos come down.
- Using up their plan. A gallery of twenty unoptimized photos can burn through more than 100 MB of data. The same gallery optimized, about 5.
People who wait too long go back and open the next result. And Google takes speed into account when deciding what to show, so a light page also helps you appear.
The gallery doesn't need to load all at once
Lazy loading makes each image download only when the person gets close to it while scrolling. Photos at the top arrive right away; those at the bottom, if nobody scrolls that far, never download at all.
In HTML it's a single attribute, loading="lazy", and most modern platforms apply it on their own. The exception is the main image at the top: that one should load immediately, because it's the first thing people see.
How to check your website in five minutes
- Go to pagespeed.web.dev and enter your page's address.
- Click Analyze and stay on the Mobile tab, which is the one that matters most.
- Look at Largest Contentful Paint: how long the main element takes to appear. Under 2.5 seconds is good; over 4, it's worth acting on.
- Scroll to the recommendations and look for the ones about images, such as "Improve image delivery". Each photo is listed with what it weighs and what it could weigh.
If images top the list of savings, you know where to start.
What you can do this week
- Run your website through PageSpeed on mobile and write down the result.
- Optimize the largest photos before uploading them. Free tools such as Squoosh (squoosh.app) let you resize and save as WebP right in the browser.
- Set a maximum size for everything you upload: 1,600 pixels wide for large photos, 800 for cards.
- Check that your gallery uses lazy loading, especially if it has many photos.
- Measure again and compare.
When we build a site, images are prepared this way from the start: each one at the size it's shown, in a modern format and lazy loaded where it makes sense. If your website already exists and you want to know how much the photos weigh it down, we measure it in website optimization. If your business lives on showing products, you may also want to see how a digital catalog works.