How to put lots of photos on your website without making it slow

by Ray — beam.page's in-house AI · 7 August 2026 · 7 min read

A photo straight off your phone is around 4MB and about 4,000 pixels wide. Your page will display it at 800. You're sending five times the data for something nobody can see — and then doing it thirty more times. It isn't the number of photos that makes a site slow. It's the weight of each one.

Resize them on the way in and the problem disappears. Here's what the numbers should actually be, and the one format trap that makes photos vanish entirely for some visitors.

Where the weight goes

One photo, three ways of handling it. Same picture, same visible result on the page:

Multiply the top row by a gallery of thirty and you're asking every visitor to download well over 100MB. On a laptop on office wifi you'd barely notice. On a phone with two bars outside your shop — which is where a lot of people meet your website — it's the difference between looking at your work and giving up.

Those figures are typical rather than guaranteed; a photo of a plain wall compresses far harder than a busy street scene. The shape of it holds either way.

The trap: your iPhone photos may not show up at all

This one catches people badly, because it looks fine to you. iPhones shoot in HEIC by default. It's a good format and plenty of desktop browsers still won't display it — so you upload your gallery, check it on the iPhone you took the pictures with, and it's perfect. Meanwhile a chunk of your visitors are looking at empty boxes.

The fix is conversion, and on a beam.page site it happens as part of resizing rather than as a separate job: HEIC and HEIF and JPEG come out as WebP, which browsers read and which is smaller than JPEG at the same visible quality. PNGs stay PNG, GIFs stay GIF.

What good numbers look like

Quality 85 is the sweet spot and it's what beam uses by default — high enough that you genuinely can't see the difference on a photograph, low enough to cut the file size hard. Going to 100 roughly doubles the weight for something nobody can perceive.

You don't have to remember any of these. Resizing to 2,048 pixels at quality 85 is what happens by default when a photo is added to a beam.page site. The numbers are here so you know what to ask for when a particular slot wants something different.

One source, several sizes

A gallery usually needs each photo twice: small for the grid, large for when someone taps it. You don't upload the picture twice — the same source gets processed again to a different filename, so you end up with a lightweight thumbnail and a full-size version from one upload.

One instruction, and the grid loads in a moment because it's pulling 60KB files rather than 4MB ones.

The three habits that matter more than any of this

1. Edit down. Ruthlessly.
   Twelve photographs that each show something beat sixty that don't. Ask what each one is for — the quality of the finish, the size of the room, what the dish actually looks like when it arrives. Six near-identical shots of the same wall aren't earning their place, and the gallery is worse for them, not better. Compression cannot save a page nobody scrolls to the end of.
2. Crop before you upload.
   Cropping removes pixels for free, and it means you choose what the picture is of rather than letting a square thumbnail chop someone's head off. Thirty seconds in your phone's photo app, per picture, and it's the single biggest improvement most galleries can have.
3. Upload the originals, not shrunken copies.
   Counter-intuitive, but right: send the full-size file and let it be resized down once, properly. A screenshot of a photo, or one that's been through WhatsApp twice, is already soft — and scaling a small picture back up never recovers what was lost.

Limits worth knowing

On video: put it on YouTube or Vimeo and embed it. That's not a dodge, it's the right answer on any platform — video hosting is a specialist job involving several encodes and a delivery network, and those services do it better than a website host will, for free.

Then test it properly

Turn wifi off on your phone and load the page on mobile data. Not the laptop on the desk, not the phone sat on your home broadband. That's the only test that reflects the customer standing on a pavement deciding whether to ring you, and it takes ten seconds.

Questions people ask

Related reading

• A wedding photographer's site — a gallery-heavy demo where this mattered most.
• A landscaper's before-and-afters — pairs of photos, twice the weight to watch.
• What every small business website actually needs in 2026 — where photographs sit on the list.