InternetingIsHard Part 6 – Responsive Images

Part 6 of my posts on internettingishard.

1. Retina display has 2x the ppi of normal screens (iPhone has 3x)
2. Using source set for retina devices
3. <img src=‘illustration-small.png’srcset=‘images/illustration-small.png 1x,images/illustration-big.png 2x’ style=‘max-width: 500px’/>
4. For retina smartphones:

<img src='images/photo-small.jpg'
         srcset='images/photo-big.jpg 2000w,
                 images/photo-small.jpg 1000w'
         sizes='(min-width: 960px) 960px,
                100vw'/>

5. vw is “viewport width”

6. Chrome caches hi res images and uses them despite I’m going specifications

7. Using different images for devices (art direction):

<source media='(min-width: 401px)'
              srcset='images/photo-big.jpg'/>
      <source media='(max-width: 400px)'
              srcset='images/photo-tall.jpg'/>
      <img src='images/photo-small.jpg'/>