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
150
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
190
Universal web design [HackerYou a11y club]
newtron
0
160
Universal web design [Full Stack Toronto]
newtron
0
210
Information architecture as knowledge translation [World IA Day]
newtron
0
240
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
330
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
newtron
0
220
Improving performance with responsive (and responsible!) images [CSSConf]
newtron
6
640
Universal Web Design: How to create an awesome experience for every user [OpenWest]
newtron
0
220
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
340
Other Decks in Programming
See All in Programming
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
150
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
710
Tauriでネイティブアプリを作りたい
tsucchinoko
0
380
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
320
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.3k
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Jakarta EE meets AI
ivargrimstad
0
850
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
230
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
6
1.7k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.2k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
459
33k
What's new in Ruby 2.0
geeforr
343
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Building an army of robots
kneath
302
43k
Music & Morning Musume
bryan
46
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Navigating Team Friction
lara
183
14k
The Language of Interfaces
destraynor
154
24k
Facilitating Awesome Meetings
lara
50
6.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing for humans not robots
tammielis
250
25k
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]