Cork ux Meetup

Delivering Beautiful and Fast
Images and Video Doug Sillars
@DougSillars
May 16
Cork UX

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

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

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

Image Format Usage in Bytes

Images & Video make up 75% of Web Content
JPGPNG
GIF

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

Scalable Vector Graphics (SVG)

904B
99.93% smaller!
https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually

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

20%
284 KB
q_20

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

Image Quality Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

Image Quality Use “In The Wild”
Median Savings (50th percentile):
• 2.83 seconds faster page load
• 419KB less data

Image Formats – Average Size

Image Format Use “In The Wild”
Analyzed 3/15/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

Image Quality and Formats
Optimising on quality
and format can yield
large KB savings with
no loss in experience!
66%

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 Images
624
832
625,000 pixels
-
106,000 pixels
519,000 pixels
_________________

Responsive Images Use “In The Wild”
Analyzed 3/15/18

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

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

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

Lazy Load Images
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

Lazy Loading Use “In The Wild”
Analyzed 3/15/18

Animated GIFs
Original MP4
1.4 MB

Animated GIFs
Animated GIF
3.8 MB
270% larger

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

45
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

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

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

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

#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=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
Example Manifest file:

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

Optimizing Content Delivery
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

Balancing the Network with Playback
Player uses available streams to balance download with playback

Static Network Speed
Large jumps in Bandwidth can
lead to:
1. Multiple segment downloads
2. Stalls
3. Perceptible quality changes

Variable Network Conditions
Player is able to
balance the network
speed with the
available bitrates to
prevent stalling

Video Requests are deferred
Use the “preload” attribute with discretion

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

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

Cork ux Meetup

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Cork ux Meetup

Similaire à Cork ux Meetup (20)

Plus de Doug Sillars

Plus de Doug Sillars (20)

Dernier

Dernier (20)

Cork ux Meetup

Notes de l'éditeur