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
270
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
270
Improving performance with responsive (and responsible!) images [OpenWest]
newtron
2
370
Other Decks in Programming
See All in Programming
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
120
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
140
Honoアップデート 2025年夏
yusukebe
1
840
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
690
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
8.9k
ゲームの物理
fadis
5
1.5k
Constant integer division faster than compiler-generated code
herumi
2
690
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
980
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
570
Infer入門
riru
4
1.6k
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Embracing the Ebb and Flow
colly
87
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
How STYLIGHT went responsive
nonsquared
100
5.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Building an army of robots
kneath
306
46k
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]