Downloadable Source Files also available on GitHub.
We all want our images to display at the best possible quality, with optimal file size, on different devices, but achieving that is easier said than done. There are many different techniques for making images responsive, but some of them have serious downsides, such as limited browser support. In this course you’ll learn everything you need to know to get started with responsive images. We’ll cover what they are and how they relate to responsive web design, and we’ll also discuss best practices.
What You’ll Learn
Different approaches to creating responsive images, and their respective pros and cons.
Using CSS to selectively show images.
How to use the srcset and sizes attributes.
Using the picture element with multiple image formats.
How to use Picturefill, a plugin you can use to support the picture element in non-supporting browsers.
Performance optimisation when working with responsive images.
About the Instructor
Adi Purdila is an expert web designer and developer based in Romania. He’s created more than 30 courses for Envato Tuts+ on every conceivable web design topic, from Bootstrap, WordPress, and Foundation, to Sass and Sketch. You can check out his portfolio, follow him on Twitter, and see his ThemeForest portfolio.