title: How to make cell phone browsers choose smaller image, and desktop choose bigger image when their resolutions are the same
body: <p>I do not know how to make cell phone browsers choose the smaller image, and the laptops/desktops choose the bigger image, while their resolutions are the same.</p>
  <p>I have the following script:</p>
  <pre><code>&lt;img sizes=&quot;(max-width: 479px) 479px,
                          (max-width: 991px) 991px,
                          1400px&quot;
                   srcset=&quot;media/img/small.webp 479w,
                           media/img/medium.webp 991w,
                           media/img/big.webp 1400w&quot;
                   src=&quot;media/img/default.png&quot;&gt;
  </code></pre>
  <p>From the above script, when the cell phone's resolution is, let's say 1080 x 1920 pixels, then the browser will choose big.webp.</p>
  <p>How to make the cell phone's browser choose small.webp?</p>
  <p>Thank you</p>