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.
Delivering Beautiful and Fast
Images and Video Doug Sillars
@DougSillars
Sponsored By:
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
Pro...
Large Downloads Induce Delays in Rendering
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100m...
Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18
Image Format Usage in Bytes
HTTPArchive mobile websites 15/02/18
Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18
JPGPNG
GIF
Image Compression
Lossless compression:
Default transformation:
remove EXIF data
(can be overridden)
Image Compression
Lossy
Image size is reduced by
removing pixel information
100%
977 KB
http://res.cloudinary.com/dougsillars/image/upload/v1520504964/IMG_20180301_114117_tzasan.jpg
80%
844 KB
q_80
http://res.cloudinary.com/dougsillars/image/upload/q_80/v1520504964/IMG_20180301_114117_tzasan.jpg
50%
508 KB
q_50
http://res.cloudinary.com/dougsillars/image/upload/q_50/v1520504964/IMG_20180301_114117_tzasan.jpg
20%
284 KB
q_20
http://res.cloudinary.com/dougsillars/image/upload/q_20/v1520504964/IMG_20180301_114117_tzasan.jpg
Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages
Automate Quality vs. File Size
• SSIM: Structural SIMilarity
• Butteraugli
• q_auto
SSIM
525 KB
q_auto
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1520504964/IMG_20180301_114117_tzasan.jpg
Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages
Image Formats – Average Size
HTTPArchive mobile websites 15/02/18
SSIM + auto format
345 KB
q_auto,
f_auto
http://res.cloudinary.com/dougsillars/image/upload/f_auto,q_auto/v1520504964/IMG_...
Image Quality and Formats
Optimising on quality
and format can yield
large KB savings!
Images & Screens
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels
Responsive Images
https://twitter.com/paulcalvano/status/928751141843808256
Responsive Breakpoint Generation
http://www.responsivebreakpoints.com/
Responsive Breakpoints
Responsive Breakpoint Generation
http://www.responsivebreakpoints.com/
Responsive Images
624
832
625,000 pixels
-
106,000 pixels
519,000 pixels
_________________
Summary: Image Optimizations
http://res.cloudinary.com/dougsillars/image/upload/c_scale,f_auto,q_auto,w_750/v15210125
92/I...
Vector Images
Images drawn as shapes
infinitely scalable
Can be added inline to HTML document
https://gist.github.com/hail...
Preview Images
Preview Images
SVG
979 bytes!
Jpg/Webp
~50KB
https://github.com/technopagan/sqip
<img src=“IMG_20160619_173136306.jpg”
sty...
Lazy Load Images
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
Animated GIFs
Original MP4
1.4 MB
Animated GIFs
Animated GIF
3.8 MB
270% larger
Animated GIFs
Animated GIFs
MP4: 256 colors
247KB
93% smaller
Animated GIFs
Video Tags are slow:
Video is not pre-loaded, will be last to download
<video autoplay loop muted controls =...
Video
38
Buffer Rage
a state of uncontrollable fury or violent
anger induced by delayed or interrupted
streaming video content
h...
Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akama...
Video Startup Delay
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-v...
Optimizing Video Delivery
What Leads to Startup Delay?
Manifest File:
List of Available
Streams
Player Chooses a Stream St...
Optimizing Video Delivery
What Leads to Startup Delay?
#EXTM3U#
EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,su...
Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects
8.5 MBPS stream Stream M...
Optimizing Content Delivery
What Leads to Startup Delay?
Example Manifest file:
#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=962000...
Optimizing Content Delivery
Balancing the Network with Playback
Player uses available streams to balance download with pla...
Optimizing Content Delivery
Balancing the Network with Playback
Static Network Speed
Large jumps in Bandwidth can
lead to:...
Optimizing Content Delivery
Balancing the Network with Playback
Variable Network Conditions
Player is able to
balance the ...
Optimizing Content Delivery
Video Requests are deferred
Use the “preload” attribute with discretion
Summary
Web:
WebPageTest https://www.webpagetest.org
WebsiteSpeedTest https://Webspeedtest.cloudinary.com
Native:
Video Op...
Conclusion
Images and Video
can be Beautiful AND Fast
http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_...
After Party Hack
Optimize Images for Fast Page Load
Top 3 optimised sites will win
£150, £100, £50 Amazon Gift cards
Fast and Beautiful Images and Video
Upcoming SlideShare
Loading in …5
×

Fast and Beautiful Images and Video

924 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

×