Mobile data traffic has quadrupled since 2013. In order to cope with a newly diversified device landscape, engineers have embraced responsive design. Implementing “responsive images” is the most important thing that you can do for a responsive site’s performance. In this session, we discuss the past, present, and future of responsive images.

1. IMAGES
RESPONSIVE
PAST,PRESENT,&FUTURE
ERICPORTIS•CLOUDINARY WEBINAR•2016-11-16

2. WHO?
QUESTION #1

5. SHIP HAPPENS

6. ★URBANA!

7. RESPONSIVEIMAGES
COMMUNITY GROUP
http://ricg.io

8. WHAT!?
QUESTION #2

9. <img>

10. src="insufficent"><img

11. SURVEY!
Who’s used these new features?

12. WHY?
QUESTION #3

13. BITMAPSARE
FLUID
FIXED
THEWEBIS
vs.

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

15. 65%
ofthewebis
IMAGES
http://httparchive.org/interesting.php#bytesperpage

16. 1614 kb
2016
2011577 kb
http://httparchive.org/trends.php#bytesImg&reqImg

17. 30”CinemaDisplay2560 x 1600

18. iPhone7Plus2280 x 1242 (logical)
30”CinemaDisplay2560 x 1600

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

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

21. 1024 x768
32%
1280x800
23%
1280x1024
11%
1440x 900
10%
http://statcounter.com
2009
OTHER
4%
OTHER
32%
360x640
16%
1366 x678
14%
1920x1080
7%
375x 667
4%
2016

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

27. 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

28. ADAPTABILITY PRESENTS
NEW OPPORTUNITIES FOR
VISUAL DESIGN

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

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

31. Otherwise altering

32. Otherwise altering

33. HOW?
QUESTION #4

34. LIVECODING!
x descriptors

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

36. NO!

37. IF theuser’sdevicehasadevice-pixel-ratio>=2
THEN loadthisresource.
NO EXCEPTIONS!
MEDIAQUERIES:

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

39. x 2x
<img>
large.jpg

40. 2x=this resourcehasan
“image density”of2!

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

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

44. large.jpgis1280pixelswide
— its<img>hasawidthof640 pxonthelayout
= large.jpghasanimagedensityof 2x
.
.

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

46. xdescriptorsonlyworkfor
fixed-widthimages!

47. LIVECODING!
w and sizes

48. LIVECODING!
picture and media

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

50. LIVECODING!
picture and type

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+ 13+
SAFARI 7.1+ 9+ 9.1+

54. X W+SIZES PICTURE
ANDROIDSTOCK 53+ 53+ 53+
CHROMEFORANDROID 44+ 44+ 44+
OPERAMINI Impossible?
IEMOBILE Nada.
EDGEMOBILE 12+ 13+ 13+
iOSSAFARI 8+ 9.2+ 9.3+

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. srcset + sizes
http://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary
Art Direction
http://cloudinary.com/blog/automatically_art_directed_responsive_images
Breakpoints Generation
http://www.responsivebreakpoints.com
Client Hints
http://cloudinary.com/blog/automatic_responsive_images_with_client_hints
RESPONSIVE IMAGES
WITH CLOUDINARY

58. Image Management — Buy vs. Build?
Webinar
Dec7th,2016
http://info.cloudinary.com/webinars.html
ImageCon
FirstEver ImageandVideoManagementConference
March1st,2017inSanFrancisco
https://events.bizzabo.com/imagecon2017
UPCOMING EVENTS

59. Q & A