Some examples of using <picture>

pictureExamples.html

<picture>
  <source 
    srcset="<список URL c дескрипторами>" 
    [sizes="<ваши размеры в зависимости от раскладки>"] 
    [media="<медиавыражение>"] 
    [type="<mime/type>"]
  >
 <source ...>
  ...
  <img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>
</picture>

 <img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>

<!-- 
  Браузеры, которые поддерживают элемент <picture>, отобразят картинку в векторном видe. 
  Браузер IE покажет изображение в формате PNG 
-->

<picture>
   <source srcset="image/html5-logo.svg">
   <img src="image/html5-logo.png" width="256" height="256" alt="HTML5">
</picture> 

<!-- Retina -->
<img
  src="images/400.jpg"  
  srcset="images/800.jpg 2x, images/1200.jpg 3x"
  width="400" height="300"
>
<!-- Adaptive -->
img {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 600px) {
  img {
    width: 50%;  
  }
}
<img
  src="400.jpg"  
  srcset=" 
          400.jpg 400w, 
          800.jpg 800w, 
          1200.jpg 1200w"
  sizes="(min-width: 600px) 50%, 100vw"
>

<!-- "crop" -->
<picture>
     <source media="(min-width:1024px)"
           srcset="crowd.png">
     <source media="(min-width:640px)"
           srcset="group.png">
     <img src="face.png">
</picture>