This document discusses optimizing images for fast delivery on mobile websites. It recommends four simple optimizations: 1) reducing image quality to 85%, 2) using WebP format, 3) generating responsive image sizes, and 4) implementing lazy loading. The document provides details on implementing each optimization and cites research analyzing their impacts. It finds that applying these optimizations can significantly reduce page load times and data usage. Overall, the document advocates that with the right optimizations, images can be both beautiful and fast loading.

1. Delivering Beautiful and Fast Images
Doug Sillars
@DougSillars
Milano UX Experts
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