Presented to Cologne webperf meetup June 12, 2018

1. Delivering Beautiful and Fast
Images and Video
Doug Sillars
@DougSillars
Köln Webperf
June 12, 2018

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

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

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

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

7. Tools:
• Monitoring & Testing
• Image Manipulations
• Demos
https://www.webpagetest.org
https://www.imagemagick.org
https://www.cloudinary.com

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

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

10. Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

11. Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

12. Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

13. Scalable Vector Graphics (SVG)

14. Scalable Vector Graphics (SVG)

15. Scalable Vector Graphics (SVG)

16. Scalable Vector Graphics (SVG)
https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually

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

18. Image Compression
Lossy
Image size is reduced by
removing pixel information
magick -quality 85 ireland.jpg ireland85.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg
https://developers.google.com/speed/docs/insights/OptimizeImages

19. Image Compression
Lossy
Image size is reduced by
removing pixel information
magick -quality 85 ireland.jpg ireland85.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg
Google:
Recommends 85%
compression on all
images
https://developers.google.com/speed/docs/insights/OptimizeImages

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

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

22. 100%
2.8 MB
http://res.cloudinary.com/dougsillars/image/upload/v1526279646/ireland_mwnkwo.jpg

23. 85%
1.3 MB
q_85
http://res.cloudinary.com/dougsillars/image/q_85/upload/v1526279646/ireland_mwnkwo.jpg

24. 50%
551KB
q_50
http://res.cloudinary.com/dougsillars/image/q_50/upload/v1526279646/ireland_mwnkwo.jpg

25. 20%
274 KB
q_20
http://res.cloudinary.com/dougsillars/image/q_20/upload/v1526279646/ireland_mwnkwo.jpg

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

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

28. Automate Quality vs. File Size
• Butteraugli
• SSIM: Structural SIMilarity
https://github.com/technopagan/cjpeg-dssim
cjpeg-dssim jpegoptim ireland.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg

29. SSIM
628-934 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg

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

31. Results:
• Test Load on Motorola G4:

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

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

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

35. Convert File Format
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg
convert ireland_cjpeg_dssim.jpg ireland.webp

36. SSIM + WebP
433-505 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg

37. Image Format: WebP
<picture>
<source width = "100%" type="image/webp" srcset="ireland.webp">
<img width = "100%" src="ireland_cjpeg_dssim.jpg"
alt="Mizen Head, Ireland">
</picture>

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

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

40. Images & Screens
-

41. Images & Screens

42. Images & Screens
-

43. Images & Screens
624
832
-

44. Images & Screens
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

45. Images & Screens
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

46. Responsive Images
https://twitter.com/paulcalvano/status/928751141843808256

47. Responsive Images
-
Generate a set of images
25 KB difference in size

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

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

50. Responsive Images

51. Responsive Images
+
Image Format

52. Responsive Images + Client Hints

53. Responsive Images

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

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

56. Sample Website

57. Sample Website

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

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

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. Lazy Loading Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

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

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

64. Preview Images

65. Preview Images
SVG
979 bytes!
Jpg/Webp
~50KB
https://github.com/technopagan/sqip
<img src=“IMG_20160619_173136306.jpg”
style="background-size: cover; background-image:
url(data:image/svg+xml;base64,<svg text>);"

66. Preview Images

67. Animated GIFs
Original MP4
1.4 MB

68. Animated GIFs

69. Animated GIFs
Animated GIF
3.8 MB
270% larger

70. Animated GIFs

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

72. Animated GIFs
Video Tags are slow:
Video is not pre-loaded, will be last to download
<video autoplay loop 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/

73. Animated GIFs

74. Video

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

76. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:

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

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

79. Video Startup Failure

80. Video Fails To Start

81. Video Startup Failure

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

83. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
Video Start Time:
N. America: 4.91s
Asia: 3.00s
Europe: 4.30s
Average?
Median?
95th percentile?
Desktop/Mobile/both?

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

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

86. Video Download

87. Optimizing Content Delivery

88. Optimizing Content Delivery

89. Startup Delay: 3rd Party Interference

90. 3rd Party Interference

91. 3rd Party Interference

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

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

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

95. Video Startup

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

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

98. Video Startup

99. Video Startup

100. Video Startup

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

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

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

104. Summary
Testing:
WebPageTest https://www.webpagetest.org
WebsiteSpeedTest https://Webspeedtest.cloudinary.com
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/
Samples: https://github.com/dougsillars/OSCAL
Cloudinary https://www.cloudinary.com
Tooling

105. Conclusion
Images and Video
can be Beautiful AND Fast

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