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
140
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.7k
jQuery - The new wave of JavaScript
paazmaya
0
76
Finland – Coming here and going there
paazmaya
1
45
Nanbudo - Nanbu Kata Book preview
paazmaya
0
680
Nice day for a walk
paazmaya
0
64
Valkoviiksi 7 makers
paazmaya
2
70
Other Decks in Technology
See All in Technology
競技としてのKaggle、役に立つKaggle
yu4u
3
1.8k
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
530
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
310
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
320
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
290
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
310
require(ESM)とECMAScript仕様
uhyo
3
770
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
JSON攻略法.pdf
miyakemito
8
5.1k
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
330
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The Cult of Friendly URLs
andyhume
74
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Designing for Performance
lara
601
67k
Side Projects
sachag
451
41k
KATA
mclloyd
15
12k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Music & Morning Musume
bryan
41
5.6k
Become a Pro
speakerdeck
PRO
11
4.5k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
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