Explain the correct use of the "sizes" and "srcset" attributes in pictures

Technical Q&A
, , ,

Topic summary

A developer is seeking clarification on properly implementing responsive images using srcset and sizes attributes, specifically for a Shopify theme logo.

Current Implementation:

  • Uses srcset with two image variants: desktop width (settings.logo_width) and mobile width (settings.mobile_logo_width)
  • Employs sizes attribute with media queries: desktop (min-width: 750px) and mobile breakpoints
  • Includes standard <img> attributes: src, alt, width, height, and fetchpriority="high"

Key Questions:

  • Whether the current syntax and structure are correct
  • How these attributes should be adapted for other images throughout the site
  • Best practices for responsive image implementation in Shopify themes

The post includes a code snippet showing the Liquid template syntax, though portions appear garbled or reversed. The developer is looking for validation of their approach and guidance on extending this pattern to other images beyond the logo.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Please explain how to correctly display an image with the “sizes” and “srcset” attributes. How they should change and how to display them correctly. For example, I display a logo:

  <img
                srcset="{{ settings.logo | image_url: width: settings.logo_width }} {{ settings.logo_width }}w,{{ settings.logo | image_url: width: settings.mobile_logo_width }} {{ settings.mobile_logo_width }}w"
                sizes="(min-width: 750px) {{ settings.logo_width }}px,(max-width: 749px) {{ settings.mobile_logo_width }}px"
                src="{{ settings.logo | image_url: width: settings.logo_width }}"
                alt="{{ settings.logo.alt | default: shop.name | escape }}"
                height="{{ settings.logo_width | divided_by: settings.logo.aspect_ratio }}"
                width="{{ settings.logo_width }}"
                fetchpriority="high"
              >

Am I pointing this correctly? How this should work for other images on the page