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
280
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
370
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
newtron
0
270
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
testingを眺める
matumoto
1
140
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
print("Hello, World")
eddie
2
530
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
290
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
100
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
Laravel Boost 超入門
fire_arlo
3
210
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
A designer walks into a library…
pauljervisheath
207
24k
Docker and Python
trallard
45
3.6k
Why Our Code Smells
bkeepers
PRO
339
57k
Documentation Writing (for coders)
carmenintech
74
5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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]