Cheat Sheet: srcset

Web Developer Tools  - Chrome/Safari
Disable resource caching - See > Network > button in menu


Test Pixel Density
=====================

From the console:
> window.devicePixelRatio
# Return current device pixel density

Turn on Responsive Design Mode to test the various emulators.


Get the current source of the image
From the Network tab console

> $0.currentSrc

Scale the browser window to see the browser download the various image sizes



Responsive Images
=====================

srcset
There are two flavors of srcset, one using x to differentiate between device pixel ratios (DPR), and the other using w to describe the image's width.

srcset - the w attribute tells browser the browser the width of the image

srcset assumes images will be displayed at the viewport width.

In cases where the image is a percentage of the width, use the sizes attribute to let the browser know what the CSS sizes (and media queries) will be... this way the browser will have this information and run-time rather than waiting for the CSS to load. The sizes attribute will not change the size of the image. It only informs the browser in advance of the CSS.

In fact, if the sizes attribute is missing, the browser defaults sizes to 100vw, meaning that it expects the image will display at the full viewport width.

Ex of srcset using screen width
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 250px) 100vm, 50vw" alt="some alt text" />

Ex of srcset using DPI
<img src="images/Den_Haag_2x.jpg" srcset="images/Den_Haag_2x.jpg 2x, images/Den_Haag_1x.jpg 1x" alt="Den Haag Skyline">