A presentation held at [****] for Siili Solutions responsive design and prototyping team
Responsive use of
View Slide
So far the images have beensomewhat static
HTML 4 required to use src and alt
XHTML required a closure
HTML5 introduced new properties
Why not ?
srcsetDescriptor defines the width of the image(w) or the pixel ratio (x)
srcset width use caseUsually used when the image hasdynamic size
srcset pixel density use caseUsually used when the image is used in afixed layout
srcset - benefit & problem
sizes“If the srcset attribute is present, thesizes attribute may also be present”
sizes examplesFirst matched, first served. Default:
srcset & sizes - only benefit
Pixel density matters
3x
QuizWhen srcset is unsupported by the givenbrowser, which image from the examplemarkup below will be downloaded?
What problems does this bring?Duplication of media queries from stylesto markup, hence semantics mixed
What problems does this solve?Browser will download only the imagesthat are best fitting to the given use case,hence better use bandwidth
What problems does this solve?Developer can leave the calculations ofwhich image to use in a given case to thebrowser
Would you like to know more?Please see the talk “Responsive imagesare coming to a browser near you” byYoav Weiss at VelocityConf 2014youtube.com/watch?v=GC3VgcltKKI
More further readingPlease also see the in depth post by EricPortis about the topic:ericportis.com/posts/2014/srcset-sizes
Thank youI am Jukka Paasonen, a ResponsiveConsultant at Siili Solutions