This document discusses optimizing images for fast loading on mobile devices. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Data from the HTTP Archive is presented showing the prevalence and impact of these optimizations. Specific techniques like responsive images and image processing tools are also outlined.

1. Delivering Fast and Beautiful Images
Doug Sillars
@DougSillars
GDG Little Rock
August 15, 2020

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”
5M mobile sites
Analyzed May 1, 2019
48% score 1
10% score 0
32% score < 0.5

15. Image Quality Use “In The Wild”
5M mobile sites
Analyzed May 1, 2019
48% score 1
10% score 0
32% score < 0.5
May 2020:
52% score 1
31% < 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. File Format: WebP
https://caniuse.com/#feat=webp

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

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

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
18% score 1
28% score 0
62% score <0.52020:
21 % score 1
61 % <0.5

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

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

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

53. Image Sizing
-

54. Image Sizing

55. Image Sizing
-

56. Image Sizing
624
832
-

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

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

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

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

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

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

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

64. Responsive Images

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
58% score 1
8% score 0
26% score <0.5
2020:
66% score 1
20% score < 0.5

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

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

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

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

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

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

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

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

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

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

77. Preview Images

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

79. Lazy Loading: Experiments

80. Lazy Loading: Chrome Experiments

81. Lazy Loading: Chrome Experiments

82. Animated GIFs
Original MP4
1.4 MB

83. Animated GIFs

84. Animated GIFs
Animated GIF
3.8 MB
270% larger

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

86. Animated GIFs

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

88. Animated GIFs: Social Media

89. Animated GIFs: Social Media
#FAKENEWS

90. Animated GIFs: Social Media

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

92. Animated GIFs

93. Addendum: What Are Your Customers Saying?

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

95. Addendum: Save-Data

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

97. Addendum 2: Network Info

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

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

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

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

102. Conclusion
Images CAN Be Beautiful AND Fast