Bug: Thumbnail sizes attribute oversized — causes PageSpeed "image larger than needed" warning

Store Design
, ,
1

Theme: Dawn (tested on v15.5.0) File: snippets/product-media-gallery.liquid

Issue: The sizes capture block for the thumbnail strip uses calc((100vw - 8rem) / 3) as the mobile fallback, but thumbnails are displayed 4-per-row on mobile, not 3. This causes the browser to request a ~533px rendition for a slot that renders at ~301px, triggering a PageSpeed Insights warning: “This image file is larger than it needs to be (533x533) for its displayed dimensions (301x301).”

Additionally, both image_tag calls in the thumbnail <ul> request width: 416 with widths: '54, 74, 104, 162, 208, 324, 416' — the max width exceeds what the thumbnail slot ever renders at.

Fix:

  1. Change calc((100vw - 8rem) / 3) → calc((100vw - 8rem) / 4)
  2. Change image_url: width: 416 → image_url: width: 320 (both instances)
  3. Change widths: '54, 74, 104, 162, 208, 324, 416' → widths: '54, 74, 104, 162, 208, 320' (both instances)

Small fix, global PageSpeed impact for all Dawn stores with video/model thumbnails.

2

Hi @WetandDry Welcome to Shopify Community Good catch, this is a solid find. Can confirm the same mismatch shows up if you inspect the thumbnail markup on mobile, the calc divisor just wasn’t updated when the grid went from 3 to 4 columns. Your fix looks right on all three points, the width array trim especially since there’s no reason to ever serve a 416px thumbnail for a slot that tops out around 320px.

3

I pulled snippets/product-media-gallery.liquid from the v15.5.0 tag to check this, and the two image_url: width: 416 calls plus widths: '54, 74, 104, 162, 208, 324, 416' are exactly where you say, lines 242 and 304.

The divisor is where I get a different answer. In assets/section-main-product.css the mobile rule sits inside @media screen and (max-width: 749px) and reads .thumbnail-list__item.slider__slide { width: calc(33% - 0.6rem); }. That is 3 across. The 4-across rule only starts at 750px and 5-across at 900px. So calc((100vw - 8rem) / 3) as the last fallback does line up with stock Dawn.

The 533 does not add up either. That srcset tops out at 416 and the CDN will not hand back a rendition wider than what the tag asked for, so a 533x533 file cannot come out of that image_tag at all. Worth opening the URL Lighthouse flagged and reading the width= param on it. My guess is it is the main gallery image or something another section rendered, not the thumbnail strip.

Have you touched the thumbnail CSS on your store, or is it stock? If your thumbnails genuinely render 4 across then something moved that width rule, and the sizes hint would be wrong for your store specifically rather than for Dawn.

Either way this belongs at Issues · Shopify/dawn · GitHub if it holds up. Theme fixes do not get picked up from the forum.

4

I pulled the stock v15.5.0 source to settle this, and lumine is right that the mobile grid is 3 across, not 4.

In section-main-product.css the mobile rule is:

.thumbnail-list__item.slider__slide { width: calc(33% - 0.6rem); }

So each thumbnail slot is about a third of the row on phones, which is 3 per row. And the mobile branch of the sizes attribute in product-media-gallery.liquid is already calc((100vw - 8rem) / 3), so the divisor is 3, and it matches the CSS. Changing that 3 to a 4 would actually make the requested size too small on mobile, not fix anything.

The 416 width and the 324/416 entries in the widths array are there for desktop, not mobile. At 990px+ the grid goes to repeat(4, 1fr), and the medium and large product layouts go to 5 and 6 columns, where a single thumbnail slot at full page width can actually need a bigger rendition. Trim 416 out and force width 320, and you will start under-serving those desktop thumbnails instead.

Your 533px is the odd one out. It is not even one of Dawn’s stock widths (54, 74, 104, 162, 208, 324, 416), so a stock v15.5.0 thumbnail should never request it. That lines up with lumine’s question: on a clean v15.5.0, where is the 533 coming from? Most likely one of these:

  • a theme CSS change on your store that widened the thumbnail slots
  • the 533 belongs to a different image, not the thumbnail strip (worth confirming which element PageSpeed is actually pointing at)
  • device pixel ratio scaling, if you tested on a 2x screen a 301px slot can legitimately pull a larger source

Easiest next step is to reproduce it on a brand new v15.5.0 with no edits and the same product. If it is clean there, the cause is on your store, not the theme. If it reproduces on stock, then lumine is also right that it belongs on the Dawn GitHub as an issue with that repro, since that is where a real theme bug gets fixed.

5

Hi @WetandDry,

Yes, this can be fixed directly in snippets/product-media-gallery.liquid.

I would make the following changes:

calc((100vw - 8rem) / 4)

instead of:

calc((100vw - 8rem) / 3)

And for the thumbnail images, reduce the maximum requested width from 416 to 320

image_url: width: 320

and:

widths: '54, 74, 104, 162, 208, 320

This should make the requested image sizes closer to the actual thumbnail dimensions on mobile and avoid downloading unnecessarily large thumbnail renditions.

I’d still recommend testing the change on a few different viewport sizes before applying it broadly, since the thumbnail layout can vary depending on the theme settings and number of media items.

Coding Fifty