Responsive image snippet

responsive-image.liquid

{% comment %} Default images {% endcomment %}
{% assign PHONE_IMAGE = image %}
{% assign TABLET_IMAGE = image %}
{% assign DESKTOP_IMAGE = image %}

{% comment %} Default widths {% endcomment %}
{% assign PHONE_IMAGE_WIDTH = '640x' %}
{% assign TABLET_IMAGE_WIDTH = '768x' %}
{% assign DESKTOP_IMAGE_WIDTH = '1440x' %}

{% comment %} When defined, the '<device>_image' parameter overrides the default image {% endcomment %}
{% comment %} Override default phone image {% endcomment %}
{% if phone_image != blank and phone_image != false %}
    {% assign PHONE_IMAGE = phone_image %}
{% endif %}

{% comment %} Override default tablet image {% endcomment %}
{% if tablet_image != blank and tablet_image != false %}
    {% assign TABLET_IMAGE = tablet_image %}
{% endif %}

{% comment %} Override default desktop image {% endcomment %}
{% if desktop_image != blank and desktop_image != false %}
    {% assign DESKTOP_IMAGE = desktop_image %}
{% endif %}

{% comment %} When defined, the '<device_width>' parameter overrides the default widths {% endcomment %}
{% if width != blank %}
    {% assign PHONE_IMAGE_WIDTH = width | append: 'x' %}
    {% assign TABLET_IMAGE_WIDTH = width | append: 'x' %}
    {% assign DESKTOP_IMAGE_WIDTH = width | append: 'x' %}
{% else %}
    {% comment %} Override default phone width {% endcomment %}
    {% if phone_width != blank %}
        {% assign PHONE_IMAGE_WIDTH = phone_width | append: 'x' %}
    {% endif %}

    {% comment %} Override default tablet width {% endcomment %}
    {% if tablet_width != blank %}
        {% assign TABLET_IMAGE_WIDTH = tablet_width | append: 'x' %}
    {% endif %}

    {% comment %} Override default desktop width {% endcomment %}
    {% if desktop_width != blank %}
        {% assign DESKTOP_IMAGE_WIDTH = desktop_width | append: 'x' %}
    {% endif %}
{% endif %}

{% if image != blank %}
    <picture class="lazyload fade-in {% if class != blank %}{{ class }}{% endif %}">
        {% comment %} Phone image {% endcomment %}
        {% if phone_image != false %}
          <source
              media="(max-width: 640px)"
              srcset="{{ PHONE_IMAGE | img_url: PHONE_IMAGE_WIDTH, format: 'pjpg' }} 1x,
                      {{ PHONE_IMAGE | img_url: PHONE_IMAGE_WIDTH, format: 'pjpg', scale: 2 }} 2x">
        {% endif %}

        {% comment %} Tablet image {% endcomment %}
        {% if tablet_image != false %}
          <source
              media="(min-width: 641px) and (max-width: 768px)"
              srcset="{{ TABLET_IMAGE | img_url: TABLET_IMAGE_WIDTH, format: 'pjpg' }} 1x,
                      {{ TABLET_IMAGE | img_url: TABLET_IMAGE_WIDTH, format: 'pjpg', scale: 2 }} 2x">
        {% endif %}

        {% comment %} Desktop image {% endcomment %}
        {% if desktop_image != false %}
          <source
              media="(min-width: 769px)"
              srcset="{{ DESKTOP_IMAGE | img_url: DESKTOP_IMAGE_WIDTH, format: 'pjpg' }} 1x,
                      {{ DESKTOP_IMAGE | img_url: DESKTOP_IMAGE_WIDTH, format: 'pjpg', scale: 2 }} 2x">
        {% endif %}

        {% comment %} Legacy browser and search engine fallback image {% endcomment %}
        <img src="{{ image | img_url: DESKTOP_IMAGE_WIDTH, format: 'pjpg', scale: 1.5 }}" {% if image.alt != blank %}alt="{{ image.alt | escape }}"{% endif %}>
    </picture>
{% endif %}

Hello, can you provide an example on how to call the render function to call this snippet?
Thanks!

I found a way:

{% render 'responsive-image' | desktop_image: desktop_image | tablet_image: tablet_image | phone_image: phone_image %}

Hope this will help others!
Great snippet code.