Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Improving Performance with Responsive Images [W...
Search
newtron
January 22, 2014
Programming
0
170
Improving Performance with Responsive Images [WebPerfTO]
Toronto Web Performance Group
January 22, 2014
https://github.com/nwtn/pres-respimg-perf
newtron
January 22, 2014
Tweet
Share
More Decks by newtron
See All by newtron
Universal web design [Accessibility Camp Toronto]
newtron
0
220
Universal web design [HackerYou a11y club]
newtron
0
210
Universal web design [Full Stack Toronto]
newtron
0
250
Information architecture as knowledge translation [World IA Day]
newtron
0
290
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
380
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
newtron
0
280
Improving performance with responsive (and responsible!) images [CSSConf]
newtron
6
690
Universal Web Design: How to create an awesome experience for every user [OpenWest]
newtron
0
280
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
380
Other Decks in Programming
See All in Programming
contribution to astral-sh/uv
shunsock
0
540
Ktorで簡単AIアプリケーション
tsukakei
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
490
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
CSC305 Lecture 11
javiergs
PRO
0
270
One Enishi After Another
snoozer05
PRO
0
160
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
630
EMこそClaude Codeでコード調査しよう
shibayu36
0
430
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
BBQ
matthewcrist
89
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Mobile First: as difficult as doing things right
swwweet
225
10k
Code Review Best Practice
trishagee
72
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Transcript
@towebperf Tweet! #towebperf ! ! DAVID NEWTON (@NEWTRON) RESPONSIVE IMAGES
BLAKE CROSBY (@BLAKECROSBY) THE IMPORTANCE OF A CDN HELLO! & Review!
Improving Performance with Responsive Images Toronto Web Performance Group January
22, 2014
None
–Brad Frost “Good performance is good design”
None
None
None
–Anand Giridharadas, New York Times, April 10 2010 “More human
beings today have access to a cellphone than the United Nations says have access to a clean toilet.”
–Anand Giridharadas, New York Times, April 10 2010 “More human
beings today have access to a cellphone than the United Nations says have access to a clean toilet.”
None
None
1. A flexible, grid-based layout, 2. Flexible images and media,
and 3. Media queries, a module from the CSS3 specification
1. A flexible, grid-based layout, 2. Flexible images and media,
and 3. Media queries, a module from the CSS3 specification
img { max-width: 100%; }
None
None
A solution Serve one big image and let the browser
scale it
None
None
• Average web page size: 1,681 KB • Images account
for 1,031 KB, over 61% of total ! HTTP Archive, January 15 2014
2x resolution = 4x as many pixels
–Brad Frost “Good performance is good design”
A better solution Serve an appropriately-sized image to each user
Responsive Images
None
None
None
None
SVG, WebP, JPEG XR
• <picture>: http://picture.responsiveimages.org/ • srcset: http://www.w3.org/html/wg/drafts/srcset/ w3c-srcset/ • Client Hints:
http://tools.ietf.org/html/draft-grigorik- http-client-hints-01
<picture> <source srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"> <img alt="A
rad wolf." src="pic1x.jpg"> </picture>
<picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <img
src="small.jpg" alt="The president."> </picture>
<picture> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width:
18em)” srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt="The president."> </picture>
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w"> <img
src="pic400.jpg" alt="The president."> </picture>
<picture> <source type="image/webp" src="prez.webp"> <img src="prez.jpg" alt="The president."> </picture>
http://picture.responsiveimages.org/
Performance wins
None
None
None
None
Resource Priorities http://www.w3.org/TR/resource-priorities/
When can we expect this to work?
What can you do now?
ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/
Use fewer images
SVG
Picturefill https://github.com/scottjehl/picturefill
• Art direction • Viewport switching (using MQs) • DPR
switching (using MQs)
<span data-picture data-alt="A giant stone face"> <span data-src="small.jpg"></span> <span data-src="medium.jpg"
data-media="(min-width: 400px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> <noscript> <img src="small.jpg" alt="A giant stone face"> </noscript> </span>
data-media="(min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)"
• Art direction • Viewport switching (using MQs) • DPR
switching (using MQs) • Resolution switching (using srcset) • File type switching • Resource priorities
• Art direction • Viewport switching (using MQs) • DPR
switching (using MQs) • DPR switching (using srcset) • File type switching • Resource priorities
Picturefull https://github.com/nwtn/picturefill
<span data-picture data-postpone data-alt="A giant stone face"> <span data-type="image/webp" data-srcset="
[email protected]
1x,
[email protected]
2x"></span> <span data-type="image/webp" data-srcset="medium.webp@1x 1x, medium.webp@2x 2x" data-media="(min-width: 400px)"></span> ... <span data-srcset="
[email protected]
1x,
[email protected]
2x"></span> <span data-srcset="medium.jpg@1x 1x, medium.jpg@2x 2x" data-media="(min-width: 400px)"></span> ... <noscript> <img src="
[email protected]
" alt="A giant stone face"> </noscript> </span>
Impact
None
No optimizations • 11 HTTP requests • 2.9MB of data
transferred • 3.72s load time
No optimizations • 11 HTTP requests • 2.9MB of data
transferred • 3.72s load time
Optimizations • 14 HTTP requests • 476KB of data transferred
(~84% savings) • 1.26s load time (~66% savings)
Optimizations • 14 HTTP requests • 476KB of data transferred
(~84% savings) • 1.26s load time (~66% savings)
Optimizations + RP • 5 HTTP requests • 235KB of
data transferred (~92% savings) • 1.11s load time (~70% savings)
Optimizations + RP • 5 HTTP requests • 235KB of
data transferred (~92% savings) • 1.11s load time (~70% savings)
None
None
None
David Newton! @newtron on Twitter @nwtn on GitHub
[email protected]