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.

Fastandbeautiful novi sad

52 views

Published on

Presented to Wordpress NoviSad Sepetmber 18, 2019

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fastandbeautiful novi sad

  1. 1. Delivering Fast and Beautiful Images Doug Sillars @DougSillars WordPress Novi Sad September 18 , 2019
  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/AR/ML 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 Dominate the Web HTTPArchive mobile websites 04/2019
  6. 6. 4 Simple Image Optimizations
  7. 7. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  8. 8. 4 Simple Image Optimizations Httparchive.org Webpagetest.org
  9. 9. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  10. 10. 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
  11. 11. 100% 3.6 MB http://res.cloudinary.com/dougsillars/image/upload/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  12. 12. 85% 1.87 MB q_85 http://res.cloudinary.com/dougsillars/image/upload/q_85/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  13. 13. Image Quality Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  14. 14. Image Quality Use “In The Wild” 5M mobile sites Analyzed May 1, 2019 48% score 1 10% score 0 32% score < 0.5
  15. 15. Image Quality Use “In The Wild” Median Savings (50th percentile): • 3.7 seconds faster page load • 133 KB less data
  16. 16. Image Quality Use “In The Wild” Median Savings (50th percentile): • 9.7 seconds faster page load • 1.6 MB less data
  17. 17. 50% 914 KB q_50 http://res.cloudinary.com/dougsillars/image/upload/q_50/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  18. 18. 20% 513 KB q_20 http://res.cloudinary.com/dougsillars/image/upload/q_20/v1529005982/IMG_20180614_184507_ssuk1i.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 riga.jpg http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  22. 22. SSIM 1.46 MB http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.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)
  31. 31. Scalable Vector Graphics (SVG)
  32. 32. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
  33. 33. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
  34. 34. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
  35. 35. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
  36. 36. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
  37. 37. Scalable Vector Graphics (SVG) <style > .svgorange { filter: invert(.5) sepia(1) saturate(5) hue-rotate(5deg); } </style> <img class="svgorange" src ="map- marker-circle.svg"> https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6
  38. 38. Scalable Vector Graphics (SVG)
  39. 39. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  40. 40. Image Formats – PNGs https://dougsillars.com/2019/02/10/using-screenshots-in-production/
  41. 41. Image Formats – Screenshots -> JPG https://dougsillars.com/2019/02/10/using-screenshots-in-production/
  42. 42. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  43. 43. File Format: WebP https://caniuse.com/#feat=webp
  44. 44. SSIM + WebP 986 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_
  45. 45. 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>
  46. 46. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  47. 47. Image Format Use “In The Wild” 5M mobile sites Analyzed 5/1/19 18% score 1 28% score 0 62% score <0.5
  48. 48. Image Format Use “In The Wild” 5M mobile sites Analyzed 5/1/19 Median page: 139 KB less data 6.6s faster load
  49. 49. Image Format Use “In The Wild” 5M mobile sites Analyzed 5/1/19 Median page: 2.4 MB less data 15s faster load
  50. 50. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  51. 51. Image Sizing -
  52. 52. Image Sizing
  53. 53. Image Sizing -
  54. 54. Image Sizing 624 832 -
  55. 55. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  56. 56. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  57. 57. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
  58. 58. Image Sizing https://twitter.com/paulcalvano/status/928751141843808256
  59. 59. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
  60. 60. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
  61. 61. Responsive Breakpoint Generation https://github.com/cloudinary/responsive_breakpoints_generator http://www.responsivebreakpoints.com/
  62. 62. Responsive Images
  63. 63. Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  64. 64. Responsive Images Use “In The Wild” 5M mobile sites Analyzed 5/1/19 58% score 1 8% score 0 26% score <0.5
  65. 65. Responsive Images Use “In The Wild” 5M mobile sites Analyzed 5/1/19 Median page saves: 130KB data 1.6s faster load
  66. 66. Responsive Images Use “In The Wild” 5M mobile sites Analyzed 5/1/19 Median page saves: 2.4 MB data 14s faster load
  67. 67. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  68. 68. Lazy Load https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  69. 69. Lazy Load https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  70. 70. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  71. 71. Lazy Loading Use “In The Wild” 5M mobile sites Analyzed 5/1/19 56% score 1 8% score 0 28% score <0.5
  72. 72. Lazy Loading Use “In The Wild” 5M mobile sites Analyzed 5/1/19 Median page saves: 334KB 3.1s
  73. 73. Lazy Loading Use “In The Wild” 5M mobile sites Analyzed 5/1/19 Median page saves: 2.84 MB 12 s
  74. 74. Preview Images
  75. 75. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  76. 76. Lazy Loading: Experiments
  77. 77. Lazy Loading: Chrome Experiments
  78. 78. Lazy Loading: Chrome Experiments
  79. 79. Animated GIFs Original MP4 1.4 MB
  80. 80. Animated GIFs
  81. 81. Animated GIFs Animated GIF 3.8 MB 270% larger
  82. 82. Animated GIFs “The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.” -GIF89a Specification https://www.w3.org/Graphics/GIF/spec-gif89a.txt
  83. 83. Animated GIFs
  84. 84. Animated GIFs MP4: 256 colors 247KB 93% smaller
  85. 85. Animated GIFs: Social Media
  86. 86. Animated GIFs: Social Media #FAKENEWS
  87. 87. Animated GIFs: Social Media
  88. 88. Animated GIFs: as Video! Video Tags: <video loop autoplay muted playsinline controls = "false” src="goats.mp4”/> 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/
  89. 89. Animated GIFs
  90. 90. Addendum: What Are Your Customers Saying?
  91. 91. Addendum: Lite Mode: Save-Data Save-Data: on
  92. 92. Addendum: Lite Mode: Save-Data
  93. 93. Addendum: Save-Data
  94. 94. Addendum: Save-Data q_auto -> q_auto:eco 180KB -> 135 KB https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg
  95. 95. Addendum 2: Network Info
  96. 96. Addendum 2: Network Info // Network type that browser uses navigator.connection.type; // Effective bandwidth estimate navigator.connection.downlink // Effective round-trip time estimate navigator.connection.rtt // Upper bound on the downlink speed of the first network hop navigator.connection.downlinkMax
  97. 97. Addendum 2: Network Info // Network type that browser uses navigator.connection.type; // Effective bandwidth estimate navigator.connection.downlink // Effective round-trip time estimate navigator.connection.rtt // Upper bound on the downlink speed of the first network hop navigator.connection.downlinkMax 500 KBPS
  98. 98. Addendum 3: Base 64 Encoding Images embedded as Base64 in your HTML/CSS/JS • Fewer Requests • Images Now Block Rendering of Page • Images are 20-30% larger • Caching is limited • Difficult to reference more than once
  99. 99. Addendum 3: Base 64 Encoding • 91KB CSS Shared as University Template • 48KB is SVG • Never Appears on Any Page Departments, colleges and other units of the University of Nebraska–Lincoln should use the Nebraska N as a main identifier, not the University seal, on all publications, invitations, websites and other electronic media. https://unlcms.unl.edu/wdn/templates_4.1/css/all.css?dep=4.1.36
  100. 100. Addendum 3: Base 64 Encoding https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css
  101. 101. Conclusion Optimize Image: Quality Format Sizing Lazy Load if Possible aGIFs to movies No Base64 Encoded Images Monitor Customer’s headers Images
  102. 102. 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
  103. 103. Conclusion Images CAN Be Beautiful AND Fast
  104. 104. Love Building with Video and Images? Media Developer Expert mde-comm@cloudinary.com Become a

×