Search code examples
htmlcssmedia-queries

srcset and sizes always download the biggest

Here's the code

<img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" sizes="(max-width: 511px) 60w, 65w">

I expect it to download 2.jpg, but instead it downloads 4.jpg. However, 4.jpg Why 2500vw is downloaded while I put 65w in sizes. The viewport I'm checking it with is 1500px.

Solution

  • You should not use w as the unit in sizes.

    Correct syntax:

    <img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" 
srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" 
sizes="(max-width: 511px) 60px, 65px">