andresn
commented
8 years ago Observations:
- One problem I see is that srcset doesn't update the image as soon as you transition a window to a higher res display. Only after you resize the image, check out this experiment I set up: https://jsfiddle.net/drdrace/464x5sns/8/
- The cool thing is that it's smart enough to load the largest version of the image if it's already in browser cache :))))
- It seems the behavior is that it'll pick the image is the closest to one in terms of its pixels / screen size. So if you have 14, 28, and 42px icons, on both a wide screen (1920), or retina (1440), it'll favor the 42px for both (.02, .03 respectively). Even if you set the width of the icon to 7 in this case: https://jsfiddle.net/drdrace/464x5sns/11/ which is odd
Icon 1x (14w)
2x (28w)
3x (42w)
<img width="7" src="https://cloud.githubusercontent.com/assets/69597/18148864/45d108a2-6f91-11e6-9f43-9953b6fedbed.png" srcset=" https://cloud.githubusercontent.com/assets/69597/18148864/45d108a2-6f91-11e6-9f43-9953b6fedbed.png 14w, https://cloud.githubusercontent.com/assets/69597/18148865/45e8ee72-6f91-11e6-8994-db801974ce86.png 28w, https://cloud.githubusercontent.com/assets/69597/18148866/45edda54-6f91-11e6-8be8-6819daffcf87.png 42w " alt="yah">https://jsfiddle.net/drdrace/464x5sns/11/Huge Image
1x (640w)
2x (1280w)
3x (1920)
<img width="640" src="https://cloud.githubusercontent.com/assets/69597/18149356/85ddeae8-6f94-11e6-9e7e-e316ff647fc6.png" srcset=" https://cloud.githubusercontent.com/assets/69597/18149356/85ddeae8-6f94-11e6-9e7e-e316ff647fc6.png 640w, https://cloud.githubusercontent.com/assets/69597/18149349/7af51a2a-6f94-11e6-9732-64737bd05fb1.png 1280w, https://cloud.githubusercontent.com/assets/69597/18149231/dcf7a4aa-6f93-11e6-80b0-147109311329.png 1920w">https://jsfiddle.net/drdrace/464x5sns/8/