Image

Mostly set props

        {% include "@Components/img/img.twig" with {props: {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    alt: "alt of image",
    width: "640",
    height: "480",
    nativeLazyload: true,
    srcset: [
      "https://source.unsplash.com/FV3GConVSss/640x480 1x",
      "https://source.unsplash.com/FV3GConVSss/1280x960 2x",
    ],
    sources: [
      {
        srcset: "https://source.unsplash.com/FV3GConVSss/375x375",
        media: "(max-width: 375px)",
        type: "image/webp"
      },
      {
        srcset: "https://source.unsplash.com/FV3GConVSss/400x400",
        media: "(min-width: 480px) and (max-width: 999px)",
      }
    ]
  }
} %}

          <div class="img">
  <picture>
          
  
        
  
  <source srcset="https://source.unsplash.com/FV3GConVSss/375x375" type="image/webp" media="(max-width: 375px)">

  
        
  
  <source srcset="https://source.unsplash.com/FV3GConVSss/400x400" media="(min-width: 480px) and (max-width: 999px)">
    
    <img src="https://source.unsplash.com/FV3GConVSss/640x480" alt="alt of image" width="640" height="480" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/640x480 1x, https://source.unsplash.com/FV3GConVSss/1280x960 2x">
  </picture>
</div>

Native lazyloading

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    nativeLazyload: true,
  }
} %}

          <div class="img">
  <picture>
    
    <img src="https://source.unsplash.com/FV3GConVSss/640x480" alt="" loading="lazy" draggable="false">
  </picture>
</div>

Srcset

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    srcset: [
      "https://source.unsplash.com/FV3GConVSss/640x480 1x",
      "https://source.unsplash.com/FV3GConVSss/1280x960 2x",
    ]
  }
} %}

          <div class="img">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x480" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/FV3GConVSss/640x480 1x, https://source.unsplash.com/FV3GConVSss/1280x960 2x">
  </picture>
</div>

set With and height

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    alt: "alt of image",
    width: "640",
    height: "480",
  }
} %}

          <div class="img">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x480" alt="alt of image" width="640" height="480" draggable="false">
  </picture>
</div>

With extra class for JS or specific component

        {% include "@Components/img/img.twig" with {
  props : {
    extraClass: "i-post__image",
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    alt: "alt of image",
    width: "640",
    height: "480",
    srcset: [
      "https://source.unsplash.com/FV3GConVSss/640x480 1x",
      "https://source.unsplash.com/FV3GConVSss/1280x960 2x",
    ]
  }
} %}

          <div class="img    i-post__image">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x480" alt="alt of image" width="640" height="480" draggable="false" srcset="" data-srcset="https://source.unsplash.com/FV3GConVSss/640x480 1x, https://source.unsplash.com/FV3GConVSss/1280x960 2x">
  </picture>
</div>

Ratio 3:2

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    alt: "alt of image",
    ratio: "3-2",
  }
} %}

          <div class="img  --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x480" alt="alt of image" draggable="false">
  </picture>
</div>

Ratio 4:3

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    alt: "alt of image",
    ratio: "4-3",
  }
} %}

          <div class="img  --ratio-4-3">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x480" alt="alt of image" draggable="false">
  </picture>
</div>

Ratio 16:9

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x480",
    alt: "alt of image",
    ratio: "16-9",
  }
} %}

          <div class="img  --ratio-16-9">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x480" alt="alt of image" draggable="false">
  </picture>
</div>

Ratio 1:1

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/640x640",
    alt: "alt of image",
    ratio: "1-1",
  }
} %}

          <div class="img  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/640x640" alt="alt of image" draggable="false">
  </picture>
</div>

Sizes

        {% include "@Components/img/img.twig" with {
  props : {
    src: "https://source.unsplash.com/FV3GConVSss/1356x904",
    srcset: [
      "https://source.unsplash.com/525x350?monkey 525w",
      "https://source.unsplash.com/850x565?horse 850w",
      "https://source.unsplash.com/1410x940?tiger 1410w",
      "https://source.unsplash.com/2680x1790?bird 2680w",
    ],
    sizes: [
      "(max-width: 565px) 100vw",
      "(max-width: 767px) 524px",
      "(max-width: 991px) 704px",
      "(max-width: 1199px) 848px",
      "(max-width: 1499px) 1124px",
      "1342px",
    ],
    ratio: "3-2"
  }
} %}

          <div class="img  --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/FV3GConVSss/1356x904" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/525x350?monkey 525w, https://source.unsplash.com/850x565?horse 850w, https://source.unsplash.com/1410x940?tiger 1410w, https://source.unsplash.com/2680x1790?bird 2680w" sizes="" (max-width: 565px) 100vw, (max-width: 767px) 524px, (max-width: 991px) 704px, (max-width: 1199px) 848px, (max-width: 1499px) 1124px, 1342px">
  </picture>
</div>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    }
  }
}