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.

Fast and Beautiful Images and Video

707 views

Published on

Lunch and Learn talk at Render Conference March 23, 2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fast and Beautiful Images and Video

  1. 1. Delivering Beautiful and Fast Images and Video Doug Sillars @DougSillars Sponsored By:
  2. 2. 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
  3. 3. 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
  4. 4. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18
  5. 5. Image Format Usage in Bytes HTTPArchive mobile websites 15/02/18
  6. 6. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18 JPGPNG GIF
  7. 7. Image Compression Lossless compression: Default transformation: remove EXIF data (can be overridden)
  8. 8. Image Compression Lossy Image size is reduced by removing pixel information
  9. 9. 100% 977 KB http://res.cloudinary.com/dougsillars/image/upload/v1520504964/IMG_20180301_114117_tzasan.jpg
  10. 10. 80% 844 KB q_80 http://res.cloudinary.com/dougsillars/image/upload/q_80/v1520504964/IMG_20180301_114117_tzasan.jpg
  11. 11. 50% 508 KB q_50 http://res.cloudinary.com/dougsillars/image/upload/q_50/v1520504964/IMG_20180301_114117_tzasan.jpg
  12. 12. 20% 284 KB q_20 http://res.cloudinary.com/dougsillars/image/upload/q_20/v1520504964/IMG_20180301_114117_tzasan.jpg
  13. 13. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  14. 14. Automate Quality vs. File Size • SSIM: Structural SIMilarity • Butteraugli • q_auto
  15. 15. SSIM 525 KB q_auto http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1520504964/IMG_20180301_114117_tzasan.jpg
  16. 16. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  17. 17. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  18. 18. SSIM + auto format 345 KB q_auto, f_auto http://res.cloudinary.com/dougsillars/image/upload/f_auto,q_auto/v1520504964/IMG_2 0180301_114117_tzasan.jpg
  19. 19. Image Quality and Formats Optimising on quality and format can yield large KB savings!
  20. 20. Images & Screens 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  21. 21. Responsive Images https://twitter.com/paulcalvano/status/928751141843808256
  22. 22. Responsive Breakpoint Generation http://www.responsivebreakpoints.com/
  23. 23. Responsive Breakpoints
  24. 24. Responsive Breakpoint Generation http://www.responsivebreakpoints.com/
  25. 25. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
  26. 26. Summary: Image Optimizations http://res.cloudinary.com/dougsillars/image/upload/c_scale,f_auto,q_auto,w_750/v15210125 92/IMG_20180125_120214_aqewlq.jpg 1.3 MB 45 KB Quality Format Resized
  27. 27. Vector Images Images drawn as shapes infinitely scalable Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
  28. 28. Preview Images
  29. 29. Preview Images SVG 979 bytes! Jpg/Webp ~50KB https://github.com/technopagan/sqip <img src=“IMG_20160619_173136306.jpg” style="background-size: cover; background-image: url(data:image/svg+xml;base64,<svg text>);"
  30. 30. Lazy Load Images https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  31. 31. Animated GIFs Original MP4 1.4 MB
  32. 32. Animated GIFs Animated GIF 3.8 MB 270% larger
  33. 33. Animated GIFs
  34. 34. Animated GIFs MP4: 256 colors 247KB 93% smaller
  35. 35. Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop muted 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/
  36. 36. Video
  37. 37. 38 Buffer Rage a state 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
  38. 38. 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
  39. 39. Video Startup Delay 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
  40. 40. Optimizing Video Delivery What Leads 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
  41. 41. Optimizing Video Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file:
  42. 42. Optimizing Video Delivery Video Streaming 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 600KBPS
  43. 43. Optimizing Content Delivery What Leads to Startup Delay? Example Manifest file: #EXTM3U #EXT-X-STREAM-INF:BANDWIDTH=962000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=1280x720 #EXT-X-STREAM-INF:BANDWIDTH=602000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=960x540 #EXT-X-STREAM-INF:BANDWIDTH=444000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=640x360 #EXT-X-STREAM-INF:BANDWIDTH=315000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=480x270 #EXT-X-STREAM-INF:BANDWIDTH=216000,CODECS="avc1.66.30,mp4a.40.2",RESOLUTION=320x180
  44. 44. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  45. 45. Optimizing Content Delivery Balancing the Network with Playback Static Network Speed Large jumps in Bandwidth can lead to: 1. Multiple segment downloads 2. Stalls 3. Perceptible quality changes
  46. 46. Optimizing Content Delivery Balancing the Network with Playback Variable Network Conditions Player is able to balance the network speed with the available bitrates to prevent stalling
  47. 47. Optimizing Content Delivery Video Requests are deferred Use the “preload” attribute with discretion
  48. 48. Summary Web: WebPageTest https://www.webpagetest.org WebsiteSpeedTest https://Webspeedtest.cloudinary.com Native: Video Optimizer https://developer.att.com/Video-Optimizer High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps Images: Cloudinary https://www.cloudinary.com http://www.responsivebreakpoints.com/ Tooling
  49. 49. Conclusion Images and Video can be Beautiful AND Fast http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1539/l_cloudinary_logo_yftjkp,x_550,y_- 375/v1521506977/20160416_151750_oiwfvh.jpg
  50. 50. After Party Hack Optimize Images for Fast Page Load Top 3 optimised sites will win £150, £100, £50 Amazon Gift cards

×