srcset
Descriptor defines the width of the image
(w) or the pixel ratio (x)
Slide 8
Slide 8 text
srcset width use case
Usually used when the image has
dynamic size
Slide 9
Slide 9 text
srcset pixel density use case
Usually used when the image is used in a
fixed layout
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
srcset - benefit & problem
Slide 14
Slide 14 text
sizes
“If the srcset attribute is present, the
sizes attribute may also be present”
Slide 15
Slide 15 text
sizes examples
First matched, first served. Default:
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
srcset & sizes - only benefit
Slide 18
Slide 18 text
Pixel density matters
Slide 19
Slide 19 text
3x
Slide 20
Slide 20 text
Quiz
When srcset is unsupported by the given
browser, which image from the example
markup below will be downloaded?
Slide 21
Slide 21 text
What problems does this bring?
Duplication of media queries from styles
to markup, hence semantics mixed
Slide 22
Slide 22 text
What problems does this solve?
Browser will download only the images
that are best fitting to the given use case,
hence better use bandwidth
Slide 23
Slide 23 text
What problems does this solve?
Developer can leave the calculations of
which image to use in a given case to the
browser
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
More further reading
Please also see the in depth post by Eric
Portis about the topic:
ericportis.com/posts/2014/srcset-sizes
Slide 26
Slide 26 text
Thank you
I am Jukka Paasonen, a Responsive
Consultant at Siili Solutions