This document summarizes techniques for optimizing image delivery on mobile websites. It discusses 4 key optimizations: adjusting image quality, choosing optimal file formats like WebP, sizing images responsively, and lazy loading images below the fold. The document shows that these techniques can significantly reduce image file sizes and page load times based on analyses of 500,000 mobile sites. Specific tools are recommended for automating quality adjustments, format conversion, and responsive image breakpoint generation. Lazy loading is shown to improve user experience by deferring loading of off-screen images. Overall, the techniques can help images remain fast to load while retaining high quality for modern responsive delivery.

1. Fast and Beautiful: Modern Image
Delivery Techniques
Doug Sillars
@DougSillars
Hackference
October 12, 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 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 Ireland.jpg Ireland85.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%
1.8 MB
http://res.cloudinary.com/dougsillars/image/upload/v1537006839/20180914_142934_v7wn0v.jpg

17. 85%
983 KB
q_85
http://res.cloudinary.com/dougsillars/image/upload/q_85/v1537006839/20180914_142934_v7wn0v.jpg

18. 20%
213 KB
q_20
http://res.cloudinary.com/dougsillars/image/upload/q_20/v1537006839/20180914_142934_v7wn0v.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 castle.jpg
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1537006839/20180914_142934_v7wn0v.jpg

22. SSIM
870 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1537006839/20180914_142934_v7wn0v.jpg

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

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. Convert File Format
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1537006839/20180914_142934_v7wn0v.jpg
convert castle_cjpeg_dssim.jpg castle.webp

36. SSIM + WebP
535 KB
http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1537006839/20180914_142934_v7wn0v.jpg

37. Image Format: WebP
<picture>
<source width = "100%" type="image/webp" srcset=”castle.webp">
<img width = "100%" src=”castle_cjpeg_dssim.jpg"
alt=”Cardiff Castle keep">
</picture>

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

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

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

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

44. Image Sizing
-

45. Image Sizing

46. Image Sizing
-

47. Image Sizing
624
832
-

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

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

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

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

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

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

54. Responsive Images

55. Responsive Images

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

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

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

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

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

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

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

65. Preview Images

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

67. Preview Images

68. Lazy Loading: Experiments

69. Lazy Loading: Experiments

70. Lazy Loading: Experiments

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. Animated GIFs
Original MP4
1.4 MB

77. Animated GIFs

78. Animated GIFs
Animated GIF
3.8 MB
270% larger

79. Animated GIFs

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

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

82. Animated GIFs

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

84. Conclusion
Images CAN be Beautiful AND Fast

85. Hackathon
Build and demonstrate the best use of Cloudinary in your
hack to win!
1 Year Cloudinary Plus plan ($1068 value) for the hack teams
chosen for the Best Implementation and
Most Creative Hack