Lunch and Learn talk at Render Conference March 23, 2018

1. Delivering Beautiful and Fast
Images and Video Doug Sillars
@DougSillars
Sponsored By:

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. 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. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18

6. Image Format Usage in Bytes
HTTPArchive mobile websites 15/02/18

7. Images & Video make up 75% of Web Content
HTTPArchive mobile websites 15/02/18
JPGPNG
GIF

8. Image Compression
Lossless compression:
Default transformation:
remove EXIF data
(can be overridden)

9. Image Compression
Lossy
Image size is reduced by
removing pixel information

10. 100%
977 KB
http://res.cloudinary.com/dougsillars/image/upload/v1520504964/IMG_20180301_114117_tzasan.jpg

11. 80%
844 KB
q_80
http://res.cloudinary.com/dougsillars/image/upload/q_80/v1520504964/IMG_20180301_114117_tzasan.jpg

12. 50%
508 KB
q_50
http://res.cloudinary.com/dougsillars/image/upload/q_50/v1520504964/IMG_20180301_114117_tzasan.jpg

13. 20%
284 KB
q_20
http://res.cloudinary.com/dougsillars/image/upload/q_20/v1520504964/IMG_20180301_114117_tzasan.jpg

14. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

15. Automate Quality vs. File Size
• SSIM: Structural SIMilarity
• Butteraugli
• q_auto

16. SSIM
525 KB
q_auto
http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1520504964/IMG_20180301_114117_tzasan.jpg

17. Graphing the Results
https://developers.google.com/speed/docs/insights/OptimizeImages

18. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18

19. 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

20. Image Quality and Formats
Optimising on quality
and format can yield
large KB savings!

21. Images & Screens
624
832
12,979,000 pixels
519,000 pixels
_________________
-
12,460,000 pixels

22. Responsive Images
https://twitter.com/paulcalvano/status/928751141843808256

23. Responsive Breakpoint Generation
http://www.responsivebreakpoints.com/

24. Responsive Breakpoints

25. Responsive Breakpoint Generation
http://www.responsivebreakpoints.com/

26. Responsive Images
624
832
625,000 pixels
-
106,000 pixels
519,000 pixels
_________________

27. 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

28. Vector Images
Images drawn as shapes
infinitely scalable
Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff

29. Preview Images

30. 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>);"

31. Lazy Load Images
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

32. Animated GIFs
Original MP4
1.4 MB

33. Animated GIFs
Animated GIF
3.8 MB
270% larger

34. Animated GIFs

35. Animated GIFs
MP4: 256 colors
247KB
93% smaller

36. 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/

37. Video

38. 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

39. 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

40. 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

41. 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

42. 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:

43. 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

44. 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

45. Optimizing Content Delivery
Balancing the Network with Playback
Player uses available streams to balance download with playback

46. 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

47. 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

48. Optimizing Content Delivery
Video Requests are deferred
Use the “preload” attribute with discretion

49. 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

50. 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

51. After Party Hack
Optimize Images for Fast Page Load
Top 3 optimised sites will win
£150, £100, £50 Amazon Gift cards