Jump to content

How to make cell phone browsers choose smaller image, and desktop choose bigger image when their resolutions are the same


Recommended Posts


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,
            srcset="media/img/small.webp 479w,
                    media/img/medium.webp 991w,
                    media/img/big.webp 1400w"

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...