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
180
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
92
CasperJS Workshop 2015-01-23
paazmaya
0
190
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.8k
jQuery - The new wave of JavaScript
paazmaya
0
93
Finland – Coming here and going there
paazmaya
1
51
Nanbudo - Nanbu Kata Book preview
paazmaya
0
870
Nice day for a walk
paazmaya
0
75
Valkoviiksi 7 makers
paazmaya
2
110
Other Decks in Technology
See All in Technology
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
210
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
110
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
110
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Git in Team
kawaguti
PRO
3
350
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
480
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
100
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
140
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Unsuck your backbone
ammeep
671
58k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Designing for humans not robots
tammielis
254
26k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Practical Orchestrator
shlominoach
190
11k
Building an army of robots
kneath
306
46k
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