Mobius keynote

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Fast and Beautiful Images:
Optimisations for When
It’s Just Too Slow
Doug Sillars
@DougSillars
Mobius Conference
December ...

Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
Freelance Developer Relations
Performance...

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

What Is Fast?
https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg

Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
https://www.nngroup.com/articles/response-times-3-important-limits/
Perce...

Fast is a Human Perception
In 1993:

Fast is a Human Perception
• 100ms:
• 1s:
• 10s: 3-5s:
Perceived as instantaneous
Limit for uninterrupted train of thought...

Fast is a Human Perception
• 100ms:
• 1s:
• 10s: 3-5s:
Perceived as instantaneous
Limit for uninterrupted train of thought...

Performance Studies
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100ms: 1% Revenue Walmart &...

Charles Proxy

Video Optimizer

Video Optimizer

Video Optimizer

WebPageTest

WebPageTest

https://pixabay.com/en/office-business-accountant-620822/

https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471

https://opensignal.com/reports/2018/02/state-of-lte

Network Coverage Can be Variable

https://pixabay.com/en/office-business-accountant-620822/

Devices

Most Popular Phones - Russia

Your Device is Not Your Customer’s Device
https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics...

Older Phones are Drastically Slower
Websites load 20-50%
faster Year over year
https://arxiv.org/pdf/1603.02293.pdf

https://www.androidpolice.com/2018/06/29/alcatel-1x-review-android-go-huge-compromise-every-sense-including-price/

Is It Fast?

Is It Fast?

Is It Fast?

Set Goals

Rules for Speed
• Deliver Content Quickly
• Faster requests
• More Efficient
• Images and Video are Large Files
• JavaScri...

App Startup

JSON Headers: Request

App Startup

JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type...

JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type...

JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type...

App Startup

Content-Encoding
JSON File: 267 KB

Content-Encoding
JSON File: 267 KB
Content-Encoding: gzip
JSON.gz: 42 KB 85% savings
Content-Encoding: br
JSON.br: 30 KB 8...

JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type...

Cache- Control

App Startup

Thumbnail Images

Thumbnail Images

Thumbnail
470 KB
http://home.bt.com/news/news-extra/big-thumbs-up-for-trafalgar-squares-new-fourth-plinth-11364101681206

Thumbnail
470 KB

Little Thumbnail
470 KB
3 KB

Little Thumbnail
470 KB
3 KB
99.3%
smaller!!

Image Size
2.23 MB
4608 x 3456

Image Processing
2.3 MB

Image Processing
2.3 MB
16M pixels

Image Processing
2.3 MB
16M pixels 1M
pixels

Image Processing
2.3 MB
16M pixels 1M
pixels

Image Processing
2.3 MB
16M pixels 1M
pixels

Image Processing
1M
pixels
Download (s) Image Decode
(ms)
Desktop 14 78
Moto G4 14.2 218
Alcatel 1X 14.2 820

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

Image Size
220 KB
1400 x 1050
https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_o...

Image Size
78 KB
800 x 600
https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1
53301_okeb...

What Sizes Are Optimal?
Check Your Analytics. See what screen sizes use your site the most,
and base images on these devic...

Responsive Images

Image Processing (correctly sized)
1.5M
pixels
First Load (s) Image Decode
(ms)
Desktop 2.7 26
Moto G4 3.0 73
Alcatel 1X 3...

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

Image Quality
Lossy compression
Removes pixels from
image losing
resolution
Google
recommends 85%
for web

Image Quality
Lossy compression
Removes pixels from
image losing
resolution

Image Quality
SSIM
Quality adjusted to
limit of human
perception

Image Quality
SSIM
Quality adjusted to
limit of human
perception

Image Quality
180 KB
1400 x 1050
SSIM Quality
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v154097815...

Image Quality - SSIM
1.5M
pixels
First Load (s) Image Decode
(ms)
Desktop 2.7 35
Moto G4 2.8 123
Alcatel 1X 2.9 342

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

Top Image Formats
jpg, 17,047,941
png, 13,126,543
, 11,795,123
gif, 5,053,385
svg, 1,687,541
ico, 1,076,035
php, 644,839 j...

Top Image Format Size
HTTP Archive 11/2018

WebP Support
11/03/2018

Image Format
161 KB
1400 x 1050
SSIM Quality
WebP
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto,f_auto...

Image Quality - WebP
1.5M
pixels
First Load (s) Image Decode (ms)
Desktop 2.6 42
Moto G4 2.7 153
Alcatel 1X 2.8 170

Fast and Beautiful:
1.5M
pixels
0
2
4
6
8
10
12
14
16
18
0
500
1000
1500
2000
2500
full resize q_auto webp

Top Image Format Size: SVG
HTTP Archive 11/2018

Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https...

Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https...

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG)
https://github.com/google/brotli

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

Caching

Caching

Caching
768 x 558
61 KB
768 x 480
31 KB

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

Lazy Loading: Experiments

Lazy Loading: Experiments

Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading – SVG Previews

Preview Images

Lazy Loading: Experiments

Optimizing Content Delivery
Preview Images
https://github.com/technopagan/sqip

Animated GIFs
Original MP4
1.4 MB

Animated GIFs

Animated GIFs
Animated GIF
3.8 MB
270% larger

Animated GIFs

Animated GIFs
MP4: 256 colors
247KB
93% smaller

Animated GIFs
Video Tags:
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Video is not pre-loa...

Animated GIFs

Addendum: What Are Your Customers Saying?

Addendum: Save-Data
Save-Data: on

Addendum: Save-Data

Addendum: Save-Data

Addendum: Save-Data

Addendum: Save-Data
q_auto -> q_auto:eco
180KB -> 135 KB
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto...

Addendum 2: Network Info

Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navi...

Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navi...

Be Vigilant!

Continue Testing For Performance

Summary
Testing:
WebPageTest https://www.webpagetest.org
HttpArchive https://httparchive.org
Images:
ImageMagick https://w...

Conclusion
Images Can Be Beautiful AND Fast

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1011447 views
Storytelling For The Web: Integrate... by Chiara Aliotta 919244 views
Artificial Intelligence, Data and C... by OECD Directorate ... 820562 views
How to Leverage AI to Boost Employe... by SocialHRCamp 342424 views
2024 State of Marketing Report – by... by Marius Sescu 195380 views
Everything You Need To Know About C... by Expeed Software 218594 views

View on Slideshare

1 of 122 Ad

View on Slideshare

1 of 122 Ad