DONT ADD ANYTHING HERE!

  1. Best viewed on laptop in Responsive Design Mode
    1. ⌃ ⌘ R on Mac/Safari
    2. ⌥ ⌘ R on Mac/Firefox
  2. Remember to refresh page after changing from 1x to 2x etc in responsive design mode!
  3. Image width attribute has been set to 320px with css

Example

Picture of Elva dressed as a fairy

HTML

<img 
    id="elva" 

    srcset="../images/elva-fairy-marked-320w.jpg, 
            ../images/elva-fairy-marked-480w.jpg 1.5x,
            ../images/elva-fairy-marked-640w.jpg 2x" , 

    src="../images/elva-fairy-640w.jpg"

    alt="Picture of Elva dressed as a fairy">

CSS

img#elva {
    width: 320px;
} 

References