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. In this short video tutorial, you'll learn how to use the picture element to create responsive images.

I'll explain how the picture element works, and then go through an example of how to use it to display images that are not only resized but also cropped as the screen size gets smaller. I'll also address the impact on performance.

Watch the Tutorial

Watch the Full Course

There are many different techniques for making images responsive, but some of them have serious downsides, such as limited browser support. 

In the full course, Understanding Responsive Images, 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.