Picture Perfect: Designing with Responsive Images

About this presentation

<span style="font-weight: 400;">Without doubt, one of the real challenges when designing and delivering responsively is managing images. Done poorly, and we soak up the user's bandwidth, and deliver slow loading pages that ultimately feature images that may not even be tailored to the user's device. Done well, only the right image is delivered to the user's device, improving performance, and overall user experience.</span> <span style="font-weight: 400;">This session looks at how to do responsive images right, with the &lt;picture&gt; element, a semantic approach to dealing with responsive images on the Web. We'll cover the benefits, and best practices for delivering responsive images across a wide range of device resolutions with an eye to solutions that support the widest range of web browsers today.</span> <span style="font-weight: 400;">We'll detail the current state of responsive images on the web, how the &lt;picture&gt; element can help improve the design workflow and support multiple sources via the srcset attribute and their display conditions. And we'll look at the advantages of this approach and cover common use cases (such as supporting desktop and mobile contexts).</span> <span style="font-weight: 400;">The way you serve images will never be the same.</span>