Presented April 10, 2019 in Tallinn

1. Delivering Fast and Beautiful Images &
Video
Doug Sillars
@DougSillars
Vaimo Meetup Tallinn
April 10, 2019

2. Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video
http://bit.ly/HighPerformanceAndroidApps

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 make up 50% of Web Content
HTTPArchive mobile websites 15/02/18

7. 7.9 MB

8. 3.5 MB

9. 4 Simple Image Optimizations

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26. Results:
• Test Load on Motorola G4:

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

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

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

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

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

32. Scalable Vector Graphics (SVG)

33. Scalable Vector Graphics (SVG)

34. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1

35. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1

36. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes

37. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Brotli 525 bytes

38. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Brotli 525 bytes

39. Scalable Vector Graphics (SVG)
<style >
.svgorange {
filter: invert(.5) sepia(1)
saturate(5) hue-rotate(5deg);
}
</style>
<img class="svgorange" src ="map-
marker-circle.svg">
https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6

40. Scalable Vector Graphics (SVG)

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

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

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

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

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

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

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

48. Image Sizing
-

49. Image Sizing

50. Image Sizing
-

51. Image Sizing
624
832
-

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

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

54. Image Processing
1M
pixels
Download (s) Image Decode
(ms)
Desktop 14 78
Moto G4 14.2 218
Alcatel 1X 14.2 820

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

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

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

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

59. Responsive Images

60. Responsive Images

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

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

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

64. Lazy Load
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

65. Lazy Load
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

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

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

68. Preview Images

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

70. Lazy Loading: Experiments

71. Lazy Loading: Chrome Experiments

72. Lazy Loading: Chrome Experiments

73. Animated GIFs
Original MP4
1.4 MB

74. Animated GIFs

75. Animated GIFs
Animated GIF
3.8 MB
270% larger

76. Animated GIFs
“The Graphics Interchange Format is not
intended as a platform for animation, even
though it can be done in a limited way.”
-GIF89a Specification
https://www.w3.org/Graphics/GIF/spec-gif89a.txt

77. Animated GIFs

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

79. Animated GIFs: Social Media

80. Animated GIFs: Social Media
#FAKENEWS

81. Animated GIFs: Social Media

82. Animated GIFs: as Video!
Video Tags:
<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/

83. Animated GIFs

84. Video: Don’t Download More on Mobile
Desktop Mobile

85. Video: Don’t Download More on Mobile
Desktop Mobile
@media only screen and (min-width:1024px)
Don’t Download Video That Is Not Displayed

86. Video
Preload = “auto”
Only use with high probability video views!

87. Video Preload
• preload = “metadata”
• Only downloads first x% of the video

88. Background Video

89. Video Background
Video (as Downloaded): 5.3 MB
Video 5 MB
Audio 250 KB 5% of file
Best Practice:
To save bandwidth, remove the audio stream from videos that
are played silently.

90. Video Background: Mobile
Best Practice:
If Viewport will not support Video…
Don’t Download it

91. Background Video

92. Video Background

93. Video Background
33.6 MB
27s
2560 x 1226
10 MBPS

94. Video Background
Best Practice:
Resize Video to reasonable size.
33.6 MB
27s
2560 x 1226
10 MBPS

95. Video Background
Best Practice:
Resize Video to reasonable size.
PROTIP: Renaming the file is not enough…

96. Video Resizing
• 1920x1080: 8.1 MB
• 1280x720: 4.3 MB
• 1080x608: 3.3 MB
• 720x405: 1.76 MB
http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4

97. Video Background: Mobile

98. Video Is Not Cheap

99. Video Is Not Cheap

100. Video Is Not Cheap

101. Video Is Not Cheap

102. Video Is Not Cheap
After 20 free videos
Each Video Download costs:

103. Video Is Not Cheap

104. Video Is Not Cheap

105. Addendum: What Are Your Customers Saying?

106. Addendum: Save-Data
Save-Data: on

107. Addendum: Save-Data

108. Addendum: Save-Data

109. Addendum: Save-Data

110. Addendum: Save-Data
q_auto -> q_auto:eco
180KB -> 135 KB
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg

111. Addendum 2: Network Info

112. Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navigator.connection.downlink
// Effective round-trip time estimate
navigator.connection.rtt
// Upper bound on the downlink speed of the first network hop
navigator.connection.downlinkMax

113. Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navigator.connection.downlink
// Effective round-trip time estimate
navigator.connection.rtt
// Upper bound on the downlink speed of the first network hop
navigator.connection.downlinkMax
500 KBPS

114. Addendum 3: Base 64 Encoding
Images embedded as Base64 in your HTML/CSS/JS
• Fewer Requests
• Images Now Block Rendering of Page
• Images are 20-30% larger
• Caching is limited
• Difficult to reference more than once
https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/

115. Addendum 3: Base 64 Encoding
• 91KB CSS Shared as University Template
• 48KB is SVG
• Never Appears on Any Page
Departments, colleges and other units of
the University of Nebraska–Lincoln should
use the Nebraska N as a main identifier,
not the University seal, on all publications,
invitations, websites and other electronic
media.
https://unlcms.unl.edu/wdn/templates_4.1/css/all.css?dep=4.1.36

116. Addendum 3: Base 64 Encoding
https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css

117. Conclusion
Optimize Image:
Quality
Format
Sizing
Lazy Load if Possible
aGIFs to movies
No Base64 Encoded Images
Monitor Customer’s headers
Images Video
Optimize Image:
device screen (DPR?)
only download if displayed
Bitrate
Streaming is more efficient
Video can be expensive

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

119. Conclusion
Images CAN Be Beautiful AND Fast

120. Love Building with Video and Images?
Media Developer Expert
mde-comm@cloudinary.com
Become a

121. Addendum 3: Base64 Encoded Images
Fewer Requests *can* be better
Images in CSS place Images in the Critical Rendering path
Hardcoding images as text increases size by 20-30%