Presented November 7, 2018

1. Delivering Beautiful and Fast
Images and Video
Doug Sillars
@DougSillars
UX Connect London
November 6, 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. 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. 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. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18

8. 4 Simple Image Optimizations

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

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

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

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

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

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

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

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

17. Image Quality Use “In The Wild”
Median Savings (50th percentile):
• 2.83 seconds faster page load
• 419KB 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. File Format: WebP
https://caniuse.com/#feat=webp

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

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

33. Image Format Use “In The Wild”
Median Improvement: 4.1s, 604 KB

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

35. Image Sizing
-

36. Image Sizing

37. Image Sizing
-

38. Image Sizing
624
832
-

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

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

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

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

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

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

45. Responsive Images

46. Responsive Images Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18
Median Improvement: 2.7s, 416 KB

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

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

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

50. Lazy Loading Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18
Median Improvement: 3.5s, 529 KB

51. Preview Images

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

53. Lazy Loading: Experiments

54. Lazy Loading: Experiments

55. Lazy Loading: Experiments

56. Animated GIFs
Original MP4
1.4 MB

57. Animated GIFs

58. Animated GIFs
Animated GIF
3.8 MB
270% larger

59. Animated GIFs

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

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

62. Animated GIFs

63. Video

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

65. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:

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

67. ..be Careful with Video Preload
Preload = “auto”

68. …be Careful with Preload

69. Background Video

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

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

72. Video Background

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

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

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

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

77. Video Third Parties

78. Video Third Parties

79. Video Third Parties

80. Video Third Parties

81. Conclusion
Optimize Image:
Quality
Format
Sizing
Lazy Load if Possible
Only download Video when displayed
Strip audio if silent
Resize Videos for Mobile
Audit 3rd Party Videos
Streaming: Start with lower bitrates to speed video playback
Streaming: Conservative bitrates *may* reduce stalls, but will lower quality
Images
Video

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

83. Conclusion
Images and Video
Can Be Beautiful AND Fast