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
Responsive use of <img>
Search
Juga Paazmaya
February 10, 2015
Technology
0
170
Responsive use of <img>
A presentation held at [****] for Siili Solutions responsive design and prototyping team
Juga Paazmaya
February 10, 2015
Tweet
Share
More Decks by Juga Paazmaya
See All by Juga Paazmaya
Accessibility - Presented at TEKOS Workshop in 1st Sep 2022
paazmaya
0
91
CasperJS Workshop 2015-01-23
paazmaya
0
180
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.8k
jQuery - The new wave of JavaScript
paazmaya
0
90
Finland – Coming here and going there
paazmaya
1
51
Nanbudo - Nanbu Kata Book preview
paazmaya
0
840
Nice day for a walk
paazmaya
0
74
Valkoviiksi 7 makers
paazmaya
2
110
Other Decks in Technology
See All in Technology
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
420
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
220
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
190
CDK Toolkit Libraryにおけるテストの考え方
smt7174
0
120
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
170
ビギナーであり続ける/beginning
ikuodanaka
3
790
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
PO初心者が考えた ”POらしさ”
nb_rady
0
220
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
150
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
170
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Site-Speed That Sticks
csswizardry
10
690
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
RailsConf 2023
tenderlove
30
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A better future with KSS
kneath
238
17k
The Invisible Side of Design
smashingmag
301
51k
Practical Orchestrator
shlominoach
189
11k
Transcript
Responsive use of
So far the images have been somewhat static
HTML 4 required to use src and alt
XHTML required a closure
HTML5 introduced new properties
Why not ?
srcset Descriptor defines the width of the image (w) or
the pixel ratio (x)
srcset width use case Usually used when the image has
dynamic size
srcset pixel density use case Usually used when the image
is used in a fixed layout
None
None
None
srcset - benefit & problem
sizes “If the srcset attribute is present, the sizes attribute
may also be present”
sizes examples First matched, first served. Default:
None
srcset & sizes - only benefit
Pixel density matters
3x
Quiz When srcset is unsupported by the given browser, which
image from the example markup below will be downloaded?
What problems does this bring? Duplication of media queries from
styles to markup, hence semantics mixed
What problems does this solve? Browser will download only the
images that are best fitting to the given use case, hence better use bandwidth
What problems does this solve? Developer can leave the calculations
of which image to use in a given case to the browser
Would you like to know more? Please see the talk
“Responsive images are coming to a browser near you” by Yoav Weiss at VelocityConf 2014 youtube.com/watch?v=GC3VgcltKKI
More further reading Please also see the in depth post
by Eric Portis about the topic: ericportis.com/posts/2014/srcset-sizes
Thank you I am Jukka Paasonen, a Responsive Consultant at
Siili Solutions