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
200
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
680
Universal Web Design: How to create an awesome experience for every user [OpenWest]
newtron
0
270
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
370
Other Decks in Programming
See All in Programming
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
PicoRuby on Rails
makicamel
2
130
VS Code Update for GitHub Copilot
74th
2
640
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
Discover Metal 4
rei315
2
130
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Team operations that are not burdened by SRE
kazatohiei
1
310
NPOでのDevinの活用
codeforeveryone
0
830
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Bash Introduction
62gerente
613
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
GitHub's CSS Performance
jonrohan
1031
460k
Git: the NoSQL Database
bkeepers
PRO
430
65k
RailsConf 2023
tenderlove
30
1.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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]