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
89
Finland – Coming here and going there
paazmaya
1
51
Nanbudo - Nanbu Kata Book preview
paazmaya
0
840
Nice day for a walk
paazmaya
0
74
Valkoviiksi 7 makers
paazmaya
2
110
Other Decks in Technology
See All in Technology
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
kworkdev
PRO
2
350
“プロダクトを好きになれるか“も QAエンジニア転職の大事な判断基準だと思ったの
tomodakengo
0
140
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
1
310
原則から考える保守しやすいComposable関数設計
moriatsushi
3
440
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
220
新規プロダクト開発、AIでどう変わった? #デザインエンジニアMeetup
bengo4com
0
460
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
150
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
360
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
310
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
360
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
50
8.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
GitHub's CSS Performance
jonrohan
1031
460k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Why Our Code Smells
bkeepers
PRO
337
57k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Side Projects
sachag
455
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Done Done
chrislema
184
16k
Six Lessons from altMBA
skipperchong
28
3.8k
Making Projects Easy
brettharned
116
6.2k
The Language of Interfaces
destraynor
158
25k
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