Image Sources and Alt Text for Digital Devices: A First-Edit Workflow
Check usage permission and purpose before choosing an image, write alt text that reflects what it shows, then review the result on desktop and mobile.
When adding product images to a digital-device site, choosing an attractive photo is not enough. You also need to know where it came from, what uses are permitted, and how to describe its information with alt text. If you are editing for the first time, work through the following steps one image at a time.
1. Decide what the image needs to do
First identify whether the image shows a product’s appearance, explains a feature, or sets the tone of the page. For a product photo, check whether details relevant to a purchase, such as the color or position of ports, are easy to see. For a decorative image, make sure it is not merely repeating the surrounding text.
- Note the page and nearby copy where the image will appear.
- Choose one piece of information the image should communicate.
- If the heading and body text already explain that information clearly, reconsider whether the image is needed.
**Hypothetical example:** On a wireless keyboard product page, choose a photo that shows the key layout and side profile. For a mood-setting image on the homepage, check that it does not mislead visitors about the product’s actual color or shape.
2. Record the source and terms of use
For an image you took yourself, record the photographer and where the original file is stored. For an image supplied by someone else, note the provider, the original page, the permitted scope of use, and any required attribution. If permission is unclear, do not publish the image; verify the terms or choose another one. Do not assume that an image is free to use just because it appears in search results.
TalkTalkMySite supports searching licensed stock images and videos. After choosing an item, still review the license terms shown for it and record any attribution requirements or usage restrictions in your work notes. Stock search does not verify usage rights for every image found elsewhere.
- Record the image source in the filename or your work notes.
- Check the allowed uses and any attribution requirements.
- Remove files with unclear permission from your candidates for publication.
3. Choose and place the image
In visual editing, open the relevant page or section and add an image that fits the role you decided on. If you use several similar product photos, check that each one communicates something different. If you use a hero slider, TalkTalkMySite allows up to five images in the slider, but you do not need to fill every slot. First check whether each slide adds distinct information.
After cropping or resizing, make sure important parts of the product are not cut off. The visible area can change with screen size, so use the preview before saving to check that a heading or button does not cover the image’s key detail. If it does, reduce decorative elements or choose a more suitable image.
4. Write alt text that matches what is visible
Alt text briefly and specifically describes the main information an image provides when someone cannot see it. Do not add specifications or effects that are not shown, and avoid repeating the surrounding copy word for word. If a visible caption already conveys the same information, do not make the alt text needlessly long.
**Hypothetical example:** For a photo of a black wireless keyboard, write something like “Black wireless keyboard with a power indicator at the upper right,” if those details are actually visible. For a simple decorative background, first consider whether describing its details helps someone understand the page. If the editing screen offers a way to treat an image as decorative, use that option when it fits the image’s purpose.
- Add a visible distinguishing detail instead of entering only the product name.
- Do not guess at connection methods or performance that the image does not show.
- Check the editing screen to find where alt text is entered and how the image is handled.
5. Review source, text, and layout before publishing
After saving, check the image in desktop and mobile previews. Reread the alt text to make sure it accurately describes the image, and check that the image does not contradict the nearby copy. After publishing, open the page yourself to inspect the crop and text display, and keep the source record with your work.
- Have you recorded the source and usage terms?
- Does the image suit its role on the page?
- Is the alt text factual and free of unnecessary repetition?
- Can visitors still see the essential product information and read the page on mobile?
Complete this process for one image first, then apply it to the other pages. Starting small makes it easier to understand the scope of any revisions. For your next task, choose one representative image and check its source record, alt text, and mobile preview in that order.