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
130
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
90
CasperJS Workshop 2015-01-23
paazmaya
0
150
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.7k
jQuery - The new wave of JavaScript
paazmaya
0
80
Finland – Coming here and going there
paazmaya
1
49
Nanbudo - Nanbu Kata Book preview
paazmaya
0
700
Nice day for a walk
paazmaya
0
71
Valkoviiksi 7 makers
paazmaya
2
78
Other Decks in Technology
See All in Technology
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Agile that works and the tools we love
rasmusluckow
325
20k
Debugging Ruby Performance
tmm1
71
11k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
The Language of Interfaces
destraynor
151
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
BBQ
matthewcrist
82
9k
A Tale of Four Properties
chriscoyier
155
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Rails Girls Zürich Keynote
gr2m
93
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
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