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
580
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
190
Universal web design [HackerYou a11y club]
newtron
0
160
Universal web design [Full Stack Toronto]
newtron
0
200
Information architecture as knowledge translation [World IA Day]
newtron
0
230
Improving performance with responsive (and responsible!) images [CSSDay.io]
newtron
1
320
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
620
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
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
990
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
900
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
540
A New Era of Testing
mannodermaus
2
490
GoのIteratorに詳しくなってしまう
inatonix
1
200
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
800
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
220
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
100
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
Rubyのobject_id
qnighy
6
1.3k
Featured
See All Featured
BBQ
matthewcrist
83
9.2k
KATA
mclloyd
27
13k
Designing Experiences People Love
moore
138
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Bash Introduction
62gerente
608
210k
Facilitating Awesome Meetings
lara
49
5.9k
Navigating Team Friction
lara
183
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Making Projects Easy
brettharned
113
5.8k
YesSQL, Process and Tooling at Scale
rocio
167
14k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
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]