{#
  srcs must be a array of image url per breakpoints
  ex: [
    'mobile-320x480.jpg', 
    'mobile-large-576x480.jpg', 
    'tablet-portrait-768x1024.jpg', 
    'tablet-landscape-1024x768.jpg',
    'laptop-1200x900.jpg',
    'desktop-1900x1200.jpg'
  ]

  If you want to skip a breakpoint, set his value to null.
  As result, this breakpoint will be skipped and use previous src.
  ex: [
    'mobile.jpg',
    null,
    'tablet.jpg',
    'desktop.jpg'
  ]

  The first src is the default value for browser not supporting the feature.
#}
{% if srcs is iterable and not (srcs is empty) %}
  {% set breakpoints = [0, 576, 768, 992, 1200, 1441]|reverse %}

  {# save default src #}
  {% set src = srcs[0] %}

  {# trim srcs to not be longer than breakpoints #}
  {% set srcs = srcs|slice(0, breakpoints|length) %}

  {% set classname = classname|default(null) %}
  {% set attributes = attributes|default([]) %}

  {% set img_classname = img_classname|default(null) %}
  {% set img_attributes = img_attributes|default([]) %}

  {% set alt = alt|default('') %}
  {% set lazyload = lazyload|default(false) %}

  <picture class="{{ classname }}" {{ attributes|join(' ') }}>
    {% for src in srcs|reverse %}

      {# if src is null or first src, avoid <source> #}
      {% if src is not null and not loop.last %}
      <source srcset="{{ src }}" media="(min-width: {{ breakpoints[loop.index0] }}px)">
      {% endif %}

    {% endfor %}

    <img
      src="{{ src }}"
      alt="{{ alt }}"
      {% if lazyload %}loading="lazy"{% endif %}
      class="{{ img_classname }}"
      {{ img_attributes|join(' ') }}
    >
  </picture>

{% endif %}