Front W - Pattern Library

Image: Responsive 

<img src="/placeholder/600x400.jpg" srcset="/placeholder/600x400.jpg 576w,/placeholder/1200x800.jpg 740w,/placeholder/1400x800.jpg 1000w" alt="Bildbeschreibung" decoding="async" class="img-fluid" width=600 height=400>
 
{% set breakpoints = {
  sm: 576,
  md: 740,
  lg: 1000,
  xl: 1400,
} %}

<img {{ lazy ? 'data-' }}src="{{ image.src }}" {% if image.srcset %}srcset="{% for bp, src in image.srcset %}{{ src }} {{ breakpoints[bp] }}w{{ loop.last ? '' : ',' }}{% endfor %}"{% endif %} alt="{{ image.alt }}" decoding="async"{{ lazy ? ' loading="lazy"' }} class="img-fluid{{ lazy ? ' lazy' }}"{{ image.width ? ' width=' ~ image.width}}{{ image.height ? ' height=' ~ image.height}}>
 
{
  "image": {
    "src": "/placeholder/600x400.jpg",
    "alt": "Bildbeschreibung",
    "srcset": {
      "sm": "/placeholder/600x400.jpg",
      "md": "/placeholder/1200x800.jpg",
      "lg": "/placeholder/1400x800.jpg"
    },
    "width": "600",
    "height": "400"
  }
}