Guide Design and content
Images that help customers understand your offer
By Studio Swing
An image earns its place on a business website when it answers a question the visitor has before they will act: what exactly is this, how big is it, what does the result look like, who will I be dealing with, what happens next. An image that answers none of those is filler, and usability research shows visitors treat it that way. Nielsen Norman Group (NN/g) found that some pictures are “completely ignored”, typically “big feel-good images that are purely decorative”, while others are “treated as important content and scrutinized.”
On this page
What a landscaping firm learns from an image audit
This guide shows how to sort your images into those two groups, which kinds are worth creating, what to do about stock photography, and how to prepare each file so it helps rather than slows the page.
Say you run a landscaping firm. Your site has a sweeping hero photograph of a sunlit lawn, a row of smiling people shaking hands, a strip of leaf icons, and a gallery of twelve garden photos with no captions.
Now ask of each image: what question does it answer?
- The lawn at sunrise answers nothing. It could belong to any garden business, which is the substitution test: put a competitor's name on it and it still works.
- The handshake photo answers nothing and, if it is a stock image of models, is exactly the kind NN/g reports users ignore. Its summary: "ignore stock photos of generic people."
- The leaf icons are decoration. Fine in small doses, but they carry no information.
- The twelve garden photos could answer the best question a landscaping buyer has, which is "what does a finished job look like?" With no captions, though, the visitor cannot tell which are yours, which service each shows, or how large the space was.
The audit shows which images carry information, and which are missing a caption, a closer detail or a job.
Which images are worth creating?
Start from the questions your customers actually ask, then match each to the kind of image that answers it.
| The visitor's question | An image that answers it |
|---|---|
| What exactly am I buying? | The thing itself, photographed clearly, with a plain background or in context |
| How big is it, how does it look in use? | The thing next to something of known size, or in a real setting |
| What will the result look like? | Finished work, with a caption naming what was done and what it involved |
| How does it work? | A diagram or annotated image you create for the purpose |
| Who is behind this business? | Real photographs of the people and premises, if you are comfortable showing them |
| What happens after I get in touch? | A simple sequence showing the steps and what the customer receives |
Three of these deserve a closer look.
The thing itself, from more than one angle. NN/g's ecommerce research is direct: "One product view is rarely adequate to answer users' questions," and recommends additional views such as rotated images, detail shots and images of the product in use or in context. For shops, the specifics of product photography are covered in our guide to what makes an ecommerce product page useful. The principle applies to services too: a finished job from two angles and one close detail answers more than five photos of the same view.
Consistency. NN/g's advice for listing pages is to keep background, orientation, lighting and scale consistent, because shoppers scan faster when photos are comparable. A set of photos in four different styles reads as unfinished even when each is good.
Diagrams and explanatory visuals. Some questions have no photograph. "How does a retrofit affect my heating bill?" or "What are the steps from quote to delivery?" are best answered by an original diagram, annotated screenshot or sequence. They need to be accurate and carry real words, and they are a legitimate way to show how you think without needing a camera.
Are stock photos always filler?
Not always, but the burden is on the image. NN/g's finding is specific to generic people: pictures of models shaking hands, pointing at a laptop or laughing at salad carry no information about your business, and visitors skip them. An illustrative stock photo can still do a real job when it carries information the visitor wants, such as a clear picture of what a type of material or tool looks like.
What matters more is honesty. Do not present an image as your work, your team or your customers when it is none of those. A stock photo of a smiling "team" next to your company name, or a rendering placed beside a claim about a finished job, invites the visitor to believe something untrue, and a sceptical visitor is quick to notice. If you have no photographs of your own yet, a plain, accurate image (a clear diagram, a product shot, a captioned sketch) is better than a polished false one. If an image is an illustration or rendering, say so in the caption.
Our own showcase works this way: the concept sites there are labeled "Original concept", because they were created by the studio to show how it works, not drawn from client projects.
How should images be prepared?
Each image has a job, and the file should serve it.
Match the file to the content. web.dev's guidance on image formats says photographs and screenshots suit JPEG, lossy WebP or AVIF for the best file size tradeoffs, while logos, icons and simple shapes suit vector formats such as SVG because they stay sharp at any size. It also warns against putting text inside images: "Text-in-images delivers a poor user experience", because it cannot be searched, selected or read by assistive technology. A price list or opening hours saved as a picture is a common example.
Serve the right size. web.dev reports that serving desktop-sized images to mobile devices can use 2 to 4 times more data than needed. The remedy is responsive images (the srcset and sizes attributes), which let the browser choose from several versions, and web.dev suggests three to five sizes as a sensible balance.
Give the page its dimensions. Images without a width and height are a common cause of the page jumping as it loads. web.dev's guidance on layout shift says to "always include width and height size attributes on your images and video elements" or reserve the space with CSS aspect-ratio.
Load the first image fast, defer the rest.
The big image at the top of a page is often the element Google's Largest Contentful Paint measures, which should occur within 2.5 seconds. web.dev says "Don't lazy-load images that are likely to be in-viewport when the page loads, especially LCP images," and that tagging the key image with fetchpriority="high" lets it start loading earlier. Images further down the page are the ones to lazy-load. If your page feels slow, why a website is slow explains how to find out whether images are the cause.
1<img src="hero.jpg" alt="Landscaped garden at Longmeadow Landscaping" fetchpriority="high">Use real <img> elements.
Google's image guidance recommends standard HTML image elements rather than CSS background images for content you want found, plus descriptive file names (my-new-black-kitten.jpg rather than IMG00023.JPG) and images placed near relevant text.
What does good alt text look like?
Alt text is the written description a screen reader reads aloud and Google uses, alongside the page content, to understand an image. The W3C Web Accessibility Initiative sorts images into several kinds, of which four matter most here:
- Informative images need “at least a short description conveying the essential information presented by the image.” For the patio photo: “Finished stone patio with built-in fire pit, seen from the back door.”
- Decorative images that add only visual decoration get an empty alternative (
alt=""), so screen readers skip them. The leaf icons are an example. - Functional images, such as an icon that is also a button, describe what the control does, not what it looks like.
- Complex images, such as a chart or diagram, need a full text equivalent of the information in them, usually in the surrounding text.
Google's advice is to write informative alt text and not stuff it with keywords. A good test is whether the sentence would help a person who could not see the image.
What does this not fix?
- A weak offer. A photograph can clarify what you sell; it cannot make an unclear service attractive.
- Missing proof. Photos of finished work are evidence only if the work is yours and the captions are true.
- A slow page. Well-chosen images that weigh too much still slow the page. Choose and prepare them together.
- Rankings. Good image practice makes images eligible to appear in Google Images and helps visitors; it does not guarantee a position.
A checklist you can use without us
Checklist
- Each image has a one-line answer to “what question does this answer?”
- Images that answer nothing are removed, replaced or made small.
- No image is presented as your work, team or customers unless it is.
- Finished-work photos have captions that say what was done.
- Photos share a consistent background, lighting and scale where they sit side by side.
- Nothing important, such as prices or hours, exists only as text inside an image.
- File formats suit the content, and sizes suit the screen.
- Every image has a width and height or a reserved space.
- The top-of-page image is not lazy-loaded.
- Informative images have alt text; decorative ones have empty alt text.
Where to go from here
Images are one of the things we plan before design, as part of each page brief, because the question "what must the visitor see here?" decides what has to be photographed or drawn. If you are rebuilding a site and want that decided up front, see our website design and development work. To see how phone screens change which images matter, read why mobile design needs its own decisions, and when you are ready you can discuss your project with us.
Sources
Nielsen Norman Group, "Photos as Web Content": https:/
Nielsen Norman Group, "UX Guidelines for Ecommerce Product Pages": https:/
Nielsen Norman Group, "Product Photos on Listing Pages: 6 Tips": https:/
web.dev, "Choose the right image format": https:/
web.dev, "Serve responsive images": https:/
web.dev, "Optimize Cumulative Layout Shift": https:/
web.dev, "Browser-level image lazy loading": https:/
web.dev, "Fetch Priority API": https:/
web.dev, "Largest Contentful Paint (LCP)": https:/
Google Search Central, "Google Image SEO best practices": https:/
W3C Web Accessibility Initiative, "Images tutorial": https:/