How to use responsive images in liquid templates?

Solved
michalc
Tourist
10 2 0

Hi shopify community.

For our e-comm stores www.bravior.at and www.bravior.de have we the need to use responsive images in liquid templates and insert an code for responsive image where we need. So we would like to load differend image sizes depending on users device. The aim is to decrease loading time and increase conversions and SEO rankings. How can we do this? If I use insert following code into liquid template:

<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="{{ block.settings.image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">

and replace src & data-src attribute content with image url, for example https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-... , it does not work:

<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-..."
data-src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-..."
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">

The image is not displayed.

What do I wrong? Can someone please post here an functional code for an responsive image for liquid template? Functional code would make the whole situation easier for us. We would just insert other image URLs into it.

Best regards,

Michal

0 Likes
Bdelucca
Tourist
10 1 2

Hi Michalc!

 

I think you should not use "src" in lazyload.

Here is what I use, hope is usefull:

 

 

 

 <img
                class="lazyload no-js"
                data-src="{{ img_url }}"
                data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}"
>​

 

 

michalc
Tourist
10 2 0

Ok thank you, I will try this code and let you know it if works. My question is that there is no way how to lazyload responsive images? Do we have to completely remove lazyloading? What will be the effect on page speed?

0 Likes
Bdelucca
Tourist
10 1 2

That should work as a lazyloaded and responsive image. The responsiveness is given by the data-width. It should improve your performance if the landing screen doesn't show these images (Ex. images in the footer).

You can look at the lazyload documentation (which I highly recommend) if you want to know more.

Another option for lazyloading is "lozad" which is also very simple and easy to use. Link

Note that images that are show immediately when the page is loaded should not use lazyload, as it slow down the performance.

0 Likes
freya0328
Excursionist
79 0 8

Hello, I want to know if you have made progress in this regard? I am also facing this problem.

0 Likes
michalc
Tourist
10 2 0

Hi. I didnt make any progress so far. Tested this two codes:

<img
class="lazyload no-js"
data-src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-..."
data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
>

And this one:

<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="{{ block.settings.image | img_url: '300x' }}"
data-src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_magnet282kg_fun..."
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">

But none of them is functional. I contacted theme developers and they will have a look at it. 

0 Likes
michalc
Tourist
10 2 0

This is an accepted solution.

0 Likes