0

I am trying to get to grips with srcset but I am having trouble finding a detailed reference.

From what I understand I can do something like this to specify an image for a mobile phone.

<img src="1.jpg" alt=""
  srcset="1x300.jpg 300w"
  sizes="(max-width: 480px) 300px">

However I am unclear how I can specify to correct image for the display density.

In the above example at a screen width of less than 480px I have specified to use the 300px image. However on a 2x retina display I would want a 600px width image but the screen size will still read as 480px.

How do I specify another image for a different pixel density?

Guerrilla
  • 13,375
  • 31
  • 109
  • 210

1 Answers1

-1

Basic structure for the IMG tag with SRCSET and SIZES,

<img src="images.jpg" srcset="images1x.jpg 200w, images2x.jpg 400w,
images8x.jpg 600w" sizes="(max-width: 40em) 100vw, 50vw" alt="Some Text">

Reference

M Vinoth Kumar
  • 1
  • 3
  • 1
    That is the same method that I put in my question. It doesn't show how to specify images for different pixel densities and screen width. – Guerrilla Feb 05 '16 at 10:20