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
150
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
170
Windows Live sähköpostin käyttäminen Gmail-palvelun kautta
paazmaya
0
2.7k
jQuery - The new wave of JavaScript
paazmaya
0
84
Finland – Coming here and going there
paazmaya
1
50
Nanbudo - Nanbu Kata Book preview
paazmaya
0
760
Nice day for a walk
paazmaya
0
72
Valkoviiksi 7 makers
paazmaya
2
100
Other Decks in Technology
See All in Technology
パフォーマンスとコスト改善のために法人データ分析基盤をBigQueryに移行した話
seiya303
1
110
教師なし学習の基礎
kanojikajino
4
380
FastConnect の冗長性
ocise
1
9.4k
Women in Agile
kawaguti
PRO
3
190
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
130
The 5 Obstacles to High-Performing Teams
mdalmijn
0
210
extensionとschema
yahonda
1
170
アーキテクチャわからん、の話
shirayanagiryuji
0
270
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
120
AWSエンジニアに捧ぐLangChainの歩き方
tsukuboshi
2
450
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
210
ろう・難聴者のコミュニケーションを円滑化する取り組み
chiemi627
0
120
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
920
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
7
240
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
290
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
171
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
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