Adaptive img via picture

<picture>
  <source type="image/webp" media="(min-width: 1200px)" srcset="img/photo-1-desktop.webp 1x, img/photo-1-desktop@2x.webp 2x">
  <source type="image/webp" media="(min-width: 768px)" srcset="img/photo-1-tablet.webp 1x, img/photo-1-tablet@2x.webp 2x">
  <source type="image/webp" srcset="img/photo-1-mobile.webp 1x, img/photo-1-mobile@2x.webp 2x">

  <source media="(min-width: 1200px)" srcset="img/photo-1-desktop.jpg 1x, img/photo-1-desktop@2x.jpg 2x">
  <source media="(min-width: 768px)" srcset="img/photo-1-tablet.jpg 1x, img/photo-1-tablet@2x.jpg 2x">
  <img class="works-item__image" src="img/photo-1-mobile.jpg" srcset="img/photo-1-mobile@2x.jpg 2x" alt="Пример нашей работы">
</picture>

<picture>
  <source media="(min-width: 1200px)" srcset="img/logotype-desktop.svg">
  <source media="(min-width: 768px)" srcset="img/logotype-tablet.svg">
  <img src="img/logotype-mobile.svg" width="226" height="30" alt="Барбершоп «Бородинский»">
</picture>

<picture>
  <source media="(min-width: 1200px)" srcset="img/photo-1-desktop.jpg 1x, img/photo-1-desktop@2x.jpg 2x">
  <source media="(min-width: 768px)" srcset="img/photo-1-tablet.jpg 1x, img/photo-1-tablet@2x.jpg 2x">
  <img class="works-item__image" src="img/photo-1-mobile.jpg" srcset="img/photo-1-mobile@2x.jpg 2x" alt="Пример нашей работы">
</picture>

<picture>
 <source type="image/webp"  media="(min-width: 960px)" srcset="img/desktop-large.webp 2x,img/desktop-small.webp 1x">
 <source media="(min-width: 960px)" srcset="img/desktop-large.jpg 2x,img/desktop-small.jpg 1x">
</picture>

---------------------------
<img
 src="400.png"
 srcset="400.png 400w,
 800.png 800w,
 1200.png 1200w"
 sizes="(min-width: 600px) 50vw : 100vw"
>

img { CSS
 width: 100%;
 max-width: 100%;
}
@media (min-width: 600px) {
 img {
 width: 50%;
 }
}
---------------------------

http://scottjehl.github.io/picturefill/