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
860
Nice day for a walk
paazmaya
0
74
Valkoviiksi 7 makers
paazmaya
2
110
Other Decks in Technology
See All in Technology
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
650
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
モバイルアプリ研修
recruitengineers
PRO
2
220
Claude Code x Androidアプリ 開発
kgmyshin
1
570
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
380
DeNA での思い出 / Memories at DeNA
orgachem
PRO
3
1.5k
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
5
520
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
180
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Unsuck your backbone
ammeep
671
58k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to Ace a Technical Interview
jacobian
279
23k
A better future with KSS
kneath
239
17k
The Invisible Side of Design
smashingmag
301
51k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Docker and Python
trallard
45
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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