Serve responsive images with srcset and sizes

When images lack a multi-source srcset or a sizes attribute, every device downloads the same fixed-size file. Mobile users pay for desktop pixels they never see, hurting LCP and bandwidth.

How to fix it

Use Shopify's image_tag filter, which generates a correct responsive srcset automatically:

{{ product.featured_image | image_url: width: 1500 | image_tag:
     widths: '375, 550, 750, 1100, 1500',
     sizes: '(min-width: 750px) 50vw, 100vw',
     loading: 'lazy' }}

• Set sizes to match how wide the image renders at each breakpoint.
• Provide several widths spanning your real layout sizes.
• Let Shopify's CDN resize — never upload one giant image and scale it in CSS.