This document provides tips for optimizing images and video delivery on mobile websites to improve performance. It discusses reducing image file sizes through techniques like lowering quality levels, using optimized formats like WebP and SVG, resizing images responsively, and lazy loading images. For video, it recommends preloading, stripping audio from silent videos, resizing videos for mobile, and auditing third party videos. Testing and automation tools are also referenced. The overall message is that images and video can be both beautiful and fast with the right optimizations.

1. Delivering Beautiful and Fast
Images and Video
Doug Sillars
@DougSillars
WebCamp Zagreb
October 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. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18

7. 4 Simple Image Optimizations

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. Results:
• Test Load on Motorola G4:

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

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

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

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

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)

31. Scalable Vector Graphics (SVG)

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

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

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

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

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

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

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

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

42. Image Sizing
-

43. Image Sizing

44. Image Sizing
-

45. Image Sizing
624
832
-

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

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

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

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

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

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

52. Responsive Images

53. Responsive Images

54. Responsive Images

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

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

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

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

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

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

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

62. Preview Images

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

64. Video

65. 65
Video
Buffer Rage: a state of uncontrollable
fury or violent anger induced by delayed
or interrupted streaming video content
http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic

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

67. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:

68. 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
~800M hours of video
playback lost

69. 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
~800M hours of video
playback lost

70. Video Fails To Start

71. Video Startup Failure

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

73. Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

74. Video Startup Delay
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

75. Video Preload
Preload = “auto”

76. …be Careful with Preload

77. Background Video

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

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

80. Video Background

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

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

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

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

85. Video Third Parties

86. Video Third Parties

87. Video Third Parties

88. Video Third Parties

89. 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
Images
Video

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

91. Conclusion
Images and Video
Can Be Beautiful AND Fast

92. Joind.In Feedback
https://joind.in/talk/36c78