Presented PyConWeb, June 30, 2018

1. Delivering Beautiful and Fast Images
Doug Sillars
@DougSillars
PyConWeb
June 30, 2018

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

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

5. Images make up 50% of Web Content
HTTPArchive mobile websites 15/02/18

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

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

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

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

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

15. 100%
2.0 MB
https://res.cloudinary.com/dougsillars/image/upload/v1530340569/IMG_20151012_130742671_fafhpu.jpg

16. 85%
1.31 MB
q_85
https://res.cloudinary.com/dougsillars/image/upload/q_85/v1530340569/IMG_20151012_130742671_fafhpu.jpg

17. 50%
611 KB
q_50
https://res.cloudinary.com/dougsillars/image/upload/q_50/v1530340569/IMG_20151012_130742671_fafhpu.jpg

18. 20%
314 KB
q_20
https://res.cloudinary.com/dougsillars/image/upload/q_20/v1530340569/IMG_20151012_130742671_fafhpu.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 munich.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg

22. SSIM
1.07 MB
https://res.cloudinary.com/dougsillars/image/upload/q_auto/v1530340569/IMG_20151012_130742671_fafhpu.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)
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)
https://github.com/google/brotli

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

35. SSIM + WebP
911 KB
https://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1530340569/IMG_20151012_130742671_fafhpu.jpg

36. 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>
<img
src=‘http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg’>

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

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

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

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

41. Image Sizing
-

42. Image Sizing

43. Image Sizing
-

44. Image Sizing
624
832
-

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

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

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

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

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

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

51. Responsive Images

52. Responsive Images

53. Responsive Images

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

55. Responsive Images + Client Hints

56. Responsive Images + Client Hints

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

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

59. Sample Website

60. Sample Website

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

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

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

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

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

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

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

68. Preview Images

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

70. Preview Images

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

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

73. Image Optimizations – 500k sites
100 score for:
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. 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

78. Conclusion
Images and Video
can be Beautiful AND Fast

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