{% comment %}
  Obraz w kilku wersjach: przeglądarka bierze pierwszy format, który zna,
  i najmniejszy plik pasujący do szerokości ekranu. Bez wersji zostaje
  samo <img> z oryginałem.
{% endcomment %}
{% if src %}
  {% if sources %}
    {% comment %}Element <picture> nie może wtrącać się w układ strony -
      "contents" sprawia, że przeglądarka traktuje obraz tak, jakby leżał
      wprost w rodzicu, więc klasy szablonu działają jak przy zwykłym <img>.{% endcomment %}
    <picture class="contents">
      {% for source in sources %}
        <source type="{{ source.mime }}" srcset="{{ source.srcset }}" sizes="{{ sizes }}">
      {% endfor %}
      <img src="{{ src }}"{% if srcset %} srcset="{{ srcset }}" sizes="{{ sizes }}"{% endif %}
           alt="{{ alt }}"{% if css %} class="{{ css }}"{% endif %}{% if width %} width="{{ width }}" height="{{ height }}"{% endif %}
           loading="{{ loading }}" decoding="async"{% if fetchpriority %} fetchpriority="{{ fetchpriority }}"{% endif %}>
    </picture>
  {% else %}
    <img src="{{ src }}"{% if srcset %} srcset="{{ srcset }}" sizes="{{ sizes }}"{% endif %}
         alt="{{ alt }}"{% if css %} class="{{ css }}"{% endif %}{% if width %} width="{{ width }}" height="{{ height }}"{% endif %}
         loading="{{ loading }}" decoding="async"{% if fetchpriority %} fetchpriority="{{ fetchpriority }}"{% endif %}>
  {% endif %}
{% endif %}