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
180
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
92
CasperJS Workshop 2015-01-23
paazmaya
0
190
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.8k
jQuery - The new wave of JavaScript
paazmaya
0
93
Finland – Coming here and going there
paazmaya
1
51
Nanbudo - Nanbu Kata Book preview
paazmaya
0
870
Nice day for a walk
paazmaya
0
75
Valkoviiksi 7 makers
paazmaya
2
110
Other Decks in Technology
See All in Technology
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
150
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
430
Git in Team
kawaguti
PRO
2
310
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
310
いまさら聞けない ABテスト入門
skmr2348
1
220
実装で解き明かす並行処理の歴史
zozotech
PRO
1
620
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
230
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
347
40k
Unsuck your backbone
ammeep
671
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
For a Future-Friendly Web
brad_frost
180
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Fireside Chat
paigeccino
40
3.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