A website gallery should hold as many photos as show something different, not everything on your phone. The first photo is the best and most representative one, and the rest follow the order in which a customer would discover the place or the product. On the technical side, the first one loads right away, the rest as you scroll, all with set dimensions and alt text.
How many: each photo has to show something new
There's no right number for everyone. There is a simple test: for each photo, ask what the customer learns from it that they didn't learn from the one before. If the answer is "nothing," the photo goes.
The most common mistakes we see:
- ten shots of the same room from nearly identical angles;
- old photos of a setup that no longer exists;
- photos from the internet that aren't of your place;
- dark or crooked shots added "to have more."
On a phone, the first screen only shows a few photos, and they decide whether people keep scrolling. Put your best ones there. The rest are for people who are already interested.
The order: the customer's path
The best order follows a real visit. A few examples:
| Type of business | An order that works |
|---|---|
| Guesthouse | the facade or the view, the room, the bathroom, breakfast, the surroundings |
| Restaurant | the dining room or terrace, signature dishes, details, the team at work |
| Workshop, repair shop | the finished result, work in progress, the workshop, the team |
| Salon | one standout piece, then work by category, then the space |
If you have a lot of photos, split them into categories with headings (Rooms, Restaurant, Garden) rather than one long gallery. Customers jump straight to what they care about.
Only use photos of recognizable people, customers or staff, with their consent.
The text around the photos
Google understands an image partly from what's around it: the caption, the page title, the nearby text. It also recommends descriptive file names, like double-room-balcony.jpg, instead of IMG00023.JPG.
Alt text (the alt attribute) describes the photo for anyone who can't see it: screen readers and search engines. Google asks for useful text that describes the image in the context of the page, without keyword stuffing. "Double room with a mountain-view balcony" is good. "Mountain guesthouse stay room mountain guesthouse" is spam.
Purely decorative images that add no information get empty alt text (alt=""), so screen readers skip them. If the attribute is missing entirely, some screen readers read the file name out loud.
The technical side, briefly
A few settings make the difference between a gallery that opens instantly and one that drags the page down:
- Don't lazy-load the first photo. Lazy loading (
loading="lazy") is for the photos further down. The one visible right away, especially if it's the largest thing on screen, loads normally, or the page feels slow. - Lazy-load the rest. The browser fetches them only as you get close. Browsers that don't understand the attribute ignore it, so it does no harm.
- Width and height on every photo. That way the browser reserves the space and the page doesn't jump while photos load.
- Photos in several sizes. With
srcset, a phone gets a small version and a large screen a large one. - Photos as images, not backgrounds. Google finds images in
imgelements, not ones set as CSS backgrounds. If you want the gallery to show up in Google Images, this matters.
We covered file formats and sizes in our post on website photos.
The gallery on a phone
On a phone, a good gallery scrolls with a swipe, opens the large photo on tap and closes easily. Sliders that change on their own every few seconds are hard to follow and make people wait for the photo they wanted. A simple grid, two photos per row, is usually clearer.
If you'd like us to rework your site's gallery, see what's included on our web services page.
Sources
- Google image SEO best practices, Google Search Central`img` elements versus CSS backgrounds, file names, alt text without keyword stuffing, surrounding text, `srcset`
- Browser-level image lazy loading, web.devdon't lazy-load images visible on load, browsers that ignore the attribute, `width` and `height`
- Decorative Images, W3C WAIempty alt text for decorative images and what happens when the attribute is missing
Checked: surse Xenia Pușcașu · editare Nora Vlăsceanu · SEO Mihnea Tăbăcaru