0

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

Andy
  • 61
  • 1
  • 2
  • 7

2 Answers2

1

One way that I bypassed this was that I created different image classes for phone and desktop. So

  .desktop{
width: whatever you want
 }
 @media only screen and (max-width:1080px){
 .phone{
width: the other one you want
 }
 }
 
 </style>
CJOSEPH
  • 21
  • 4
  • I assume there is solution from the HTML elements and their attributes. So, I have to use css? – Andy Nov 24 '20 at 05:52
  • Yes add this css in a styles section at the top of the HTML page. You don’t have to use this method however, I think the other answer below let’s you do this with just HTML elements. – CJOSEPH Nov 24 '20 at 06:06
  • If I am not mistaken, when I use the answer below, then the browser will choose medium.webp, since the screen width is 1080 px. – Andy Nov 24 '20 at 07:11
  • You can change the min-width to 1080 then and then change the other min-width to a lower number. – CJOSEPH Nov 24 '20 at 16:46
  • 1
    The cell phone's resolution is 1080 px. I think I have found the solution that I must use javascript to identify wether a deivice is mobile or not. https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device – Andy Nov 25 '20 at 03:02
1
<picture>
  <!--big-->
  <source media="(min-width:1400px)" srcset="big.webp">

  <!--medium-->
  <source media="(min-width:991px)" srcset="medium.webp">

  <!--small-->
  <img src="small.webp" style="width:auto;">
</picture>

https://www.w3schools.com/TAgs/tag_picture.asp

plop
  • 88
  • 7