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 [j...
Search
newtron
March 15, 2014
Programming
4
670
Improving Performance with Responsive Images [jQueryTO]
jQueryTO
March 15, 2014
https://github.com/nwtn/pres-respimg-perf-jqueryto
newtron
March 15, 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
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
チームのテスト力を鍛える
goyoki
3
760
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
RDoc meets YARD
okuramasafumi
4
170
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
旅行プランAIエージェント開発の裏側
ippo012
2
920
Namespace and Its Future
tagomoris
6
710
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
It's Worth the Effort
3n
187
28k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Designing for humans not robots
tammielis
253
25k
Navigating Team Friction
lara
189
15k
Rails Girls Zürich Keynote
gr2m
95
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
GitHub's CSS Performance
jonrohan
1032
460k
Transcript
None
Improving Performance with Responsive Images jQueryTO March 15, 2014
https://github.com/nwtn/ pres-respimg-perf-jqueryto
“Good performance is good design” Brad Frost
None
None
bradfrostweb.com
“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.” Anand Giridharadas, New York Times, April 10 2010
bradfrostweb.com
bradfrostweb.com
1.A flexible, grid-based layout, 2.Flexible images and media, 3.Media queries,
a module from the CSS3 specification
1.A flexible, grid-based layout, 2.Flexible images and media 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
None
Average web page size: 1,703 KB. Images account
for 1,063 KB, over 62% of total. HTTP Archive, March 1 2014
2x resolution = 4x as many pixels
energy more pixels = more money time
“Good performance is good design” Brad Frost
A better solution Serve an appropriately-sized image to each user
Responsive Images
None
None
None
None
SVG, WebP, JPEG XR
<picture> + srcset: http://picture.responsiveimages.org/ Mozilla: Q1 Blink (Chrome/Opera): Soon Webkit
(Apple, etc.): Also soon? MS: ?
<picture> + srcset: http://picture.responsiveimages.org/ Mozilla Q1 Blink (Chrome/Opera) Soon Webkit
(Apple, etc.) Also soon? MS ?
Client Hints: http://tools.ietf.org/html/draft-grigorik-http-client-hints-01
None
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- art directed sources --> <source media="(min-width: 45em)" src="large.jpg"
/> <source media="(min-width: 18em)" src="med.jpg" /> ! <!-- fallback --> <img src="small.jpg" alt="A rad wolf" /> </picture>
None
<picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
<picture> <!-- sources @ different resolutions --> <source srcset="pic1x.jpg 1x,
pic2x.jpg 2x, pic4x.jpg 4x" /> ! <!-- fallback --> <img src="pic1x.jpg" alt="A rad wolf" /> </picture>
None
<img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad
wolf" />
<img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad
wolf" />
<img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad
wolf" />
<img srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg" alt="A rad
wolf" />
<img srcset="pic1x.jpg 1x, pic1.5x.jpg 1.5x, pic2x.jpg 2x, pic4x.jpg 4x" src="pic1x.jpg"
alt="A rad wolf" />
None
<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
<picture> <source media="(min-width: 45em)" srcset="large1.jpg 1x, large2.jpg 2x" /> <source
media="(min-width: 18em)" srcset="med1.jpg 1x, med2.jpg 2x" /> <source srcset="small1.jpg 1x, small2.jpg 2x" /> <img src="small1.jpg" alt="A rad wolf" /> </picture>
None
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
<picture> <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w" />
! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
None
<picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg
400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
<picture> <source sizes="(min-width: 45em) 33%, (min-width: 18em) 50%, 100%" srcset="pic400.jpg
400w, pic800.jpg 800w, pic1600.jpg 1600w" /> ! <img src="pic400.jpg" alt="A rad wolf" /> </picture>
None
<picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"
/> </picture>
<picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"
/> </picture>
<picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"
/> </picture>
<picture> <source type="image/webp" src="wolf.webp" /> <img src="wolf.jpg" alt="A rad wolf"
/> </picture>
http://picture.responsiveimages.org/
Picturefill by Scott Jehl https://github.com/scottjehl/picturefill
<span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img
/> </noscript> </span>
<span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img
/> </noscript> </span>
<span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img
/> </noscript> </span>
<span data-picture> <span data-source data-srcset="" data-src="" data-type="" data-media=""></span> <noscript> <img
/> </noscript> </span>
Imager https://github.com/BBC-News/Imager.js RWD.Images https://github.com/stowball/rwd.images.js
Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG
Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG
None
None
None
Resource Priorities http://www.w3.org/TR/resource-priorities/
Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG
Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG
ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/
grunt-svgmin https://github.com/sindresorhus/grunt-svgmin Scour https://launchpad.net/scour
Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG
Responsible Images:! Responsive Images Resource Priorities Image Optimization Use Fewer
Images Use SVG
Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images
Use SVG
Responsible Images:! Responsive Images Resource Priorities Image Optimization Fewer Images
SVG
Impact
None
None
1,870KB 564KB 3,505KB Images (content) Images (style) Other content
Optimizations • ImageOptim-CLI on all images • WebP • Responsive
images using Picturefill, for DPI- and viewport switching on content images
1,870KB 564KB 3,505KB Images (content) Images (style) Other content
1,870KB 72KB 261KB Images (content) Images (style) Other content
1,870KB 72KB 534KB Images (content) Images (style) Other content
None
“Good performance is good design” Brad Frost
“Responsible images are good design” Dave Newton
David Newton! @newtron on Twitter @nwtn on GitHub
[email protected]