Improving Performance with Responsive Images [jQueryTO]

1.

None

2.

Improving Performance with Responsive Images jQueryTO March 15, 2014

3.

https://github.com/nwtn/  pres-respimg-perf-jqueryto

4.

“Good performance is good design” Brad Frost

5.

None

6.

None

7.

bradfrostweb.com

8.

“More human beings today have access to a cellphone than
the United Nations says have access to a clean toilet.” Anand Giridharadas, New York Times, April 10 2010

9.

“More human beings today have access to a cellphone than
the United Nations says have access to a clean toilet.” Anand Giridharadas, New York Times, April 10 2010

10.

bradfrostweb.com

11.

bradfrostweb.com

12.

1.A ﬂexible, grid-based layout, 2.Flexible images and media, 3.Media queries,
a module from the CSS3 speciﬁcation

13.

1.A ﬂexible, grid-based layout, 2.Flexible images and media 3.Media queries,
a module from the CSS3 speciﬁcation

14.

img { max-width: 100%; }

15.

None

16.

None

17.

A solution Serve one big image and let the browser
scale it

18.

None

19.

None

20.

None

21.

Average web page size: 1,703 KB.      Images account
for 1,063 KB,  over 62% of total.    HTTP Archive, March 1 2014

22.

2x resolution = 4x as many pixels

23.

energy more pixels = more money time

24.


25.

A better solution Serve an appropriately-sized image to each user

26.

Responsive Images

27.

None

28.

None

29.

None

30.

None

31.

SVG, WebP, JPEG XR

32.

<picture> + srcset:  http://picture.responsiveimages.org/ Mozilla: Q1  Blink (Chrome/Opera): Soon  Webkit
(Apple, etc.): Also soon?  MS: ?

33.

<picture> + srcset:  http://picture.responsiveimages.org/ Mozilla Q1  Blink (Chrome/Opera) Soon  Webkit
(Apple, etc.) Also soon?  MS ?

34.

Client Hints:  http://tools.ietf.org/html/draft-grigorik-http-client-hints-01

35.

None

36.

<picture>  <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> !  <img src="small.jpg" alt="A rad wolf" /> </picture>

37.


38.


39.


40.


41.


42.


43.


44.

None

45.

<picture>  <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> !  <img src="pic1x.jpg" alt="A rad wolf" /> </picture>

46.


47.


48.


49.


50.


51.

None

52.

<img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad
wolf" />

53.

wolf" />

54.

wolf" />

55.

wolf" />

56.

<img srcset="pic1x.jpg 1x, pic1.5x.jpg 1.5x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg"
alt="A rad wolf" />

57.

None

58.

<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>

59.


60.


61.


62.


63.


64.

None

65.

<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

66.


67.


68.


69.


70.


71.

None

72.

<picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg
400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

73.

<picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg
400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>

74.

None

75.

<picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"
/> </picture>

76.

/> </picture>

77.

/> </picture>

78.

/> </picture>

79.

http://picture.responsiveimages.org/

80.

Pictureﬁll by Scott Jehl https://github.com/scottjehl/pictureﬁll

81.

<span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img
/> </noscript> </span>

82.


83.


84.


85.

Imager https://github.com/BBC-News/Imager.js RWD.Images https://github.com/stowball/rwd.images.js

86.

Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG

87.

Images Use SVG

88.

None

89.

None

90.

None

91.

Resource Priorities http://www.w3.org/TR/resource-priorities/

92.

Images Use SVG

93.

Images Use SVG

94.

ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/

95.

grunt-svgmin https://github.com/sindresorhus/grunt-svgmin Scour https://launchpad.net/scour

96.

Images Use SVG

97.

Images Use SVG

98.

Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images
Use SVG

99.

Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images
SVG

100.

Impact

101.

None

102.

None

103.

1,870KB 564KB 3,505KB Images (content) Images (style) Other content

104.

Optimizations • ImageOptim-CLI on all images • WebP • Responsive
images using Pictureﬁll, for DPI- and viewport switching on content images

105.

1,870KB 564KB 3,505KB Images (content) Images (style) Other content

106.

1,870KB 72KB 261KB Images (content) Images (style) Other content

107.

1,870KB 72KB 534KB Images (content) Images (style) Other content

108.

None

109.


110.

“Responsible images are good design” Dave Newton

111.

David Newton! @newtron on Twitter @nwtn on GitHub david@davidnewton.ca

Improving Performance with Responsive Images [jQueryTO]

Improving Performance with Responsive Images [jQueryTO]

Want more?

Transcript