Imagesandvideo voxxeddays
•Download as PPTX, PDF•
0 likes•287 views
This document discusses optimizing images and video for fast delivery on mobile websites. It provides four simple optimizations: adjusting image quality, format, sizing, and lazy loading. SVG, WebP and responsive images are recommended over other formats. Videos should be resized, have audio removed if unneeded, and only download what will be displayed. Background videos especially should be optimized for mobile screens. Network conditions and customer needs like data savings should also be considered. Tools like ImageMagick, Cloudinary and WebPageTest can help with optimizations.
More Related Content
What's hot
What's hot (20)
Similar to Imagesandvideo voxxeddays
Similar to Imagesandvideo voxxeddays (12)
More from Doug Sillars
More from Doug Sillars (20)
Recently uploaded
Recently uploaded (20)
Imagesandvideo voxxeddays
- 1. Delivering Fast and Beautiful Images & Video Doug Sillars @DougSillars VoxxedDays Buchares March 22, 2019
- 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 & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18
- 7. 7.9 MB
- 8. 3.5 MB
- 9. 4 Simple Image Optimizations
- 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. 4 Simple Image Optimizations Httparchive.org Webpagetest.org
- 13. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 14. 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
- 17. Image Quality Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 18. Image Quality Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
- 23. 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
- 26. Results: • Test Load on Motorola G4:
- 27. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 28. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 29. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 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) KB Original 946 Optimized 1
- 35. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
- 36. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
- 37. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 38. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
- 39. 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
- 40. Scalable Vector Graphics (SVG)
- 41. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 43. SSIM + WebP 986 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_
- 44. 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>
- 45. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 46. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 47. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 48. Image Sizing -
- 49. Image Sizing
- 50. Image Sizing -
- 52. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 53. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 54. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
- 56. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
- 57. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
- 61. Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 62. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 63. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 66. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 67. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 68. Preview Images
- 69. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
- 71. Lazy Loading: Chrome Experiments
- 72. Lazy Loading: Chrome Experiments
- 74. Animated GIFs
- 75. Animated GIFs Animated GIF 3.8 MB 270% larger
- 76. 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
- 77. Animated GIFs
- 78. Animated GIFs MP4: 256 colors 247KB 93% smaller
- 79. Animated GIFs: Social Media
- 80. Animated GIFs: Social Media #FAKENEWS
- 81. Animated GIFs: Social Media
- 82. 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/
- 83. Animated GIFs
- 84. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q3 2018: Video Startup
- 85. Video Fails To Start
- 87. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q3 2018: Video Startup Mobile: 3.47s startup time Desktop: 6.29s startup time
- 88. Video Startup Delay After 2 seconds, every additional second corresponds to 5.8% increase in abandonment https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
- 90. Video: Don’t Download More on Mobile Desktop Mobile
- 91. Video: Don’t Download More on Mobile Desktop Mobile @media only screen and (min-width:1024px) Don’t Download Video That Is Not Displayed
- 92. Video Preload = “auto” Only use with high probability video views!
- 93. Video Preload • preload = “metadata” • Only downloads first x% of the video
- 94. Background Video
- 95. Video Background Video (as Downloaded): 5.3 MB Video 5 MB Audio 250 KB 5% of file Best Practice: To save bandwidth, remove the audio stream from videos that are played silently.
- 96. Video Background: Mobile Best Practice: If Viewport will not support Video… Don’t Download it
- 97. Background Video
- 98. Video Background
- 99. Video Background 33.6 MB 27s 2560 x 1226 10 MBPS
- 100. Video Background Best Practice: Resize Video to reasonable size. 33.6 MB 27s 2560 x 1226 10 MBPS
- 101. Video Background Best Practice: Resize Video to reasonable size. PROTIP: Renaming the file is not enough…
- 102. Video Resizing • 1920x1080: 8.1 MB • 1280x720: 4.3 MB • 1080x608: 3.3 MB • 720x405: 1.76 MB http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4
- 104. Video Is Not Cheap
- 105. Video Is Not Cheap
- 106. Video Is Not Cheap
- 107. Video Is Not Cheap
- 108. Video Is Not Cheap After 20 free videos Each Video Download costs:
- 109. Video Is Not Cheap
- 110. Video Is Not Cheap
- 111. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks Video Tracks (iFrames) Audio Tracks & Subtitles
- 112. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8 Video Tracks
- 113. Video Streaming: Manifest File https://hls.ted.com/talks/2208.m3u8
- 114. Addendum: What Are Your Customers Saying?
- 116. Addendum: Save-Data
- 117. Addendum: Save-Data
- 118. Addendum: Save-Data
- 119. 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
- 120. Addendum 2: Network Info
- 121. 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
- 122. 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
- 123. 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 https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/
- 124. Addendum 3: Base 64 Encoding https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css
- 125. Conclusion Optimize Image: Quality Format Sizing Lazy Load if Possible aGIFs to movies No Base64 Encoded Images Monitor Customer’s headers Images Video Optimize Image: device screen (DPR?) only download if displayed Bitrate Streaming is more efficient Video can be expensive
- 126. 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
- 127. Conclusion Images CAN Be Beautiful AND Fast
- 128. Love Building with Video and Images? Media Developer Expert mde-comm@cloudinary.com Become a
- 129. Addendum 3: Base64 Encoded Images Fewer Requests *can* be better Images in CSS place Images in the Critical Rendering path Hardcoding images as text increases size by 20-30%
Editor's Notes
- 47% smaller!
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 1149 bytes, 700 Zipped
- 47% smaller! Or 65% smaller from original!
- file:///Users/demo/Documents/reponsiveimages.html
- www.kidzania.com
- www.kidzania.com
- www.kidzania.com
- www.kidzania.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.depend.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com
- www.govisland.com