Written by DROPS.ST.
Use accurate product photos, place them beside the right product information and describe their useful meaning in context. Give new image files sensible names and use alt text for the information a customer would otherwise miss. A photo should help someone understand the item, not serve as another place to repeat a search phrase.
DROPS brings product images and catalogue details into the mobile shopping experience. Clear images help customers identify what they are buying and can reduce avoidable questions about pack contents or appearance. When reviewing a shop setup, inspect its actual image output and alt-text controls rather than assuming a particular SEO feature exists.
Choose the image that answers the question
Start with the photograph itself. Does it show the exact product, colour and pack being sold? Is the item large enough to inspect on a phone? Does a secondary photo reveal a connector, closure or label that matters to the purchase?
Do not rely on an attractive generic image to describe a specific item. If a picture includes accessories or several units that are not included, explain that in the visible listing. Alt text should not be the only place a sighted customer can discover that the bundle in the photo is not what they will receive.
The product packaging photo guide covers choosing useful views and handling packaging differences.
Describe the photo's purpose in the page
Alt text is an alternative for the image in its context. A main product photo, a linked thumbnail and a decorative background do different jobs. W3C's alt decision tree distinguishes informative, functional, redundant and decorative images, including cases where an empty alt attribute is appropriate.
These fictional examples show the decisions:
| Image and context | Possible alternative | Why it helps |
|---|---|---|
| Main photo of a listed case | “Black zip carry case, front view” | Identifies the pictured item and view |
| Detail photo showing the open case | “Open case showing two internal mesh pockets” | Adds information not shown in the first photo |
| Standalone image link to a collection | “Browse carry cases” | Describes the destination when no other link text provides it |
| Decorative divider with no meaning | Empty alt attribute | Avoids unnecessary spoken clutter |
The words must match the image. Do not claim two pockets because another model has them. Do not repeat the same description for every photo when each view shows something different.
Use filenames and nearby text sensibly
For a new image, a name such as black-zip-case-front.jpg is more understandable than IMG_4821.jpg. Keep the page title, caption where useful and surrounding product facts consistent with the photo.
Google uses page context and alt text to understand images and describes filenames as a light clue. It also warns against stuffing alt attributes with keywords. Google's image SEO guidance explains the relationship. Renaming every established image URL is not automatically worth the disruption; plan existing URL changes before making them.
Avoid text like “best cheap vape shop case buy online sale” as an image alternative. It does not describe what the customer would see and makes the page harder to use with assistive technology.
Keep important text available outside the picture
A photograph of a package may contain details the customer needs, but those details can be too small to read or unavailable to someone who cannot see the image. Put essential verified facts into real page text. Use the image to support the listing rather than making it the only source.
Check the exact pack size, model and contents across the title, description and photos. If a manufacturer changes packaging, explain a genuine packaging variation where appropriate without suggesting the product contents changed unless that is confirmed.
Test a complete product on a phone
Review loading, clarity, zoom behavior where available, and whether images shift the page while the customer is reading. Ask the developer to inspect image delivery and accessibility in the actual implementation. Search discoverability also depends on the surrounding page being accessible and useful.
For an illustrative product with four photos, give each photo a job: identify the item, show its contents, show a relevant detail and clarify size. If two photos do the same job poorly, a smaller set of better images may help more than adding another generic view.
Use mobile-first shop guidance to connect the image decision to the buying experience.
Make every product image earn its place. Explore DROPS and inspect your real product photos on a phone. Help customers see the item clearly, understand the details and continue to the order.