Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Improving Performance with Responsive Images [WebPerfTO]
newtron
January 22, 2014
Programming
0
120
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
120
Universal web design [HackerYou a11y club]
newtron
0
120
Universal web design [Full Stack Toronto]
newtron
0
110
Information architecture as knowledge translation [World IA Day]
newtron
0
180
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
250
Universal Web Design: How to create an awesome experience for every user [Open Source Bridge]
newtron
0
190
Improving performance with responsive (and responsible!) images [CSSConf]
newtron
6
470
Universal Web Design: How to create an awesome experience for every user [OpenWest]
newtron
0
180
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
270
Other Decks in Programming
See All in Programming
Dagger, la CI, autrement
guikingone
1
120
リーダブルテストコード / #vstat
jnchito
48
36k
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
Carp言語さわってみた 〜鯉を取り戻せ編〜
tsin45
0
110
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
lmt_swallow
0
130
YATA: collaborative documents and how to make them fast
horusiath
1
170
Lookerとdbtの共存
ttccddtoki
0
650
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
380
モデルの定義に基づくバリデーションを実現するためのpydantic入門
daikikatsuragawa
0
120
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
2
530
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
219
17k
A Philosophy of Restraint
colly
192
15k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
Side Projects
sachag
450
37k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
How to train your dragon (web standard)
notwaldorf
60
3.9k
Support Driven Design
roundedbygravity
87
8.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
Scaling GitHub
holman
451
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
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="small@1x.webp
1x, small@2x.webp 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="small@1x.jpg 1x, small@2x.jpg 2x"></span> <span data-srcset="medium.jpg@1x 1x, medium.jpg@2x 2x" data-media="(min-width: 400px)"></span> ... <noscript> <img src="small@1x.jpg" 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 david@davidnewton.ca