Images | Watch Vault SEO

Image fundamentals are surprisingly mixed. Alt-attribute coverage is excellent (99.96 % of 2,501 sampled images) and responsive serving via srcset is near-universal (99.5 %). But two structural gaps drag the score down hard: only 1 of 2,501 images uses loading="lazy", meaning every below-fold image is eagerly downloaded; and 1,654 of 2,501 (66 %) are missing inline width + height attributes, creating layout-shift risk. Of the 310 images with empty alt="", many are content images on pages like /pages/sell-a-watch (10 of 10 empty) where alt text would help.

Sitewide Image Inventory (100 sampled pages)

Total <img>

2,501

Missing alt attribute

1

99.96%

Empty alt=""

310

12.4%

loading="lazy"

1

0.04%

No loading attr

2,500

99.96%

Missing width+height

1,654

66%

With srcset

2,488

99.5%

Pages With Most Empty-Alt Content Images

For decorative spacer/icon images, alt="" is correct usage. But the heaviest offenders below are content pages where alt text would improve image SEO and accessibility.

URL	Empty alt	Total imgs	Notes
/collections/oris	14	70	20% empty
/products/breitling-superocean-heritage-ii…	11	20	55% — gallery images need alt
/collections/blancpain	10	50	20%
/collections/jaeger-lecoultre	10	54	19%
/pages/sell-a-watch	10	10	100% — every image empty alt; clearly content
/products/gerald-genta-arena-sport-bi-retro…	10	18	56%
/collections/bvlgari	6	26	23%
/collections/hublot	6	94	6%
/collections/tag-heuer	6	94	6%
/collections/ulysse-nardin	6	46	13%

Lazy Loading

Only 1 of 2,501 images uses loading="lazy"

The Shopify rimg Liquid snippet already supports a lazy parameter. The section templates aren't passing lazy: true for below-fold images. Fix once in snippets/rimg.liquid + audit section calls.

LCP image should be loading="eager" + fetchpriority="high"

The hero slideshow first slide / first PDP gallery image / first PLP card above the fold should remain eager and be explicitly preloaded.

Image Dimensions

66% of images missing inline width / height attributes

1,654 of 2,501 sampled images have no inline width + height. Browsers can't reserve layout space pre-paint, causing CLS as images load. Shopify's image_url filter exposes both dimensions; emit them in the rimg snippet. Add style="aspect-ratio: {{ image.width }} / {{ image.height }}" for fluid layouts.

Format & Optimization

All product CDN images served as JPG via cdn.shopify.com — Shopify auto-serves WebP via Accept: image/webp content negotiation
99.5 % of images use srcset for responsive serving
OG image is a 1204×630 PNG with transparent background — works but JPG/WebP would be smaller

Fix Pattern (rimg snippet)

Single change in snippets/rimg.liquid resolves the lazy + dimensions gap site-wide. Then audit section calls to ensure LCP images stay eager.

{% comment %} snippets/rimg.liquid {% endcomment %}
<img
  src="{{ img | image_url: width: size }}"
  srcset="..."
  width="{{ img.width }}"
  height="{{ img.height }}"
  loading="{{ loading | default: 'lazy' }}"
  {% if fetchpriority %}fetchpriority="{{ fetchpriority }}"{% endif %}
  alt="{{ alt | default: img.alt | escape }}"
  class="{{ class }}">

Then in section templates that render the LCP image:

{% render 'rimg', img: hero_image, size: '1920x', loading: 'eager', fetchpriority: 'high' %}

Action Items

H2Lazy-load all below-fold imagesS · 1–2 hrs

2,500 of 2,501 sampled images have no loading attribute. In snippets/rimg.liquid: loading="{{ loading | default: 'lazy' }}". Then audit section templates to pass loading: 'eager' only for the LCP image.

Acceptance: ≥ 95 % of images on PDP/PLP have loading="lazy"; LCP image has loading="eager" + fetchpriority="high".

H3Add explicit width / height to all imagesS

1,654 of 2,501 missing width/height. CLS risk. In rimg.liquid: emit width="{{ image.width }}" height="{{ image.height }}". Add style="aspect-ratio: {{ image.width }} / {{ image.height }}" for fluid layouts.

Acceptance: CLS ≤ 0.05 in lab Lighthouse; ≥ 95 % of images have width + height.

M8Reduce empty-alt on content imagesS – M

310 images sitewide with alt="". /pages/sell-a-watch has 10 of 10 empty-alt — clearly content. Other heavy offenders: /collections/oris (14), product PDPs for Breitling Superocean, Gerald Genta Arena (~50–55 %).

Audit each occurrence: add meaningful alt text describing the image content / its function on the page, OR confirm decorative-only and leave empty (correct usage).

Cross-references: Hero preload (M5), fetchpriority hints (L5) are filed under Performance. OG image format (L4) is on On-Page.