Product images and videos: measure what shoppers view

Why shoppers look at the images first

In online retail, product images stand in for touching the product. For its product page research, the Baymard Institute observes test participants while they shop and records what they do first on a product page. For most of them, the first step was a look at the gallery: 56 percent of participants turned to the images immediately after arriving on the product page (Baymard Institute 2020). In an earlier study, 42 percent of participants tried to judge the size of a product from its images (Baymard Institute 2017). Even so, some shops lacked a suitable image for exactly that: 28 percent of 60 major e-commerce sites had no image showing the product in scale, not even for best-selling items (Baymard Institute 2017).

Resolution and zoom fall short too. 25 percent of the benchmarked sites provided product images whose resolution or zoom level was not sufficient for close inspection, even for some of their most popular products (Baymard Institute 2020). Zooming itself has long been standard: 93 percent of the benchmarked desktop sites let users zoom some or all product images (Baymard Institute 2020). Then there is what the images show. 52 percent of the benchmarked sites did not add descriptive text or graphics to any product image, not even for their top-selling products (Baymard Institute 2018).

Benchmarks like these describe what shops in general miss. They do not answer the decisive question for your own shop: which image in the gallery of your best-selling item is actually inspected, and which one does almost everybody skip? Is the product video watched to the end or abandoned after a few seconds? Only measurement data from your own shop can answer these questions, per product and per device.

Which signals a product gallery provides

A gallery produces two kinds of measurable events. The first is the enlarged view: a shopper opens an image in the lightbox or activates the zoom. That is a deliberate action; they want to see something more closely. The second is the gallery switch: a click on a thumbnail, a dot or an arrow brings a different image into the main view. It shows how far shoppers move through the gallery. Together, the two events show which views are reached and which of those shoppers inspect more closely.

How many images a shopper reaches depends heavily on how the gallery is built. Thumbnails are less common on smartphones than on desktop: in recent Baymard Institute testing, 75 percent of mobile sites used indicator dots instead (Baymard Institute). When a gallery shows only the first thumbnails and hides the rest without a visible cue, some test participants miss the additional images (Baymard Institute). An older benchmark of 50 top-grossing US mobile e-commerce sites also found that 40 percent did not support enlarging product images with pinch or tap gestures (Baymard Institute 2016).

For analysis, this means that an image rarely reached through a gallery switch is not necessarily uninteresting. It may simply sit in a position many shoppers do not find. Only the ratio between reaching and enlarging separates the two cases. The following overview lists typical patterns:

How XICTRAQ® captures image and gallery events

The XICTRAQ® tracker recognises the gallery and lightbox components of widely used shop systems and gallery libraries from a list of known selectors. When a shopper clicks a thumbnail, a dot or an arrow, the tracker determines the active image shortly afterwards and reports a gallery switch. When the shopper clicks a gallery image or a lightbox or zoom window opens, it reports an enlarged view. Image address, alt text and title are sent along. The feature is part of cookieless analytics and runs with the standard snippet without any extra configuration.

There are two places to analyse the data. In a visitor’s session timeline, the events appear as “Image viewed” and “Gallery changed”, usually with a small thumbnail of the image. For totals across all visitors there is the custom events table: there, image_view and gallery_change can be broken down by the properties url, alt or title, with the number of events and sessions per image. The filter bar narrows the breakdown to device type, period or channel. The manual section on image and gallery capture describes the views in detail.

Where automatic detection does not apply, the shop reports the events itself. The key is to use the same names: events named image_view and gallery_change appear in the session timeline exactly like the automatically captured ones and end up in the same breakdown. The JavaScript tracker manual describes the interface. An example for a custom gallery:

// Custom gallery: report image switches and enlarged views to XICTRAQ®.
// Call reportImage() wherever the gallery script shows a new image
// or opens the enlarged view.
function reportImage(eventName, img) {
  if (!window.xictraq || !img) return;
  window.xictraq.event(eventName, {
    url: img.currentSrc || img.src,
    alt: img.alt || '',
    title: img.title || img.alt || ''
  });
}

// Switch to another image in the gallery
reportImage('gallery_change', document.querySelector('.my-gallery img.is-active'));

// Enlarged view opened
reportImage('image_view', document.querySelector('.my-lightbox img'));

Product videos: plays, milestones, completion rate

For video and audio, the tracker measures every native video and audio element on the page, including those inserted after the page has loaded. It records the start and pause of playback, the milestones at 25, 50 and 75 percent of the running time and the end, which counts as 100 percent. The path of the media file, the type, the duration and the position are sent along. The media analytics manual describes the fields in detail.

From these events, the dashboard builds a progress funnel and the completion rate for each media file. The completion rate is the share of plays that ran to the end: ended plays divided by started plays. A play counts once per page view, even if the shopper pauses and resumes in between. Each milestone is likewise reported only once per element and page view, so funnel and completion rate share the same unit. Each file is shown next to its figures for the previous period. Media analytics is included from the Business plan up; there, capture is active by default and can be switched off per website in the tracker settings.

How precisely a milestone is placed follows from the HTML standard: during normal playback, the browser fires the timeupdate event unless it has already fired one within the past 15 to 250 milliseconds (WHATWG). The tracker checks the position on each of these events and reports a milestone as soon as the mark has been passed. This matters for product videos because they are usually short. On mobile pages in the HTTP Archive crawl, nine out of ten videos embedded with a video element run for less than two minutes (HTTP Archive Web Almanac 2024), and more than half run for less than 30 seconds (HTTP Archive Web Almanac 2024). For a 20-second clip, the first mark falls after five seconds.

The funnel therefore shows very directly which part of a video holds attention. Typical patterns and what they suggest:

• Steep drop before the 25 percent mark: the first seconds do not hold. Check the poster image, the opening and the loading time before working on the rest of the video.
• Drop between 50 and 75 percent: the video is longer than its content justifies. Shorten it or bring the essentials forward.
• Many pauses with few drop-outs: shoppers stop to look at something more closely. A close-up of that moment may also belong in the image gallery.
• High completion rate with few plays: the video convinces but is rarely started. Check its position on the page and the poster image.

Limits: third-party players in iframes and shared video files

Only native video and audio elements on the page are measured. A player that a video platform embeds through an iframe runs in a different origin; the shop page script has no access to its playback events. For such videos, XICTRAQ® shows neither plays nor milestones. Anyone who wants to measure the progress of a product video should serve the video file themselves. That has a second advantage: an embedded platform is another recipient of visitor data that belongs in the privacy policy. The article on the privacy policy under scrutiny in 2026 shows how to reconcile such recipients.

A second characteristic concerns attribution. Media analytics aggregates per media file, not per page. If the same video runs on several product pages, for example a care guide for a whole product family, all plays appear in one row. If you want to see a video separately for each product, each product needs its own file. Conversely, versions of the same file that differ only in the query part of the address end up in the same row, because the tracker strips the query part.

Measuring without cookies and without browser storage

Under Section 25(1) TDDDG, storing information on a user’s device and accessing information already stored there is only permitted with consent (TDDDG), apart from narrowly defined exceptions. XICTRAQ® reach measurement sets no cookies and creates no entries in browser storage. Image, gallery and video events are part of this measurement and are tied to a cookieless session. Whether a consent banner can be dropped for a specific use remains a case-by-case assessment; for pure reach measurement this is usually the case. The article on e-commerce tracking without cookies shows how cart and purchase can be captured without cookies as well.

The event data itself is sparse: image address, alt text and title describe the content of the shop page, not the visitor. For videos, the file path, duration and position are added. Session recording, which replays an interaction in full, is a different matter: in XICTRAQ® it only starts after the visitor has given consent. The article on GDPR-compliant heatmaps explains how click heatmaps work without cookies and without a banner.

Alt texts and videos: checking accessibility along the way

Because every enlarged view and every gallery switch sends the image’s alt text along, the analysis yields a side finding. An image without alt text drops out of the breakdown by alt while it appears in the breakdown by url. Comparing the two lists shows which frequently viewed images have to do without a text alternative. The problem is widespread: in the HTTP Archive crawl, 45 percent of image elements had no alt text at all (HTTP Archive Web Almanac 2024). WCAG 2.2 requires a text alternative that serves the equivalent purpose for non-text content, with defined exceptions such as pure decoration (WCAG 2.2).

For online shops, this carries extra weight. Germany’s Accessibility Strengthening Act applies to e-commerce services provided to consumers after 28 June 2025 (BFSG); micro-enterprises that provide services are exempt from its requirements (BFSG). For videos, another exemption matters: recorded time-based media published before 28 June 2025 are outside the scope of the act (BFSG). A product video newly uploaded for the coming Black Week is not covered by this exemption according to its wording. The XICTRAQ® accessibility check shows how a shop can be checked for such issues on an ongoing basis.

For videos, WCAG 2.2 sets concrete thresholds. If moving content starts automatically, lasts more than five seconds and is presented alongside other content, there must be a way to pause, stop or hide it (WCAG 2.2). If audio plays automatically for more than 3 seconds, it must be possible to pause it or control its volume independently of the system volume (WCAG 2.2). Prerecorded videos with sound need captions (WCAG 2.2). Media analytics provides a hint here: many pauses shortly after an autoplaying video starts can mean that shoppers would rather stop it than watch it. The article on WCAG 2.2 on business websites summarises the most common errors.

Before Black Week: checking gallery and video in five steps

There is still time for one round of measurement and one round of changes before the holiday season if you start now. A possible sequence:

1. Select product pages: the products with the most views and the highest revenue in last year’s quarter form the sample. Rarely visited items produce too few events for a reliable finding.
2. Check detection: click through each gallery template once, open the enlarged view and look at the session timeline. If events are missing, add your own events as described above.
3. Measure for two weeks: break down enlarged views and gallery switches per image by url, separated by device type. Smartphone and desktop often have different galleries and produce different patterns.
4. Reorder or replace images: move images that are rarely reached but mostly enlarged further forward. Review images that are reached but hardly inspected. Add an in-scale image or a close-up where one is missing.
5. Sharpen the video and measure again: compare the progress funnel with the previous period. A video with a steep drop before the first mark gets a new opening, a looping video a separate assessment.

If you want to test two versions of a gallery against each other at the same time rather than comparing them one after the other, you can do so with an A/B test without a consent banner. For comparisons across the weeks before Black Friday, it helps to know the calendar shift described in the article on year-over-year comparisons in Q4.

Ordering images by evidence rather than taste

The order of a product gallery is often set during the photo shoot: front view first, then the back, then the details. Whether shoppers see it the same way is shown by enlarged views, gallery switches and progress in the product video. Together with rage and dead clicks on product images and scroll depth as an attention signal, this reveals what actually happens on the product page. The live demo shows what the analysis looks like in the dashboard; the cookieless analytics page describes the full feature set.