CODEWITHSUNDEEP
imagecssresponsive-designsrcset
marcelo2605
marcelo2605

Reputation: 2794

srcset: define a file to retina desktop

This is how my image tag look like:

<img 
    src="img/thumb-teste-270x190.jpg" alt="usro" 
    sizes="(max-width: 20em) 100vw, 
           (min-width: 50em) 10vw"
    srcset="img/thumb-teste-270x190.jpg 270w,
            img/thumb-teste-690x486.jpg 690w"
>

For desktop device, I use a small thumb (270x190). For mobile devices, I use the big thumb (690x486). But how can I create a rule for retina desktop use a medium thumb (540x380)?

Upvotes: 1

Views: 254

Answers (1)

dacmo
dacmo

Reputation: 228

You don't need to specify that the 540x380 image must be used on retina, if you just add that image into srcset the browser should be smart enough to figure out when to use it:

<img 
   src="img/thumb-teste-270x190.jpg" alt="usro" 
   sizes="(max-width: 20em) 100vw, 
          (min-width: 50em) 10vw"
   srcset="img/thumb-teste-270x190.jpg 270w,
           img/thumb-teste-540x380.jpg 540w,
           img/thumb-teste-690x486.jpg 690w"
>

There's a good post on this as well.

Upvotes: 1

Related Questions