Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Oggcamp Fast and Beautiful Images

462 views

Published on

Presented at OggCamp August 18, 2018

Published in: Technology
  • Be the first to comment

Oggcamp Fast and Beautiful Images

  1. 1. Fast, Free and Beautiful: Open Source Image Delivery Techniques Doug Sillars @DougSillars OggCamp August 18, 2018
  2. 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
  3. 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. 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. 5. Images make up 50% of Web Content HTTPArchive mobile websites 15/02/18
  6. 6. Image Performance Analysis https://Webpagetest.org https://httparchive.org
  7. 7. 4 Simple Image Optimizations
  8. 8. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  9. 9. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  10. 10. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  11. 11. Image Quality Lossy Image size is reduced by removing pixel information https://developers.google.com/speed/docs/insights/OptimizeImages
  12. 12. 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
  13. 13. Image Quality Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  14. 14. Image Quality Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
  15. 15. 100% 2.8 MB http://res.cloudinary.com/dougsillars/image/upload/v1526279646/ireland_mwnkwo.jpg
  16. 16. 85% 1.3 MB q_85 http://res.cloudinary.com/dougsillars/image/q_85/upload/v1526279646/ireland_mwnkwo.jpg
  17. 17. 50% 551KB q_50 http://res.cloudinary.com/dougsillars/image/q_50/upload/v1526279646/ireland_mwnkwo.jpg
  18. 18. 20% 274 KB q_20 http://res.cloudinary.com/dougsillars/image/q_20/upload/v1526279646/ireland_mwnkwo.jpg
  19. 19. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  20. 20. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  21. 21. 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
  22. 22. SSIM 628-934 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg
  23. 23. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  24. 24. Results: • Test Load on Motorola G4:
  25. 25. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  26. 26. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  27. 27. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  28. 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. 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. 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. 31. Scalable Vector Graphics (SVG)
  32. 32. Scalable Vector Graphics (SVG)
  33. 33. Scalable Vector Graphics (SVG) https://github.com/google/brotli
  34. 34. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  35. 35. 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
  36. 36. SSIM + WebP 433-505 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg
  37. 37. 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>
  38. 38. File Format: WebP https://caniuse.com/#feat=webp
  39. 39. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  40. 40. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  41. 41. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  42. 42. Image Sizing -
  43. 43. Image Sizing
  44. 44. Image Sizing -
  45. 45. Image Sizing 624 832 -
  46. 46. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  47. 47. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  48. 48. Image Sizing https://twitter.com/paulcalvano/status/928751141843808256
  49. 49. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
  50. 50. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
  51. 51. Responsive Breakpoint Generation https://github.com/cloudinary/responsive_breakpoints_generator http://www.responsivebreakpoints.com/
  52. 52. Responsive Images
  53. 53. Responsive Images
  54. 54. Responsive Images
  55. 55. Responsive Images + Image Format Create responsive WebP mogrify -format webp *.jpg
  56. 56. Responsive Images + Client Hints
  57. 57. Responsive Images + Client Hints
  58. 58. Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  59. 59. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  60. 60. Sample Website
  61. 61. Sample Website
  62. 62. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  63. 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. 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. 65. Lazy Loading https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  66. 66. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  67. 67. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  68. 68. Lazy Loading https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  69. 69. Preview Images
  70. 70. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  71. 71. Preview Images
  72. 72. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  73. 73. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  74. 74. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  75. 75. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  76. 76. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  77. 77. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  78. 78. Animated GIFs Original MP4 1.4 MB
  79. 79. Animated GIFs
  80. 80. Animated GIFs Animated GIF 3.8 MB 270% larger
  81. 81. Animated GIFs
  82. 82. Animated GIFs MP4: 256 colors 247KB 93% smaller
  83. 83. 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/
  84. 84. Animated GIFs
  85. 85. 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
  86. 86. Conclusion Images and Video can be Beautiful AND Fast
  87. 87. Contest – Win a £100 Amazon Gift Card Optimize Images for Fast Page Load Submit your entry by August 25 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

×