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
91
Finland – Coming here and going there
paazmaya
1
51
Nanbudo - Nanbu Kata Book preview
paazmaya
0
850
Nice day for a walk
paazmaya
0
74
Valkoviiksi 7 makers
paazmaya
2
110
Other Decks in Technology
See All in Technology
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
160
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
150
ファインディにおける Dataform ブランチ戦略
hiracky16
0
230
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
530
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
170
alecthomas/kong はいいぞ
fujiwara3
6
1.2k
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.9k
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
120
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
190
Wasmで社内ツールを作って配布しよう
askua
0
160
Recoil脱却の現状と挑戦
kirik
3
490
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
5
1.9k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Done Done
chrislema
185
16k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
For a Future-Friendly Web
brad_frost
179
9.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A Tale of Four Properties
chriscoyier
160
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
A better future with KSS
kneath
238
17k
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