Images and Video in Shopify Blogs: Accessibility and Speed

Media earns its place when it helps a shopper inspect, choose, use or care for a product. A second lifestyle photograph that repeats the hero is different from a fit diagram, an ingredient-label close-up or a 45-second installation demonstration. Start with that job, then decide format, alternative text, loading and placement.

Download the blank media audit. The sheet keeps editorial value, rights, accessibility and loading behavior in one row so an image cannot pass review only because it looks polished.

For section navigation in a longer article, the table-of-contents guide includes a small HTML example and keyboard/mobile checks.

Classify the media before writing alt text

Use the image's purpose on this page, not merely what the pixels contain.

Role	Article example	Text alternative
Informative	Photo shows where to place a tape measure across a shirt	Tape measure straight across the shirt chest below the armholes
Product context	Photo distinguishes the oat and charcoal colorways	Oat and charcoal linen shirts shown side by side in daylight
Functional	Product image is the only content of a link	Describe the destination or action, such as View the oat linen shirt
Decorative	Texture shape repeats information already in the heading	Empty alt=""
Complex	Size diagram includes six measurements	Give a short alt and put the full values in adjacent HTML text or a table

Avoid filename alt text, strings of keywords, and Image of... where the object can be named directly. Do not copy one alt string onto every crop. If a product claim is visible only in an image, add verified readable text nearby so the reader is not required to interpret pixels.

The W3C Web Accessibility Initiative says informative images need a text alternative that conveys their essential information, functional-image alternatives describe the function, and purely decorative images use a null alternative. Context can change the right answer for the same file. W3C images tutorial, accessed 10 September 2026.

Choose and document assets you may publish

Before upload, record the asset owner, source file, license or merchant approval, allowed channels and any expiry. A public URL is not evidence that an image is licensed for reuse. Product photography from the merchant catalog can still become misleading if it shows an old package, unavailable variant or result the product does not promise.

Use original product facts and the current catalog to review captions and nearby claims. The product-truth guide explains how to keep generated or edited copy grounded. If you generate a hero, label it internally, check the product identity and keep a source image or other approval evidence. A visually attractive approximation is not automatically safe product evidence.

For video, confirm ownership or permission, public availability, whether embedding is enabled, the displayed title/channel and any product version shown. Keep the important instructions, measurements and warnings in the article itself or a transcript. An embedded player can become unavailable later, and some readers cannot or will not play it.

Serve the right image for the rendered slot

Shopify's current image guidance supports JPEG, PNG, GIF, HEIC and WebP uploads and can deliver browser-appropriate formats such as WebP or AVIF when images are served through the theme. It recommends JPEG for photographic blog images and PNG for flat graphics or transparency. This automatic delivery does not choose the right crop, editorial role or rendered dimensions for you. Shopify image format guidance, accessed 10 September 2026.

In theme code, Shopify recommends image_url and image_tag. The filters can generate srcset candidates and add intrinsic width and height. Supply an accurate sizes value based on the CSS slot; otherwise a browser can select a larger candidate than it needs.

{{ article.image
  | image_url: width: 1600
  | image_tag:
    widths: '480, 760, 1100, 1600',
    sizes: '(min-width: 900px) 760px, calc(100vw - 32px)',
    loading: 'eager',
    fetchpriority: 'high',
    alt: article.image.alt
}}

This example assumes the article hero is visible immediately and is the likely Largest Contentful Paint candidate. Do not copy those priorities onto every image. Shopify's performance guidance says not to lazy-load the LCP image, to use lazy loading only below the initial viewport, and to provide width and height to reduce layout shift. Shopify theme image performance guidance and image_tag reference, accessed 10 September 2026.

The blog rich-text editor can insert existing or uploaded images. The active theme still decides how the saved HTML looks, so inspect the final storefront at mobile and desktop widths. Shopify blog-post media instructions, accessed 10 September 2026.

Load video when the reader reaches it

An iframe can start third-party requests before the reader shows any intent to watch. For a video below the fold, a lightweight facade can show an owned poster and a real button, then create the player after activation. Preserve keyboard focus, a clear accessible name, the aspect ratio and a normal link to the source as a fallback.

<button type="button" class="video-facade" aria-label="Play the linen shirt measuring demonstration">
  <img src="poster.jpg" alt="" width="1280" height="720" loading="lazy">
  <span>Play measuring demonstration</span>
</button>

The interaction code should replace the button with the approved iframe only after activation. If you embed YouTube, its Help Center documents Privacy Enhanced Mode with youtube-nocookie.com. That mode affects personalization; it does not remove the need to review consent, privacy disclosures and applicable policy for your store. YouTube also warns that an owner can disable embedding and some restricted videos will not play on third-party sites. YouTube embed guidance, accessed 10 September 2026.

Do not autoplay instructional video with sound. Show controls. Test the play action with keyboard and touch, in a private session, and in the regions and consent states that matter to the store. Provide a transcript or equivalent article steps for decision-critical content.

What the owned local measurement did and did not show

We created two synthetic article fixtures and measured them locally in headless Chromium at a 390 × 844 viewport on 10 September 2026. Both used the same three owned SVG illustrations and a local mock player:

• The eager fixture requested its document, hero, two far-below-fold images and iframe immediately: 5 local requests and 3,156 decoded bytes.
• The deferred fixture requested only its document and hero before scrolling: 2 local requests and 2,281 decoded bytes. Activating its play button successfully created the iframe.

Those are actual observations from the checked-in local fixture. The 875-byte and three-request first-viewport differences demonstrate deferral behavior, not a realistic bandwidth saving. The assets are tiny SVGs, the server is local, there is no Shopify CDN or third-party player, and five-run DOM-content-loaded timings varied enough that we do not use them as a speed claim. Run the supplied measurement script to reproduce the structure, then measure the real storefront with cold-cache field or lab tools before deciding impact.

Review the rendered article as a system

For each article, verify:

1. The hero is relevant, correctly cropped and loaded without a lazy attribute if it is above the fold.
2. Every informative image has contextual alt text; decorative images have alt="".
3. Width and height reserve the correct aspect ratio, and images remain inside the viewport.
4. Responsive candidates match the actual display slot on phone and desktop.
5. Product names, variants and instructions match current source facts.
6. Rights or merchant approval are recorded.
7. Video can play, has a useful title, has an equivalent text path and does not surprise the reader with autoplay.
8. Failed or blocked media leaves readable article content rather than an empty frame.

Google says it uses alt text with page context and computer vision to understand images, and advises useful, information-rich text without keyword stuffing. That is a reason to describe the image accurately, not a promise of image ranking. Google image guidance, accessed 10 September 2026.

Use the product-linked article guide to place media beside an actual buying decision, then record it in the Shopify content audit. Citelift's free draft audit analyzes body text pasted by the reader with deterministic rules; it does not fetch the live page, inspect media requests or call an AI API.