Picture tag two

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
 <div class="container">
<!--<link rel="preload" as="image" href="https://via.placeholder.com/160x80">-->
<link rel="dns-prefetch" href="via.placeholder.com">

  <a href="https://via.placeholder.com/1280x720" target="_blank">
     <picture>
       <source srcset="https://via.placeholder.com/160x80" media="(max-width: 640px)">
       <source srcset="https://via.placeholder.com/320x160" media="(max-width: 1024px)">
       <source srcset="https://via.placeholder.com/640x320" media="(max-width: 1280px)">
       <source srcset="https://via.placeholder.com/720x640" media="(max-width: 2048px)">
       <img src="https://via.placeholder.com/1280" alt="Plya the cat">
     </picture>
     <!-- https://via.placeholder.com/320 -->
  </a>
 </div>

CSS

.container {
  margin-top: 5%;
}