Presented at DevFest London November 2019

1. Delivering Fast and Beautiful Images
Doug Sillars
@DougSillars
DevFest London
November 16, 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/AR/ML
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 Dominate the Web
HTTPArchive mobile websites 04/2019

7. 4 Simple Image Optimizations

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

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

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

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

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

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

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

15. Image Quality Use “In The Wild”
5M mobile sites
Analyzed May 1, 2019
48% score 1
10% score 0
32% score < 0.5

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

17. Image Quality Use “In The Wild”
Median Savings (50th percentile):
• 9.7 seconds faster page load
• 1.6 MB less data

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)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

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)

32. Scalable Vector Graphics (SVG)

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

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

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

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

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

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

39. Scalable Vector Graphics (SVG)

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

41. Image Formats – PNGs
https://dougsillars.com/2019/02/10/using-screenshots-in-production/

42. Image Formats – Screenshots -> JPG
https://dougsillars.com/2019/02/10/using-screenshots-in-production/

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

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

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

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

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

48. Image Format Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
18% score 1
28% score 0
62% score <0.5

49. Image Format Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
Median page:
139 KB less data
6.6s faster load

50. Image Format Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
Median page:
2.4 MB less data
15s faster load

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

52. Image Sizing
-

53. Image Sizing

54. Image Sizing
-

55. Image Sizing
624
832
-

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

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

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

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

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

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

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

63. Responsive Images

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

65. Responsive Images Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
58% score 1
8% score 0
26% score <0.5

66. Responsive Images Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
Median page saves:
130KB data
1.6s faster load

67. Responsive Images Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
Median page saves:
2.4 MB data
14s faster load

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

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

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

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

72. Lazy Loading Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
56% score 1
8% score 0
28% score <0.5

73. Lazy Loading Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
Median page saves:
334KB
3.1s

74. Lazy Loading Use “In The Wild”
5M mobile sites
Analyzed 5/1/19
Median page saves:
2.84 MB
12 s

75. Preview Images

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

77. Lazy Loading: Experiments

78. Lazy Loading: Chrome Experiments

79. Lazy Loading: Chrome Experiments

80. Animated GIFs
Original MP4
1.4 MB

81. Animated GIFs

82. Animated GIFs
Animated GIF
3.8 MB
270% larger

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

84. Animated GIFs

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

86. Animated GIFs: Social Media

87. Animated GIFs: Social Media
#FAKENEWS

88. Animated GIFs: Social Media

89. 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/

90. Animated GIFs

91. Addendum: What Are Your Customers Saying?

92. Addendum: Lite Mode: Save-Data
Save-Data: on

93. Addendum: Save-Data

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

95. Addendum 2: Network Info

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

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

98. Conclusion
Optimize Image:
Quality
Format
Sizing
Lazy Load if Possible
aGIFs to movies
Monitor Customer’s headers
Images

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

100. Conclusion
Images CAN Be Beautiful AND Fast

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