How can I implement picture tags with responsive images for modern formats?

Technical Q&A
1

Would anyone be able to help on the best way to implement tags while using {%render ‘responsive-image’%}? my goal is to pass our responsive-image template file multiple SRCs and have decide which SRC to use based on the browser. This way I can use .webp and .avif photo formats.

2

Hi @Aaron98 ,

I really do not understand. Can you send me the code of ‘responsive-image’ file and more description about it.

I will check it.

3

I actually think I figured out how to do what I wanted. I didn’t know that I could send any parameter to a .liquid file using {%render%} and all I had to do was reference that parameter. Here is the render tag I am using:

{% render ‘responsive-image’ with block.settings.image, alt: block.settings.image.alt, class: class, avif: block.settings.avif-url, webp: block.settings.webp-url %}

In ‘responsive-image.liquid’, I am using the webp and avif parameters within a tag:

4

Hi @Aaron98 ,

Yes, you can pass variables in Shopify with render.

If you have any further questions, you can contact me.
Happy to help you.

5

[quote=“Aaron98”]
Would anyone be able to help on the best way to implement

Shopify will automatically detect which image formats your buyers browser supports and automatically select the best format in order to optimize for quality and bytes delivered, so no need to implement format selection yourself. It is still a good idea to use responsive images in order to only load the size of image you require. Shopify can also help with this because it supports dynamic image transformations, which can generate the sizes you need on the fly. You can learn more by visiting https://cdn.shopify.com/