July 24, 2018

1. Delivering Beautiful and Fast Images
Doug Sillars
@DougSillars
Turin WebPerf
July 24, 2018

2. Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
https://www.slideshare.net/dougsillars/
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video

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 make up 50% of Web Content
HTTPArchive mobile websites 15/02/18

7. Image Performance Analysis
https://Webpagetest.org https://httparchive.org

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
1. Quality
2. Format
3. Sizing
4. Lazy Loading

12. Image Quality
Lossy
Image size is reduced by
removing pixel information
https://developers.google.com/speed/docs/insights/OptimizeImages

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. Image Quality Use “In The Wild”
500,000 mobile sites
Analyzed 3/15/18

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

16. 100%
2.8 MB
http://res.cloudinary.com/dougsillars/image/upload/v1526279646/ireland_mwnkwo.jpg

17. 85%
1.3 MB
q_85
http://res.cloudinary.com/dougsillars/image/q_85/upload/v1526279646/ireland_mwnkwo.jpg

18. 50%
551KB
q_50
http://res.cloudinary.com/dougsillars/image/q_50/upload/v1526279646/ireland_mwnkwo.jpg

19. 20%
274 KB
q_20
http://res.cloudinary.com/dougsillars/image/q_20/upload/v1526279646/ireland_mwnkwo.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 ireland.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg

23. SSIM
628-934 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.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)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

32. Scalable Vector Graphics (SVG)

33. Scalable Vector Graphics (SVG)

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

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

36. Convert File Format
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg
convert ireland_cjpeg_dssim.jpg ireland.webp

37. SSIM + WebP
433-505 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg

38. Image Format: WebP
<picture>
<source width = "100%" type="image/webp" srcset="ireland.webp">
<img width = "100%" src="ireland_cjpeg_dssim.jpg"
alt="Mizen Head, Ireland">
</picture>

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

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

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

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

43. Image Sizing
-

44. Image Sizing

45. Image Sizing
-

46. Image Sizing
624
832
-

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

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

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

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

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

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

53. Responsive Images

54. Responsive Images

55. Responsive Images

56. Responsive Images
+
Image Format
Create responsive WebP
mogrify -format webp *.jpg

57. Responsive Images + Client Hints

58. Responsive Images + Client Hints

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

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

61. Sample Website

62. Sample Website

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

64. Web Usage
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

65. Web Usage
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

66. Lazy Loading
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

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

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

69. Lazy Loading
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

70. Preview Images

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

72. Preview Images

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

74. Image Optimizations – 500k sites
100 score for:
1. Quality
2. Format
3. Sizing
4. Lazy Loading

75. Image Optimizations – 500k sites
100 score for:
1. Quality
2. Format
3. Sizing
4. Lazy Loading

76. Image Optimizations – 500k sites
100 score for:
1. Quality
2. Format
3. Sizing
4. Lazy Loading

77. Image Optimizations – 500k sites
100 score for:
1. Quality
2. Format
3. Sizing
4. Lazy Loading

78. Image Optimizations – 500k sites
100 score for:
1. Quality
2. Format
3. Sizing
4. Lazy Loading

79. Animated GIFs
Original MP4
1.4 MB

80. Animated GIFs

81. Animated GIFs
Animated GIF
3.8 MB
270% larger

82. Animated GIFs

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

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

85. Animated GIFs

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

87. Conclusion
Images and Video
can be Beautiful AND Fast

88. Contest – Win a €100 Amazon Gift Card
Optimize Images for Fast Page Load
Submit your entry by August 1 for a chance to win!
Code and tips: https://github.com/dougsillars/dougsillars.github.io
Entry form: http://bit.ly/FastImages
https://dougsillars.github.io