{% if image.attributes %}
  {% set attributes = create_attribute(image.attributes) %}
{% else %}
  {% set attributes = create_attribute() %}
{% endif %}


{% set sizes = [50, 100, 200, 320, 480, 640, 800, 1024, 1366, 1536, 1920, 2560] %}
{% set srcset = "" %}
{% set imageWidth = imagesize(image.src) %}
{% set ext = image.src|split('.')|last %}
{#{% set path = publicpath(image.src|split('.' ~ ext)|first) %}#}
{% set path = image.src|split('.' ~ ext)|first %}
  
{% for size in sizes if (size <= imageWidth) %}
  {% if size == imageWidth %}
    {% set srcset = srcset ~ '../..' ~ path ~ '.' ~ ext ~ ' ' ~ size ~ 'w' ~ ', ' %}
  {% else %}
    {% set srcset = srcset ~ '../..' ~ path ~ '-' ~ size ~ '.' ~ ext ~ ' ' ~ size ~ 'w' ~ ', ' %}
  {% endif %}
{% endfor %}
{% set srcset = srcset|trim(', ') %}


{% if ext == "svg" %}
  {% set srcset = path ~ '.' ~ ext %}
{% endif %}


{% if image.src starts with '/' and ext != "svg" %}
  {% set placeholder_color = ' background-color: ' ~ bgcolor(image.src) ~ ';' %}
{% endif %}


{% if image.placeholder_image == true %}
  {% set placeholder_image = "background-image: url('" ~  base64(image.src) ~ "'); " %}
{% endif %}




<div class="o-ratio" style="
padding-bottom: {{ ratio(image.src) }}; 
{{ placeholder_image }}
{{ placeholder_color }}
">
  <img class="{{ image.classes }} {% if image.lazyload == true %}js-lazyload {% endif %}" 
  {% if image.lazyload %}
    data-sizes="auto" data-srcset="{{ srcset }}"
    {#src="{{ lazyload_placeholder }}"#}
    src="{{ image.src }}"
  {% else %}
    src="{{ path ~ '.' ~ ext | default(publicpath("/images/placeholders/fpo_16x9.png")) }}" srcset="{{ srcset }}"
  {% endif %} {{attributes}}>


  <noscript>
    <img src="{{ path ~ '.' ~ ext }}">
  </noscript>
</div>