Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Responsive use of <img>
Juga Paazmaya
February 10, 2015
Technology
0
99
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
paazmaya
0
120
paazmaya
0
2.5k
paazmaya
0
65
paazmaya
1
37
paazmaya
0
450
paazmaya
0
43
paazmaya
2
36
Other Decks in Technology
See All in Technology
cmwatanabeseigo
0
320
ocise
1
910
yokatsuki
0
190
kanaugust
PRO
0
130
shirayanagiryuji
1
400
tsuyo
0
180
saoritakita
0
340
opelab
2
280
soracom
0
240
shirayanagiryuji
0
1.4k
greymd
0
590
line_developers
PRO
0
1.7k
Featured
See All Featured
marktimemedia
6
330
orderedlist
PRO
329
35k
davidbonilla
69
3.5k
scottboms
251
11k
lemiorhan
626
42k
brianwarren
83
4.7k
bkeepers
52
4.1k
dougneiner
119
7.8k
nonsquared
81
3.3k
jponch
103
4.9k
mza
80
4.1k
pauljervisheath
196
15k
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