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.

Hackference

377 views

Published on

Presented at Hackference, October 2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Hackference

  1. 1. Fast and Beautiful: Modern Image Delivery Techniques Doug Sillars @DougSillars Hackference October 12, 2018
  2. 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
  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% 1.8 MB http://res.cloudinary.com/dougsillars/image/upload/v1537006839/20180914_142934_v7wn0v.jpg
  16. 16. 85% 983 KB q_85 http://res.cloudinary.com/dougsillars/image/upload/q_85/v1537006839/20180914_142934_v7wn0v.jpg
  17. 17. 20% 213 KB q_20 http://res.cloudinary.com/dougsillars/image/upload/q_20/v1537006839/20180914_142934_v7wn0v.jpg
  18. 18. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  19. 19. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  20. 20. 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
  21. 21. SSIM 870 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1537006839/20180914_142934_v7wn0v.jpg
  22. 22. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages 113 KB savings
  23. 23. Results: • Test Load on Motorola G4:
  24. 24. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  25. 25. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  26. 26. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  27. 27. 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
  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)
  31. 31. Scalable Vector Graphics (SVG)
  32. 32. Scalable Vector Graphics (SVG) https://github.com/google/brotli
  33. 33. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  34. 34. 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
  35. 35. SSIM + WebP 535 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1537006839/20180914_142934_v7wn0v.jpg
  36. 36. 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>
  37. 37. File Format: WebP https://caniuse.com/#feat=webp
  38. 38. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  39. 39. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  40. 40. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  41. 41. Image Sizing -
  42. 42. Image Sizing
  43. 43. Image Sizing -
  44. 44. Image Sizing 624 832 -
  45. 45. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  46. 46. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  47. 47. Image Sizing https://twitter.com/paulcalvano/status/928751141843808256
  48. 48. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
  49. 49. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
  50. 50. Responsive Breakpoint Generation https://github.com/cloudinary/responsive_breakpoints_generator http://www.responsivebreakpoints.com/
  51. 51. Responsive Images
  52. 52. Responsive Images
  53. 53. Responsive Images + Image Format Create responsive WebP mogrify -format webp *.jpg
  54. 54. Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  55. 55. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  56. 56. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  57. 57. Web Usage https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  58. 58. Lazy Load https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  59. 59. Lazy Load https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  60. 60. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  61. 61. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  62. 62. Preview Images
  63. 63. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  64. 64. Preview Images
  65. 65. Lazy Loading: Experiments
  66. 66. Lazy Loading: Experiments
  67. 67. Lazy Loading: Experiments
  68. 68. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  69. 69. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  70. 70. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  71. 71. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  72. 72. Image Optimizations – 500k sites 100 score for: 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  73. 73. Animated GIFs Original MP4 1.4 MB
  74. 74. Animated GIFs
  75. 75. Animated GIFs Animated GIF 3.8 MB 270% larger
  76. 76. Animated GIFs
  77. 77. Animated GIFs MP4: 256 colors 247KB 93% smaller
  78. 78. 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/
  79. 79. Animated GIFs
  80. 80. 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
  81. 81. Conclusion Images CAN be Beautiful AND Fast
  82. 82. 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

×