Image

Mostly set props

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

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

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

Native lazyloading

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x480.jpeg",
    nativeLazyload: true,
  }
} %}

          <div class="img">
      <picture>
    
    <img src="images/examples/FV3GConVSss-640x480.jpeg" alt="" loading="lazy" draggable="false">
  </picture>
</div>

Srcset

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x480.jpeg",
    srcset: [
      "images/examples/FV3GConVSss-640x480.jpeg 1x",
      "images/examples/FV3GConVSss-1280x960.jpeg 2x",
    ]
  }
} %}

          <div class="img">
      <picture>
    
    <img src="" data-src="images/examples/FV3GConVSss-640x480.jpeg" alt="" draggable="false" srcset="" data-srcset="images/examples/FV3GConVSss-640x480.jpeg 1x, images/examples/FV3GConVSss-1280x960.jpeg 2x">
  </picture>
</div>

set With and height

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x480.jpeg",
    alt: "alt of image",
    width: "640",
    height: "480",
  }
} %}

          <div class="img">
      <picture>
    
    <img src="" data-src="images/examples/FV3GConVSss-640x480.jpeg" 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: "images/examples/FV3GConVSss-640x480.jpeg",
    alt: "alt of image",
    width: "640",
    height: "480",
    srcset: [
      "images/examples/FV3GConVSss-640x480.jpeg 1x",
      "images/examples/FV3GConVSss-1280x960.jpeg 2x",
    ]
  }
} %}

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

Ratio 3:2

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x480.jpeg",
    alt: "alt of image",
    ratio: "3-2",
  }
} %}

          <div class="img  --ratio-3-2">
      <picture>
    
    <img src="" data-src="images/examples/FV3GConVSss-640x480.jpeg" alt="alt of image" draggable="false">
  </picture>
</div>

Ratio 4:3

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x480.jpeg",
    alt: "alt of image",
    ratio: "4-3",
  }
} %}

          <div class="img  --ratio-4-3">
      <picture>
    
    <img src="" data-src="images/examples/FV3GConVSss-640x480.jpeg" alt="alt of image" draggable="false">
  </picture>
</div>

Ratio 16:9

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x480.jpeg",
    alt: "alt of image",
    ratio: "16-9",
  }
} %}

          <div class="img  --ratio-16-9">
      <picture>
    
    <img src="" data-src="images/examples/FV3GConVSss-640x480.jpeg" alt="alt of image" draggable="false">
  </picture>
</div>

Ratio 1:1

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-640x640.jpeg",
    alt: "alt of image",
    ratio: "1-1",
  }
} %}

          <div class="img  --ratio-1-1">
      <picture>
    
    <img src="" data-src="images/examples/FV3GConVSss-640x640.jpeg" alt="alt of image" draggable="false">
  </picture>
</div>

Sizes

        {% include "@Components/img/img.twig" with {
  props : {
    src: "images/examples/FV3GConVSss-1356x904.jpeg",
    srcset: [
      "images/examples/monkey-525x350.jpeg 525w",
      "images/examples/horse-850x565.jpeg 850w",
      "images/examples/tiger-1410x940.jpeg 1410w",
      "images/examples/bird-2680x1790.jpeg 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="images/examples/FV3GConVSss-1356x904.jpeg" alt="" draggable="false" srcset="" data-srcset="images/examples/monkey-525x350.jpeg 525w, images/examples/horse-850x565.jpeg 850w, images/examples/tiger-1410x940.jpeg 1410w, images/examples/bird-2680x1790.jpeg 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"
    }
  }
}