Presented Aug 29, 2018

1. Delivering Beautiful and Fast
Images and Video
Doug Sillars
@DougSillars
Paris JS
August 29, 2018

2. Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
https://www.slideshare.net/dougsillars/
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video

4. 0.5
0.6
0.7
0.8
0.9
Standing in Line Standing on the
edge of a virtual
cliff
Experiencing
Mobile Delays
Solving a Math
Problem
https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf
Stress

5. Large Downloads Induce Delays in Rendering
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100ms: 1% Revenue Walmart & Amazon (Desktop 2001)
4% Mobile Users Throw Their Phones
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters
http://bit.ly/mobileWebStress
http://www.globaldots.com/how-website-speed-affects-conversion-rates/
https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html

6. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18

7. 4 Simple Image Optimizations

8. 4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

9. 4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

10. 4 Simple Image Optimizations
Httparchive.org Webpagetest.org

11. 4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

12. Image Quality
Lossy
Image size is reduced by
removing pixel information
https://developers.google.com/speed/docs/insights/OptimizeImages

13. Image Quality
magick -quality 85 riga.jpg riga85.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg
Lighthouse:
Recommends 85% quality on all images
https://developers.google.com/speed/docs/insights/OptimizeImages

14. Image Quality Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

15. Image Quality Use “In The Wild”
Median Savings (50th percentile):
• 2.83 seconds faster page load
• 419KB less data

16. 100%
3.6 MB
http://res.cloudinary.com/dougsillars/image/upload/v1529005982/IMG_20180614_184507_ssuk1i.jpg

17. 85%
1.87 MB
q_85
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1529005982/IMG_20180614_184507_ssuk1i.jpg

18. 50%
914 KB
q_50
http://res.cloudinary.com/dougsillars/image/upload/q_50/v1529005982/IMG_20180614_184507_ssuk1i.jpg

19. 20%
513 KB
q_20
http://res.cloudinary.com/dougsillars/image/upload/q_20/v1529005982/IMG_20180614_184507_ssuk1i.jpg

20. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

21. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

22. Automate Quality vs. File Size
• Butteraugli
• SSIM: Structural SIMilarity
https://github.com/technopagan/cjpeg-dssim
cjpeg-dssim jpegoptim riga.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg

23. SSIM
1.46 MB
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg

24. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

25. Results:
• Test Load on Motorola G4:

26. 4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

27. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18

28. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18

29. Scalable Vector Graphics (SVG)

30. Scalable Vector Graphics (SVG)

31. Scalable Vector Graphics (SVG)
https://github.com/google/brotli

32. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18

33. File Format: WebP
https://caniuse.com/#feat=webp

34. SSIM + WebP
986 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_

35. File Format: Web
<picture>
<source width = "100%" type="image/webp" srcset=”riga.webp">
<img width = "100%" src=”riga_cjpeg_dssim.jpg"
alt=”Riga, Latvia">
</picture>

36. Image Format Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

37. Image Format Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

38. 4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

39. Image Sizing
-

40. Image Sizing

41. Image Sizing
-

42. Image Sizing
624
832
-

43. Image Sizing
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

44. Image Sizing
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

45. Image Sizing
https://twitter.com/paulcalvano/status/928751141843808256

46. Image Sizing
-
Responsive Images:
Generate a set of images
25 KB difference in size

47. Responsive Images
624
832
625,000 pixels
-
106,000 pixels
519,000 pixels
_________________

48. Responsive Breakpoint Generation
https://github.com/cloudinary/responsive_breakpoints_generator
http://www.responsivebreakpoints.com/

49. Responsive Images

50. Responsive Images

51. Responsive Images

52. Responsive Images Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

53. Responsive Images Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

54. 4 Simple Image Optimizations
1. Quality
2. Format
3. Sizing
4. Lazy Loading

55. Web Usage
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

56. Web Usage
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

57. Lazy Loading
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

58. Lazy Loading Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

59. Lazy Loading Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

60. Lazy Loading
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

61. Preview Images

62. Optimizing Content Delivery
Preview Images
https://github.com/technopagan/sqip

63. Preview Images

64. Animated GIFs
Original MP4
1.4 MB

65. Animated GIFs

66. Animated GIFs
Animated GIF
3.8 MB
270% larger

67. Animated GIFs

68. Animated GIFs
MP4: 256 colors
247KB
93% smaller

69. Animated GIFs
Video Tags:
Video is not pre-loaded, will be last to download
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Img tags are fast!
<picture>
<source type="video/mp4" srcset=”goats.mp4">
<source type="image/webp" srcset=”goats.webp">
<img src=”goats.gif">
</picture>
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/

70. Animated GIFs

71. Video

72. 72
Video
Buffer Rage: a state of uncontrollable
fury or violent anger induced by delayed
or interrupted streaming video content
http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic

73. Video Quality Metrics
1.Does the Video Start?
2.Does the Video Stall?
3.Does it Look Good?

74. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:

75. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start
~800M hours of video
playback lost

76. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start
~800M hours of video
playback lost

77. Video Fails To Start

78. Video Startup Failure

79. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start

80. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
Average Video Start Time:
N. America: 4.91s
Asia: 3.00s
Europe: 4.30s

81. Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

82. Video Startup Delay
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

83. 3rd Party Interference

84. 3rd Party Interference

85. 3rd Party Interference

86. Preload When It Makes Sense
Ad Playback Video
Download

87. Preload When It Makes Sense
Ad Playback Video
Download

88. Preload When It Makes Sense
Ad Playback
Video
Download

89. ...be Careful with Preload
Preload = “auto”

90. …be Careful with Preload

91. Optimizing Video Delivery
What Leads to Startup Delay?
Manifest File:
List of Available
Streams
Player Chooses a Stream Stream Manifest:
List of Video Segments
Player Downloads
Segments into buffer
Video Plays

92. Optimizing Video Delivery
What Leads to Startup Delay?
Example Manifest file:

93. Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects
8.5 MBPS stream Stream Manifest:
List of Video Segments
Buffer takes a long
time to fill
Video Does Not Play
Player immediately changes the
stream choice to 192 KBPS

94. Video Startup

95. Optimizing Video Delivery
What Leads to Startup Delay?
Example Manifest file:

96. Optimizing Video Delivery
What Leads to Startup Delay?
Example Manifest file:

97. Video Startup

98. Video Startup

99. Video Startup

100. Video Startup
10s 11s 12s 13s 14s 15s 16s 17s
4k Low->High:
4K Middle:
4k:High->Low:

101. Video Startup “In the Wild”
75%
20%
5%
https://dougsillars.com/2018/03/29/streaming-video-whats-on-the-web-today/

102. Optimizing Content Delivery
Balancing the Network with Playback
Player uses available streams to balance download with playback

103. Optimizing Content Delivery
Video Streaming

104. Optimizing Content Delivery
Video Streaming
Large throughput gaps can lead to
many stream changes – which can be
visible to user

105. Summary
Testing:
WebPageTest https://www.webpagetest.org
HttpArchive https://httparchive.org
Images:
ImageMagick https://www.imagemagick.org
SSIM https://github.com/technopagan/cjpeg-dssim
LazySizes https://github.com/aFarkas/lazysizes
Responsive Breakpoints http://www.responsivebreakpoints.com/
Cloudinary https://www.cloudinary.com
Tooling

106. Conclusion
Images and Video
can be Beautiful AND Fast

107. Contest – Win a €100 Amazon Gift Card
Optimize Images for Fast Page Load
Submit your entry by June 21 for a chance to win!
Code and tips: https://github.com/dougsillars/dougsillars.github.io
Entry form: http://bit.ly/FastImages
https://dougsillars.github.io