Slides from Morten Rand-Hendriksen's presentation at JavaScript Open in Vancouver, June 25th, 2015.
Responsive Images are one of the missing pieces in the puzzle that makes up our new responsive web. Using the new RICG spec for srcset, sizes, and the picutre element, web designers and developers can instruct the browser to serve the visitor with the best possible image for their screen resolution and size, all the while saving bandwidth and processing power. Learn how the new spec and markup works, how and when to use srcset, sizes, and the picture element, and how to implement Responsive Images in your live production sites today.
http://jsopen.lighthouselabs.ca/
23. A Tale of Two Scenarios
Regular Images:
<img> + srcset + sizes
Use for images in articles,images in galleries, images incontext,
basically all images.
Edge Cases:
<picture> + source + srcset
Use for art direction,
progressive enhancementof new file types,
so rarely.
30. Responsive Images is an
invisible browser function:
If they work, nobody will notice.
31. A Responsive Images Problem
Assuming a web page is responsive,
how does the browser know how
wide an image is in relation to the
total viewport at any given time?
34. sizes
A list of one or more strings
separated by commas indicating a
set of source sizes.
Each source size consists of a media
condition and a source size value.
49. <img> + srcset + sizes provides the
browser with options and lets it decide when
to load what image source.
<picture> + source + srcset allows you
to explicitly tell the browser what to do.
62. <picture> caveats
• Art direction as described here is
the edge-case of edge cases
• Browsers are not handling this stuff
well yet <cough>Firefox</cough>
• If you are changing the image, you
are changing the message.
66. A Tale of Two Scenarios
Regular Images:
<img> + srcset + sizes
Use for images in articles,images in galleries, images incontext,
basically all images.
Edge Cases:
<picture> + source + srcset
Use for art direction,
progressive enhancementof new file types,
so rarely.
67. Further reading
• responsiveimages.org
• developer.mozilla.org
• scottjehl.github.io/picturefill/
• srcset and sizes by Eric Portis
• What is the purpose of the sizes attribute?
• Responsive Images at lynda.com