Responsive layouts squish and stretch, tailoring themselves to the browsing context at hand. But images — which account for nearly two-thirds of the weight of the web — have been stuck in the fixed-layout past. Their solitary src has forced developers to optimize images around a particular context. Until now! New, native responsive image functionality lets authors mark up multiple, alternate image sources. This markup paves the way for enormous performance gains by giving images the ability to adapt to meet users’ needs. In this talk, we’ll kick the new markup’s tires and take it for a spin. We’ll get acquainted with how it works, how it doesn’t, and the new possibilities that it brings. Buckle up!

1. IMAGE
SCRIMMAGE
ATECHY,STRETCHY
ERIC PORTIS•SMASHINGCONFFREIBURG•2015

2. WHO?
QUESTION #1

5. SHIP HAPPENS

6. ★URBANA!

7. RESPONSIVEIMAGES
COMMUNITYGROUP
http://ricg.io

8. WHAT!?
QUESTION #2

9. <img>

10. src="insufficent"><img

11. WHY?
QUESTION #3

12. BITMAPSARE
FLUID
FIXED
THEWEBIS
vs.

13. BITMAP IMAGES ARE THE
BIGGEST PERFORMANCE
BOTTLENECK ON THE
RESPONSIVE WEB

14. 63%
oftheweb is
IMAGES
http://httparchive.org/interesting.php#bytesperpage

15. 736 kb
2015
2011228 kb
http://httparchive.org/trends.php#bytesImg&reqImg

16. 30”CinemaDisplay2560 x 1600

17. iPhone6Plus2280 x 1242 (logical)
30”CinemaDisplay2560 x 1600

18. iPhone6Plus2280 x 1242 (logical)
30”CinemaDisplay2560 x 1600
RetinaiMac5120 x 2880

19. 1024 x 768
32%
1280x 800
23%
1280x 1024
11%
1440x 900
10%
2009
OTHER
4%
OTHER
24%
1366 x768
13%
1920x1080
9%
360x640
8%
768x 1024
7%
2015
http://statcounter.com

20. 1024 x 768
32%
1280x 800
23%
1280x 1024
11%
1440x 900
10%
http://statcounter.com
2009
OTHER
4%
OTHER
24%
1366 x768
13%
1920x1080
9%
360x640
8%
768x 1024
7%
2015

24. VIEWPORTWIDTH WASTEDIMAGE BYTES
360px 72%
760px 53%
1260px 42%
http://timkadlec.com/2013/06/why-we-need-responsive-images/

26. TIM KADLEC:
Mobile Image Processing
VIDEO: https://www.youtube.com/watch?v=jP68rCjSSjM
SLIDES:https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

27. ADAPTABILITY PRESENTS
NEW OPPORTUNITIES FOR
VISUAL DESIGN

28. The day after the release of
the original iPhone
~10 years later
nytimes.com on a small screen

29. Cropping
Some sort of… mammal? Look at that adorable
Portuguese Water dog!

30. Otherwise altering

31. Otherwise altering

32. HOW?
QUESTION #4

33. LIVECODING!
x descriptors

34. 2x =(min-device-pixel-ratio:2)?

35. NO!

36. IF theuser’sdevicehasadevice-pixel-ratio>=2
THEN loadthisresource.
NO EXCEPTIONS!
MEDIA QUERIES:

37. Hey, browser! Herearesomefun
factsabouttheavailableresources.
SRCSETDESCRIPTORS:
YOU DECIDE!

38. x 2x
<img>
large.jpg

39. 2x=thisresourcehas an
“image density”of2!

40. resource width in pixels
— <img>’s width on the layout inCSSpx
= image density e.g., 2x
.
.

42. medium.jpgis640 pixelswide
— its<img>hasawidthof640 pxonthelayout
= medium.jpghasanimagedensityof 1x
..

43. large.jpgis1280pixelswide
— its<img>hasawidthof640 pxonthelayout
= large.jpg hasanimagedensityof 2x
..

44. resource width
— <img>’s width on the layout
= image density
.
.

45. xdescriptorsonly work for
fixed-widthimages!

46. LIVECODING!
w and sizes

47. LIVECODING!
picture and media

48. TAYLORHUNT:
When Responsive Images Get Ugly
http://codepen.io/Tigt/blog/when-responsive-images-get-ugly

49. LIVECODING!
picture and type

50. “Groovy”

51. WHEN?
QUESTION #5

52. NOW!

53. X W+SIZES PICTURE
CHROME 34+ 38+ 38+
OPERA 21+ 25+ 25+
FIREFOX 38+ 38+ 38+
IE Nope.
EDGE 12+ 12+ SOON!
SAFARI 7.1+ 9+ ?*
*Butprobablysoonish

54. X W+SIZES PICTURE
ANDROIDSTOCK Nope.
CHROMEFORANDROID 44+ 44+ 44+
OPERAMINI Impossible?
IEMOBILE Nada.
EDGEMOBILE Probably!
iOSSAFARI 7.1+ 9+ ?*
*Butprobablysoonish

55. ENHANCE
<imgsrc=“mobile-first.jpg”
srcset=“progressive.jpg640w,
enhancement.jpg1280w,
works.jpg1920w”
alt=“Really.”/>

56. https://scottjehl.github.io/picturefill/
POLYFILL
WHEN YOU NEED TO
Picturefill!

57. image-set():letsyouusesrcsetsyntaxinCSS
Client Hints: letyoudosrcset-ythingsontheserver
Container Queries: The RICG’snexttrick?
WICG: Everydaydevelopersshapingtheweb
EXTRA CREDIT

58. THANKS!
ericportis.com
@etportis
P.S.Iwriteafortnightlyrespimgnewsletter!
Signuphere:ricg.io