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
660
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
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
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
NPOでのDevinの活用
codeforeveryone
0
870
VS Code Update for GitHub Copilot
74th
2
670
型で語るカタ
irof
0
520
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
620
NEWT Backend Evolution
xpromx
1
110
PicoRuby on Rails
makicamel
2
140
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing for humans not robots
tammielis
253
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Writing Fast Ruby
sferik
628
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Speed Design
sergeychernyshev
32
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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]