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
140
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
160
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.7k
jQuery - The new wave of JavaScript
paazmaya
0
82
Finland – Coming here and going there
paazmaya
1
49
Nanbudo - Nanbu Kata Book preview
paazmaya
0
740
Nice day for a walk
paazmaya
0
72
Valkoviiksi 7 makers
paazmaya
2
95
Other Decks in Technology
See All in Technology
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
Qiita埋め込み用スライド
naoki_0531
0
860
CustomCopを使ってMongoidのコーディングルールを整えてみた
jinoketani
0
220
Wantedly での Datadog 活用事例
bgpat
1
430
AIのコンプラは何故しんどい?
shujisado
1
190
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
520
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
C++26 エラー性動作
faithandbrave
2
700
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
160
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Become a Pro
speakerdeck
PRO
26
5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Code Reviewing Like a Champion
maltzj
520
39k
Bash Introduction
62gerente
608
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
A Philosophy of Restraint
colly
203
16k
For a Future-Friendly Web
brad_frost
175
9.4k
We Have a Design System, Now What?
morganepeng
51
7.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
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