---
image:
  type: 'hash'
  default: 'public/0m4e7sur4hab4lhh44r9axuga12k/placeholder.png'
class:
  type: 'string'
  default: ''
img_class:
  type: 'string'
  default: 'w-100'
width:
  type: 'integer'
  default: 560
pixel_densities:
  type: 'array'
  default:
  - 1
  - 1.5
  - 2
---
<picture class="{{ class }}">
  <source
    srcset="
      {%- for pixel_density in pixel_densities %}
        {%- assign w = width | times: pixel_density -%}
        {{- image.path | thumbnail: w | component_escape }} {{ pixel_density }}x,
      {% endfor -%}
    "
  >
  <img
    class="{{ img_class }}"
    src="{{ image.path | thumbnail: width | component_escape }}"
    alt="{{ image.description | escape_once }}"
  >
</picture>