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
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
Improving my own Ruby thereafter
sisshiki1969
1
160
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
rage against annotate_predecessor
junk0612
0
170
Design Foundational Data Engineering Observability
sucitw
3
200
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
私の後悔をAWS DMSで解決した話
hiramax
4
210
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Automating Front-end Workflow
addyosmani
1370
200k
Become a Pro
speakerdeck
PRO
29
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
185
16k
Navigating Team Friction
lara
189
15k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
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]