Liquid, JavaScript, themes, sales channels
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
Solved! Go to the solution
This is an accepted solution.
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 }}"
>
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?
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.
Hello, I want to know if you have made progress in this regard? I am also facing this problem.
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.
This is an accepted solution.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024