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/

1. RESPONSIVE
IMAGES
in real life
by Morten Rand-Hendriksen

2. @MOR10

6. <img
src="images/original.jpg"
alt="Minions and Androids"
height="800px"
width="400px"
>

8. <img
src="images/original.jpg"
alt="Minions and Androids"
height="800px"
width="400px"
>

9. RWD

10. <img {
max-width: 100%;
}
<img
src="images/original.jpg"
alt="Minions and Androids"
>
+

11. vs.Flexible Responsive
Responsive
Responsive
Responsive
Responsive
Responsive
Responsive
Responsive

12. Same image:
1200px wide
1200px
600px

14. 1x 2x 3x 4x

15. Same image:
2400px wide
1200px
600px
2x

16. Size of the average web page,
of which 1300kB are images.
2MB
http://httparchive.org/

17. Mobile users expect pages to load as fast
or faster than they load on the desktop.
85%
http://goo.gl/T90nV3

19. http://caniuse.com/#search=srcset

20. http://goo.gl/lki4ew

21. http://scottjehl.github.io/picturefill/

22. srcset + sizes
<picture>

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.

24. Regular images:
<img> + srcset + sizes

25. <img
src="images/original.jpg"
alt="Minions and Androids"
>

26. <img
src="images/original.jpg"
alt="Minions and Androids"
srcset="images/small.jpg 600w,
images/medium.jpg 800w,
images/large.jpg 1200w,
images/extralarge.jpg 1600w"
sizes="(min-width: 48em) 800px, 100vw"
>

27. srcset
A list of one or more strings
separated by commas indicating
a set of possible image sources
for the user agent to use.

28. <img
src="images/original.jpg"
alt="Minions and Androids"
srcset="images/small.jpg 600w,
images/medium.jpg 800w,
images/large.jpg 1200w,
images/extralarge.jpg 1600w"
sizes="100vw"
>

29. srcset="images/small.jpg 600w,
images/medium.jpg 800w,
images/large.jpg 1200w,
images/extralarge.jpg 1600w"
<
>
Pixel width of
actual image file.

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?

32. 60% of viewport width85%100%

33. On load,
the browser
knows nothing
about the relative
sizes of the images
being loaded.

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.

35. <img
src="images/original.jpg"
alt="Minions and Androids"
srcset="images/small.jpg 600w,
images/medium.jpg 800w,
images/large.jpg 1200w,
images/extralarge.jpg 1600w"
sizes="100vw"
>

36. <img
src="images/original.jpg"
alt="Minions and Androids"
srcset="images/small.jpg 600w,
images/medium.jpg 800w,
images/large.jpg 1200w,
images/extralarge.jpg 1600w"
sizes="(min-width: 48em) 800px, 100vw"
>

37. <
>
sizes="(min-width: 48em) 800px, 100vw"
Media condition
(media query)
Source
size
Fallback
size

38. (min-width: 1400px) 1200px
(min-width: 800px)
85vw
100vw

39. sizes="
(min-width: 1400px) 1200px,
(min-width: 800px) 85vw,
100vw"

40. With Responsive Images
we can no longer separate
content from its presentation.

41. Responsive Images is
Progressive Enhancement
you can use today.

42. <img
src="images/original.jpg"
alt="Minions and Androids"
srcset="images/small.jpg 600w,
images/medium.jpg 800w,
images/large.jpg 1200w,
images/extralarge.jpg 1600w"
sizes="(min-width: 1400px) 1200px,
(min-width: 800px) 85vw,
100vw"
>

43. Practical Application
(Responsive Images in the Real World)

44. For standard layouts, use the w descriptor.
Scale images to match natural CSS breakpoints.

45. For thumbnail
grids, use the x
descriptor.
Do the same with
modal windows.
Scale images to
match max width,
max width x2, etc.

46. For thumbnails and small images, Responsive
Images have limited value. Use 2x or 3x images
scaled for the largest
possible iteration.

47. Responsive Images
require automation tools.

48. Edge cases:
<picture> + <source> + srcset

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.

50. <picture>
<source srcset="wide.jpg, wide-2x.jpg 2x"
media="(min-width: 800px)">
<source srcset="tall.jpg, tall-2x.jpg 2x"
media="(min-width: 600px)">
<img src="images/elemonkey-square.jpg"
srcset="images/elemonkey-square-2x.jpg 2x"
sizes="100vw"
alt="Elephant and Monkey">
</picture>

53. <picture>
<source srcset="wide.jpg, wide-2x.jpg 2x"
media="(min-width: 800px)">
<source srcset="tall.jpg, tall-2x.jpg 2x"
media="(min-width: 600px)">
<img src="images/elemonkey-square.jpg"
srcset="images/elemonkey-square-2x.jpg 2x"
sizes="100vw"
alt="Elephant and Monkey">
</picture>

54. <picture
<
<
<
</picture
<picture>
</picture>

55. <picture
<
<
<
</picture
<img src="images/elemonkey-square.jpg"
srcset="images/elemonkey-square-2x.jpg 2x"
sizes="100vw"
alt="Elephant and Monkey">

56. <picture
<
<
<
</picture
<source srcset="wide.jpg, wide-2x.jpg 2x"
media="(min-width: 800px)">
<source srcset="tall.jpg, tall-2x.jpg 2x"
media="(min-width: 600px)">

57. <picture
<
<
<
</picture
<source srcset="tall.jpg, tall-2x.jpg 2x"
media="(min-width: 600px)">

58. <picture
<
<
<
</picture
<source srcset="tall.jpg, tall-2x.jpg 2x"
media="(min-width: 600px)">

59. When using <picture> you must
make sure your CSS breakpoints
match your image breakpoints.

60. <picture> as
Progressive Enhancement

61. <picture>
<source
srcset="mdn-logo.svg"
type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>

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.

63. In Summary

64. srcset + sizes
<picture>

65. http://scottjehl.github.io/picturefill/

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

68. @MOR10