A salon sells something people judge with their eyes, so photos do more work on a salon website than almost anywhere else. They are also very often the reason the site is slow. A single photo straight from a modern phone can be several megabytes, and a home page with a slider, a gallery and a team section can ask a visitor's phone to download dozens of them.
The good news is that you do not have to choose between photos that look good and a page that loads quickly.
Size photos for the screen, not the camera
A phone camera takes photos thousands of pixels wide. Even a large laptop screen shows a full-width image at around 2,000 pixels or less, and a phone shows far fewer. Everything beyond what the screen shows is downloaded and then thrown away.
- Full-width banner images: resize to about 2,000 pixels wide.
- Photos in a gallery grid or on cards: 1,000 to 1,200 pixels is plenty.
- Team portraits and small thumbnails: smaller still.
Use a modern format, and compress
WebP and AVIF are image formats that make much smaller files than JPEG at the same visible quality, and current browsers support them. Compressing at a sensible setting makes a large difference that nobody can see. Google's course on images for the web covers formats and sizing in depth.
You should not have to do this by hand for every photo. A good website platform resizes and converts images when you upload them. On Gloss Front it happens in your browser before the upload: your photo is never cropped and never enlarged, and if the converted version would not be smaller, the original is kept.
Load what people see first, first
- The first large image on the page, usually the hero, should load straight away.
- Photos further down, such as the gallery or the team, can load as the visitor scrolls towards them. This is called lazy loading.
- Give every image its width and height, so the page does not jump when the image appears.
Those last two points connect directly to Google's Core Web Vitals, which we explain in Core Web Vitals for salon owners.
Be careful with sliders and video
A home page slider with six full-size photos makes every visitor download all six, although most never see past the first. One strong photo usually works better. Background video is heavier still. If you use video, keep it short, compress it, and consider showing a still image with a play button instead.
Describe your photos
Every photo of your work should have alt text: a short description that screen readers read aloud and that search engines use to understand the image. Describe what is in it, the way you would to a client on the phone: "Shoulder-length copper bob with curtain bangs". The W3C's tutorial on images explains how to write good descriptions, and we cover accessibility more broadly in website accessibility for salons.
Google Images can send people to your site too. Its image SEO best practices recommend descriptive file names and alt text, and placing images near relevant text. A photo named copper-bob-curtain-bangs.jpg beside a paragraph about that cut is far more useful than IMG_4402.jpg in an unlabeled gallery.
Use your own work
Stock photos of models who have never been in your salon are easy to spot, and they make clients wonder what your real work looks like. Recent photos of real clients, taken in good light and with their permission, are more convincing than anything you can buy.
Check how your photos are doing
Our free website check runs Google's Lighthouse test, which flags oversized and poorly compressed images, and it checks for images with no alt text. Fix the biggest images first. It is usually the quickest speed improvement a salon website can make.