Using LazySizes and the Picture element with responsive breakpoints for art-direction in Craft CMS

responsive-images-craft.txt

{#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_layouts/main-layout.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
All image transforms are defined here in the main layout template so they can be used site-wide. Templates using this layout can reference them thus:
{{ theBackgroundImage.url(transform.small) }}
#}

{% set transform = {
small: {
width: 640,
height: 640,
mode: 'crop',
position: 'center-center',
quality: 100,
},
smallRectangle: {
width: 640,
height: 440,
mode: 'crop',
position: 'center-center',
quality: 100,
},
medium: {
width: 1024,
mode: 'fit',
position: 'center-center',
quality: 80,
},
mediumRectangle: {
width: 1024,
height: 768,
mode: 'crop',
position: 'center-center',
quality: 80,
},
large: {
width: 1800,
mode: 'fit',
position: 'center-center',
quality: 80,
},
largeRectangle: {
width: 1800,
height: 1000,
mode: 'crop',
position: 'center-center',
quality: 80,
},
smallNoCrop: {
width: 640,
mode: 'fit',
position: 'center-center',
quality: 100,
},
} %}



{#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_includes/responsiveImage.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#}

{% set image = embedAsset %}
{% if image|length %}
  <picture>
{# The Lazysizes JS script prefixes src and srcset with "data-" (http://afarkas.github.io/lazysizes/#examples). If you're not using Lazysizes, remove "data-" everywhere. #}

    <source
    <!-- If the user's screen is at least 1024px wide... -->
      media="(min-width: 1024px)"
      <!-- Then display the large transform... -->
      data-srcset="{{ image.url(transform.large) }}"
    >
    <!-- If that returns false, then proceed to the next source tag: -->
    <source    
    <!-- If the user's screen is at least 640px wide... -->
      media="(min-width: 640px)"
      <!-- Then display the medium transform... -->      
      data-srcset="{{ image.url(transform.medium) }}"
    >
    <!-- If that returns false, then proceed to the next source tag: -->
    <source
    <!-- If the user's screen is no larger than 639px wide (a smartphone)... -->
      media="(max-width: 639px)"
      <!-- Then display the small transform... -->      
      data-srcset="{{ image.url(transform.small) }}"
    >
    <!-- If the user's browser is so old that it can't understand media queries, then proceed: -->
    <img
      <!-- Define the default image for old browsers... -->      
      data-src="{{ image.url(transform.medium) }}"
      alt="{{ embedAlt }}"
      class="{{ embedClasses }}"
      {{ embedDataAttributes|raw }}
       />
  </picture>
{% endif %}


{# 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
news/newsEntry.html (or any template where an image should appear)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Wrap this in a Figure element if you want to have a caption. 
#}

{% set image = entry.image.one() %}
{% include "_includes/responsiveImage" with {
	'embedAlt' : entry.title,
	'embedClasses' : 'object-cover w-full h-full zooming-image lazyload',
        'embedDataAttributes' : 'loading="lazy" data-action="zoom"',
        'embedAsset' : image,
	}
%}