How to display product specifications is a comprehension problem, not a layout problem. Baymard Institute benchmarked 344 top e-commerce sites and found 82% of them have severe product page usability issues, and the spec area is where the damage stays quiet: nobody emails to say your spec table was unreadable. They just buy from the listing that answered the question faster.
The short version: a spec table and an annotated image do two different jobs, and a listing that sells needs both. Below are the six questions that decide which number goes where, answered with the research and with what actually happens on export listings.
There is no single correct way to display product specifications for every category. There is a correct split of labour between text and image, and almost every underperforming listing has that split wrong in the same direction.
Should product specifications go in a table or on the image?
Both, and the split is not a matter of taste.
A spec table is machine-readable text. Search engines index it, marketplace filters read it, translation tools convert it, screen readers speak it, and AI shopping assistants extract it. An annotated image is a comprehension device: it tells a buyer what 42 cm looks like against a doorway, a hand, or a pallet. Text carries the number; the image carries the meaning of the number.
An in-scale image is a product photo that contains a reference the buyer already knows the size of — a person, a door, a hand, a standard pallet — so the size is read instead of calculated. Baymard's testing found that 42% of users will try to gauge a product's overall scale and size from its images, and that 28% of benchmarked sites provide no in-scale image at all. That is a large share of buyers looking for information a quarter of sites never supply.
| Spec table | Annotated / in-scale image | |
|---|---|---|
| Primary job | Precision and comparison | Comprehension and scale |
| Machine readable | Yes | No |
| Survives translation | Yes | Only if you re-export per language |
| Answers "will it fit?" | Slowly | Instantly |
| Answers "what exactly is the tolerance?" | Yes | No |
| Where buyers look first | After the gallery | In the gallery |
Give the same fact both treatments when it drives the purchase decision. Overall width belongs in the table and on the image. Screw thread pitch belongs in the table only.
Which product specifications do buyers check first?
They do not read top to bottom. In furniture, industrial, and building-material sourcing, buyers scan for a small set of fields, confirm those, and only then read the rest. This ordering is field practice rather than a platform rule, but it is remarkably consistent across categories.
| Tier | Fields | Why it is checked first |
|---|---|---|
| 1 | Overall dimensions, weight, capacity | Decides fit, freight, and whether the inquiry continues |
| 2 | Material, finish, grade | Decides quality tier and price band |
| 3 | Compatibility and fit (thread, VESA, cutout, rough opening) | Decides whether it works with what they already own |
| 4 | Packing data (carton size, CBM, pcs/carton) | Decides landed cost |
| 5 | Certification, test standard, warranty | Decides whether it clears their compliance check |
The same priority order applies when you build the downloadable document — the field sequence for how to make a product spec sheet mirrors what buyers scan on the page.
How many specifications before buyers stop reading?
The failure is rarely too few specs. It is an undifferentiated block of them.
Baymard's spec-sheet research puts numbers on it: 50% of sites have spec sheet designs that are difficult for users to scan, 23% do not group specs into related sub-sections with titles, only 3% use a summary to highlight the critical specs, 23% use no visual styling to aid scanning, and 20% force users through a multi-column layout. A further 52% do not post-process vendor-supplied data, so two products of the same type carry different field names and different units.
That last one is the export-specific killer. If one SKU says "Width 600 mm" and the next says "W: 23.6 in", the buyer stops trusting both.
What to do instead, in order of payoff:
- Lead with a key-spec summary of five to seven lines — the tier-1 fields, nothing else. Only 3% of sites do this, so it is close to free differentiation.
- Group the full table into titled sub-sections: Dimensions, Materials, Packing, Compliance.
- Use one unit system as primary and put the conversion in the same cell, not a separate column.
- Keep the field names identical across every SKU in a category, even when the factory sheet does not.
Where do dimensions belong on a product page?
In three places, in this order.
- On the image. The overall width, depth, and height, drawn on the product where the measurement actually runs. This is the only version most buyers will read.
- In the key-spec summary. Same three numbers as text, with the unit spelled out.
- In the full table and in structured data. This is what marketplace filters and AI answer engines consume; see product dimensions structured data for the fields that usually sit empty.
Step 1 is where most listings quietly fail, and the reason is usually production cost rather than disagreement. Drawing accurate dimension lines on a photo by hand is slow, and it goes wrong in a specific way: an arrow drawn by eye lands a few millimetres off the true edge, and the number printed next to it stops matching the product. The fix is not "take better photos." It is software that locks the measured dimension onto the image — snap the measurement to the product edge, type the real value once, then export at each platform's image size. Tools that generate a plausible-looking size graphic without measuring anything produce a number that reads convincingly and is wrong, which is worse than no number at all: a wrong dimension on the main image is a goods-not-as-described claim waiting to be filed.
The same file usually feeds the catalog and the quotation, which is why exporters tend to build it once as a product spec sheet maker output rather than twice.
What breaks when the specifications live only inside the image?
Everything downstream of the pixel.
- Search and filters. A marketplace cannot filter on a number it cannot read. Text in an image is invisible to the filter that decides whether you appear at all.
- Accessibility. W3C's WCAG guidance on images of text exists because text baked into an image cannot be resized, restyled, or reliably read by assistive technology.
- Translation. Your 11 language versions inherit the table for free. The image needs re-exporting per language, which is exactly why the critical numbers must also exist as text.
- AI answer engines. When a shopping assistant summarises your product, it reads the text. A spec that exists only as pixels does not make it into the answer.
- Thumbnails. Text sized for a full-screen view disappears in the gallery strip; the rules for text size on product images decide whether the annotation survives at tile size.
The rule that follows: any number a buyer might filter, compare, or quote must exist as text somewhere on the page, even when it is also drawn on the image.
Does any of this change on mobile?
The order of operations changes. How you display product specifications on a phone is decided by the gallery, because on mobile the gallery is the page and the spec table is a scroll away, often behind a tap.
Two Baymard findings matter here: 25% of e-commerce sites do not have product images with sufficient resolution or level of zoom, and 76% of mobile sites do not use thumbnails for additional product images, so buyers cannot see that a dimension image exists. Combined, they describe the common failure: the seller made a good spec diagram, and on a phone nobody found it or could read it.
Practical consequences:
- Put the dimension image at position 2 or 3 in the gallery, not position 7.
- Design the annotation to survive a tile-sized first view, then reward the zoom with detail.
- Keep the key-spec summary above the fold on mobile, not below a reviews block.
How to display product specifications: a 10-line audit
Run this against one listing before you roll changes across a catalog.
- The gallery contains at least one in-scale image with a familiar reference object
- Overall dimensions appear on an image, in a summary, and in the full table
- The key-spec summary is five to seven lines and sits above the full table
- The full table is grouped into titled sub-sections
- Field names and units are identical across every SKU in the category
- Primary unit and conversion sit in the same cell
- No critical number exists only as pixels
- Dimension image is in gallery position 2 or 3
- Annotation is legible at thumbnail size
- Structured data carries width, height, depth, and weight
Quick-reference summary
| Buyer question | Where the answer belongs | Format |
|---|---|---|
| How big is it really? | Gallery image, position 2-3 | In-scale photo with dimension lines |
| Will it fit my space? | Image plus key-spec summary | Annotated overall W x D x H |
| What is it made of? | Key-spec summary | Text, one line |
| Does it match my existing unit? | Full table, Compatibility section | Text plus tolerance |
| What does a carton cost me to ship? | Full table, Packing section | Text, carton dims and CBM |
| Is it certified for my market? | Full table, Compliance section | Standard number, not a logo |
FAQ
Should I display product specifications in a table or in the description?
In a table. Prose descriptions hide numbers inside sentences, which is slow to scan and hard for filters and AI assistants to extract. Keep the description for context — use cases, finish options, lead time — and move every measurable fact into a grouped table.
Where should dimensions appear on a product listing?
On the image first, then in a five-to-seven-line key-spec summary, then in the full spec table and structured data. Buyers read the image; machines read the text; you need both to convert and to be found.
How many product specs should a listing show?
Show all of them, but not all at once. Lead with the five to seven fields that decide the purchase, then give the complete set in a grouped table below. Baymard found only 3% of sites use a key-spec summary, which is why the ones that do feel noticeably easier to read.
Do buyers actually read spec sheets on mobile?
They read the gallery on mobile and the table on desktop, which is why the critical dimensions have to exist in both places. With 76% of mobile sites failing to show thumbnails for additional images, a spec diagram buried at gallery position 7 effectively does not exist on a phone.
Can I just put all the specifications in the product image?
No. Text baked into an image cannot be filtered, translated, resized, or read by assistive technology, and it disappears at thumbnail size. Draw the two or three numbers that decide fit on the image, and keep every number as text as well. If drawing accurate dimension lines is the bottleneck, that is a production problem worth solving with measurement-based annotation rather than by dropping the image.
Sources & References
- Baymard Institute — Product Page Usability: 82% of sites have severe UX issues, benchmark of 344 top sites
- Baymard Institute — Product Spec Sheets: 50% of sites get scannability wrong, plus the grouping, summary, styling and column findings
- Baymard Institute — Provide at least one in-scale image: 28% of sites do not, and 42% of users gauge scale from images
- W3C — Understanding WCAG Success Criterion 1.4.5 Images of Text
- Schema.org — Product: width, height, depth and weight properties for structured product data
- GS1 — Mobile Ready Hero Images standard: legibility of product information at tile size