This document provides tips for optimizing images for fast loading on mobile devices. It recommends profiling network conditions and device capabilities to understand real-world performance. Images should be compressed and resized for different devices. Formats like JPEG, PNG, and WebP work best. Lazy loading and responsive images can further improve speed. Caching, gzip encoding, and a quality focus on differences imperceptible to humans can make large files much smaller without reducing quality.

1. Fast and Beautiful Images:
Optimisations for When
It’s Just Too Slow
Doug Sillars
@DougSillars
Mobius Conference
December 2018

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. What Is Fast?
https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg

6. Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
https://www.nngroup.com/articles/response-times-3-important-limits/
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is
noticed, but generally accepted
Limit for keeping focus

7. Fast is a Human Perception
In 1993:

8. Fast is a Human Perception
• 100ms:
• 1s:
• 10s: 3-5s:
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is noticed,
but generally accepted
Limit for keeping focus

9. Fast is a Human Perception
• 100ms:
• 1s:
• 10s: 3-5s:
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is noticed,
but generally accepted
Limit for keeping focus
65ms: ranged from 34-164ms
https://calendar.perfplanet.com/2018/magic-numbers/

10. Performance Studies
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

11. Profile & Benchmark Where You Are Today
Video Optimizer
developer.att.com/Video-Optimizer
WebPageTest
www.webpagetest.org
Charles Proxy
www.charlesproxy.com

12. Charles Proxy

13. Video Optimizer

14. Video Optimizer

15. Video Optimizer

16. WebPageTest

17. WebPageTest

18. Profile & Benchmark Where You Are Today
Video Optimizer
developer.att.com/Video-Optimizer
WebPageTest
www.webpagetest.org
Charles Proxy
www.charlesproxy.com

19. https://pixabay.com/en/office-business-accountant-620822/

20. https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471

21. https://opensignal.com/reports/2018/02/state-of-lte

22. Network Coverage Can be Variable

23. https://pixabay.com/en/office-business-accountant-620822/

24. Profile & Benchmark Where You Are Today
Standardize your connection

25. Devices

26. Most Popular Phones - Russia

27. Your Device is Not Your Customer’s Device
https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics#screensize

28. Older Phones are Drastically Slower
Websites load 20-50%
faster Year over year
https://arxiv.org/pdf/1603.02293.pdf

29. https://www.androidpolice.com/2018/06/29/alcatel-1x-review-android-go-huge-compromise-every-sense-including-price/

31. Profile & Benchmark Where You Are Today
Pick a mid-low range phone

32. Profile & Benchmark Where You Are Today
Pick a mid-low range phone
Test on Slower Networks

33. Is It Fast?

34. Is It Fast?

35. Is It Fast?

36. Set Goals

37. Rules for Speed
• Deliver Content Quickly
• Faster requests
• More Efficient
• Images and Video are Large Files
• JavaScript is expensive at compute time

38. App Startup

39. JSON Headers: Request

40. App Startup

41. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive

42. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive
Content-Encoding:
Cache-Control:

43. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive
Content-Encoding:
Cache-Control:

44. App Startup

45. Content-Encoding
JSON File: 267 KB

46. Content-Encoding
JSON File: 267 KB
Content-Encoding: gzip
JSON.gz: 42 KB 85% savings
Content-Encoding: br
JSON.br: 30 KB 89% savings

47. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive
Content-Encoding:
Cache-Control:

48. Cache- Control

49. App Startup

50. Thumbnail Images

51. Thumbnail Images

52. Thumbnail
470 KB
http://home.bt.com/news/news-extra/big-thumbs-up-for-trafalgar-squares-new-fourth-plinth-11364101681206

53. Thumbnail
470 KB

54. Little Thumbnail
470 KB
3 KB

55. Little Thumbnail
470 KB
3 KB
99.3%
smaller!!

56. Image Size
2.23 MB
4608 x 3456

57. Image Processing
2.3 MB

58. Image Processing
2.3 MB
16M pixels

59. Image Processing
2.3 MB
16M pixels 1M
pixels

60. Image Processing
2.3 MB
16M pixels 1M
pixels

61. Image Processing
2.3 MB
16M pixels 1M
pixels

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

63. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

64. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

65. Image Size
220 KB
1400 x 1050
https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_okeb2b.jpg

66. Image Size
78 KB
800 x 600
https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1
53301_okeb2b.jpg

67. What Sizes Are Optimal?
Check Your Analytics. See what screen sizes use your site the most,
and base images on these devices

68. Responsive Images

69. Image Processing (correctly sized)
1.5M
pixels
First Load (s) Image Decode
(ms)
Desktop 2.7 26
Moto G4 3.0 73
Alcatel 1X 3.1 123

70. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

71. Image Quality
Lossy compression
Removes pixels from
image losing
resolution
Google
recommends 85%
for web

72. Image Quality
Lossy compression
Removes pixels from
image losing
resolution

73. Image Quality
SSIM
Quality adjusted to
limit of human
perception

74. Image Quality
SSIM
Quality adjusted to
limit of human
perception

75. Image Quality
180 KB
1400 x 1050
SSIM Quality
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg

76. Image Quality - SSIM
1.5M
pixels
First Load (s) Image Decode
(ms)
Desktop 2.7 35
Moto G4 2.8 123
Alcatel 1X 2.9 342

77. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

78. Top Image Formats
jpg, 17,047,941
png, 13,126,543
, 11,795,123
gif, 5,053,385
svg, 1,687,541
ico, 1,076,035
php, 644,839 jpeg, 442,705
webp, 159,089
aspx, 150,792
cnt
HTTP Archive 11/2018

79. Top Image Format Size
HTTP Archive 11/2018

80. WebP Support
11/03/2018

81. Image Format
161 KB
1400 x 1050
SSIM Quality
WebP
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto,f_auto/v1540978150/IMG_20181028_153301_okeb2b.j

82. Image Quality - WebP
1.5M
pixels
First Load (s) Image Decode (ms)
Desktop 2.6 42
Moto G4 2.7 153
Alcatel 1X 2.8 170

83. Fast and Beautiful:
1.5M
pixels
0
2
4
6
8
10
12
14
16
18
0
500
1000
1500
2000
2500
full resize q_auto webp

84. Top Image Format Size: SVG
HTTP Archive 11/2018

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

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

87. Scalable Vector Graphics (SVG)

88. Scalable Vector Graphics (SVG)

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

90. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

91. Caching

92. Caching

93. Caching
768 x 558
61 KB
768 x 480
31 KB

94. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

95. Lazy Loading

96. Lazy Loading

97. Lazy Loading: Experiments

98. Lazy Loading: Experiments

99. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading – SVG Previews

100. Preview Images

101. Lazy Loading: Experiments

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

103. Animated GIFs
Original MP4
1.4 MB

104. Animated GIFs

105. Animated GIFs
Animated GIF
3.8 MB
270% larger

106. Animated GIFs

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

108. Animated GIFs
Video Tags:
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Video is not pre-loaded, will be last to download
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/

109. Animated GIFs

110. Addendum: What Are Your Customers Saying?

111. Addendum: Save-Data
Save-Data: on

112. Addendum: Save-Data

113. Addendum: Save-Data

114. Addendum: Save-Data

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

116. Addendum 2: Network Info

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

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

119. Be Vigilant!

120. Continue Testing For Performance

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

122. Conclusion
Images Can Be Beautiful AND Fast