deddydores

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.

I have the following script:

<img sizes="(max-width: 479px) 479px,
            (max-width: 991px) 991px,
            1400px"
            srcset="media/img/small.webp 479w,
                    media/img/medium.webp 991w,
                    media/img/big.webp 1400w"
            src="media/img/default.png">

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.

How to make the cell phone's browser choose small.webp?

Thank you

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.

I have the following script:

<img sizes="(max-width: 479px) 479px,
            (max-width: 991px) 991px,
            1400px"
            srcset="media/img/small.webp 479w,
                    media/img/medium.webp 991w,
                    media/img/big.webp 1400w"
            src="media/img/default.png">

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.

How to make the cell phone's browser choose small.webp?

Thank you