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
81
Finland – Coming here and going there
paazmaya
1
49
Nanbudo - Nanbu Kata Book preview
paazmaya
0
720
Nice day for a walk
paazmaya
0
71
Valkoviiksi 7 makers
paazmaya
2
88
Other Decks in Technology
See All in Technology
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
300
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
300
RAGの性能を評価しよう
kurahara
1
300
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
9
2.8k
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
4
1.4k
OPENLOGI Company Profile for engineer
hr01
1
12k
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.9k
UE5の雑多なテク
ryuichikawano
0
170
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
310
ORM と向き合う
hoto17296
8
6k
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
230
山手線一周のパフォーマンス改善
suzukahr
0
120
Featured
See All Featured
Become a Pro
speakerdeck
PRO
24
4.9k
Atom: Resistance is Futile
akmur
261
25k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
For a Future-Friendly Web
brad_frost
174
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Practical Orchestrator
shlominoach
185
10k
Making the Leap to Tech Lead
cromwellryan
130
8.8k
Teambox: Starting and Learning
jrom
131
8.7k
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