Download to read offline
Uploaded byDoug Sillars
Mcr fredfastvideoandimages
This document discusses optimizing images and video for fast delivery on websites. It provides tips for improving image quality, format, sizing and lazy loading. For video, it discusses optimizing startup time by preloading strategically, managing third party interference, and balancing network and playback. The document emphasizes that images and video can be both beautiful and fast with the right optimizations. It also announces an image optimization contest for a chance to win a gift card.
More Related Content
Similar to Mcr fredfastvideoandimages
More from Doug Sillars
Mcr fredfastvideoandimages
- 1. Delivering Beautiful andFast Images and Video Doug Sillars @DougSillars MCRFred September 20, 2018
- 2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars https://www.slideshare.net/dougsillars/ FreelanceDeveloper Relations Performance Audits: Web/Native Workshops: Performance/Images/Video
- 4. 0.5 0.6 0.7 0.8 0.9 Standing in LineStanding 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 InduceDelays 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 & Videomake up 75% of Web Content HTTPArchive mobile websites 15/02/18
- 7. 4 Simple ImageOptimizations
- 8. 4 Simple ImageOptimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 9. 4 Simple ImageOptimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 10. 4 Simple ImageOptimizations Httparchive.org Webpagetest.org
- 11. 4 Simple ImageOptimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 12. Image Quality Lossy Image sizeis reduced by removing pixel information https://developers.google.com/speed/docs/insights/OptimizeImages
- 13. Image Quality magick -quality85 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
- 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. File Format: Web <picture> <sourcewidth = "100%" type="image/webp" srcset=”riga.webp"> <img width = "100%" src=”riga_cjpeg_dssim.jpg" alt=”Riga, Latvia"> </picture>
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. 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
- 23.
- 24.
- 25. Results: • Test Loadon Motorola G4:
- 26. 4 Simple ImageOptimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 27. Image Formats –Average Size HTTPArchive mobile websites 15/02/18
- 28. Image Formats –Average Size HTTPArchive mobile websites 15/02/18
- 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) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
- 32.
- 33.
- 34. Scalable Vector Graphics(SVG) https://github.com/google/brotli
- 35. Image Formats –Average Size HTTPArchive mobile websites 15/02/18
- 36. Convert File Format http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1537006839/20180914_142934_v7wn0v.jpg convertcastle_cjpeg_dssim.jpg castle.webp
- 37. SSIM + WebP 535KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1537006839/20180914_142934_v7wn0v.jpg
- 38. Image Format: WebP <picture> <sourcewidth = "100%" type="image/webp" srcset=”castle.webp"> <img width = "100%" src=”castle_cjpeg_dssim.jpg" alt=”Cardiff Castle keep"> </picture>
- 39.
- 40. Image Format Use“In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 41. Image Format Use“In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 42. 4 Simple ImageOptimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 43.
- 44.
- 45.
- 46.
- 47. Image Sizing 624 832 12,979,000 pixels 519,000pixels _________________ - 12,460,000 pixels
- 48. Image Sizing 624 832 12,979,000 pixels 519,000pixels _________________ - 12,460,000 pixels
- 49.
- 50. Image Sizing - Responsive Images: Generatea set of images 25 KB difference in size
- 51. Responsive Images 624 832 625,000 pixels - 106,000pixels 519,000 pixels _________________
- 52.
- 53.
- 54.
- 55.
- 56. Responsive Images Use“In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 57. Responsive Images Use“In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 58. 4 Simple ImageOptimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
- 59.
- 60.
- 61.
- 62. Lazy Loading Use“In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 63. Lazy Loading Use“In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 64.
- 65.
- 66. Optimizing Content Delivery PreviewImages https://github.com/technopagan/sqip
- 67.
- 68.
- 69.
- 70. Animated GIFs Animated GIF 3.8MB 270% larger
- 71.
- 72. Animated GIFs MP4: 256colors 247KB 93% smaller
- 73. Animated GIFs Video Tags: Videois not pre-loaded, will be last to download <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/
- 74.
- 75.
- 76. 76 Video Buffer Rage: astate of uncontrollable fury or violent anger induced by delayed or interrupted streaming video content http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic
- 77. Video Quality Metrics 1.Doesthe Video Start? 2.Does the Video Stall? 3.Does it Look Good?
- 78.
- 79. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q12018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start ~800M hours of video playback lost
- 80. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q12018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start ~800M hours of video playback lost
- 81. Video Fails ToStart
- 82.
- 83. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q12018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start
- 84. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q12018: Video Startup Average Video Start Time: N. America: 4.91s Asia: 3.00s Europe: 4.30s
- 85. Video Startup Delay After2 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
- 86.
- 87.
- 88.
- 89.
- 90. Preload When ItMakes Sense Ad Playback Video Download
- 91. Preload When ItMakes Sense Ad Playback Video Download
- 92. Preload When ItMakes Sense Ad Playback Video Download
- 93. ...be Careful withPreload Preload = “auto”
- 94. …be Careful withPreload
- 95. Optimizing Video Delivery WhatLeads to Startup Delay? Manifest File: List of Available Streams Player Chooses a Stream Stream Manifest: List of Video Segments Player Downloads Segments into buffer Video Plays
- 96. Optimizing Video Delivery WhatLeads to Startup Delay? Example Manifest file:
- 97. Optimizing Video Delivery VideoStreaming Manifest File: List of Available Streams Player selects 8.5 MBPS stream Stream Manifest: List of Video Segments Buffer takes a long time to fill Video Does Not Play Player immediately changes the stream choice to 192 KBPS
- 98.
- 99. Optimizing Video Delivery WhatLeads to Startup Delay? Example Manifest file:
- 100. Optimizing Video Delivery WhatLeads to Startup Delay? Example Manifest file:
- 101.
- 102.
- 103.
- 104. Video Startup 10s 11s12s 13s 14s 15s 16s 17s 4k Low->High: 4K Middle: 4k:High->Low:
- 105. Video Startup “Inthe Wild” 75% 20% 5% https://dougsillars.com/2018/03/29/streaming-video-whats-on-the-web-today/
- 106. Optimizing Content Delivery Balancingthe Network with Playback Player uses available streams to balance download with playback
- 107. Optimizing Content Delivery VideoStreaming
- 108. Optimizing Content Delivery VideoStreaming Large throughput gaps can lead to many stream changes – which can be visible to user
- 109. Summary Testing: WebPageTest https://www.webpagetest.org HttpArchive https://httparchive.org Images: ImageMagickhttps://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
- 110. Conclusion Images and Video canbe Beautiful AND Fast
- 111. Contest – Wina £100 Amazon Gift Card Optimize Images for Fast Page Load Submit your entry by September 21 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