<h1>Responzivní obrázky: srcset &amp; sizes</h1>

​

<pre><code>&lt;img srcset=&quot;small_600.png 600w, medium_1024.png 1024w, large_1600.png 1600w&quot;

  <b>sizes=&quot;(min-width: 800px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)&quot;</b>    

  alt=&quot;Obr&aacute;zek&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</code></pre>

​

<p>

  <a href="http://www.vzhurudolu.cz/prirucka/srcset-sizes">Článek</a>. 

</p>

​

<div class="images">

​

  <p class="image">

    <img      

    srcset="https://via.placeholder.com/600 600w, 

    https://via.placeholder.com/1024 1024w,

    https://via.placeholder.com/1600 1600w"

    sizes="(min-width: 800px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)"    

    alt="Obrázek" width="200" height="200">

  </p>

​

  <p class="image">

    <img      

    srcset="https://via.placeholder.com/600 600w, 

    https://via.placeholder.com/1024 1024w,

    https://via.placeholder.com/1600 1600w"

    sizes="(min-width: 800px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)"    

    alt="Obrázek" width="200" height="200">

  </p>

</div>

/* Layout */

​

@media only screen and (min-width: 800px) {  

  .image {

    float: left;

    width: 49%;

  }  

  .image:first-child {

    margin-right: 2%;

  }

}

​

/* Base */

​

img {

  width: 100%;

  height: auto;

}