Cacher is the code snippet organizer for pro developers

<picture>
  <source srcset="blog-10-wide@1x.webp 1x,
                  blog-10-wide@2x.webp 2x"
          media="(min-width: 600px)"
          type="image/webp">
  <source srcset="blog-10-wide@1x.png 1x,
                  blog-10-wide@2x.png 2x"
          media="(min-width: 600px)">
  <source srcset="blog-10-square@1x.webp 1x,
                  blog-10-square@2x.webp 2x"
          type="image/webp">
  <img src="blog-10-square@1x.png"
       srcset="blog-10-square@2x.png 2x"
       alt="Девушка пьёт кофе">    
</picture>

img {
  max-width: 100%;
}