 Images give the web life and color, but on average, images consume by far the most bytes on most web pages. We can do better. Responsive images are a huge topic. And this video gives you just a whistle stop tour of the major issues that you should consider. So that's, though, some general principles for images on the web. Now, the goal here is to reduce page weight and file requests, optimize performance, and at the same time, ensure images look fantastic wherever you use them. So the first rule of images is avoid them. I mean, seriously, stick to plain old text and CSS wherever you can. Don't use images for stuff like headings and page titles. It sounds obvious, but try to use the lowest possible resolution as well and the lowest quality settings. Use the right format for image type. For photos, use JPEG or WebP, not PNG. Use the SVG format wherever you can. SVGs are naturally responsive, and they can be simpler to use and less data hungry than icon fonts, especially if you only want to add a few social media logos and icons to your page. Inline SVGs don't add much to page weight, and each image inline avoids a file request. Now, speaking of image formats, there are also a few use cases for inline images with data URIs. When you're using responsive design with PWAs, be especially careful about aspect ratio with images. If you specify height as well as width, which may be good for performance, make sure to get it right. You can incorporate lossless compression tools in your build process. And remember to use online tools and add testing to your workflow. Lighthouse, PageSpeed Insights, WebPagetest, and many other free tools do image testing. It really is a great time to be doing responsive images on the web. You have powerful elements and attributes for sizing, resolution, and to reduce data cost. Now, this chart is for picture and source set. As you can see, there's great support across modern browsers. There's also a picture polyfill available for older browsers. So why do we need responsive images anyway? Well, what about the resolution of the device displaying the images? Put simply, you need to serve images with more pixels to higher resolution screens and vice versa. Next, image display size. This can vary significantly, even on the same device. 100% width in a maximized window on a big monitor is going to lead a lot of pixels, many more than, say, 30% width on a phone screen. You also need to consider that different browsers support different formats. In particular, the WebP format can enable smaller file sizes and better quality images, but you need to provide a fallback for browsers that don't support it. You might also want to use art direction. This is when you want to serve something different depending on display size, for example, a different image crop, or even a completely different image. Your website needs to be able to respond to all those different concerns, resolution, display size, image format, and art direction. So let's look at some of the features that make this possible. First up, the source set attribute. Now, this example shows pixel density descriptors. The source set attribute tells the browser which image to choose depending on the pixel density of the display. This might be 1x for a desktop monitor or 2x for a laptop screen. Now, one thing you'll notice is that the markup naturally falls back to the source attribute, and that means it'll work on browsers that don't support source set. By the way, make sure you always add an alt attribute. Now, unfortunately, we're not going to cover a lot of accessibility in these videos, but the alt attribute is fundamental for those using screen readers or for users with images turned off. So for a browser, there's a catch 22 when it comes to choosing which image to download. The browser needs to know the dimensions of each image, but it can't know that without downloading the image to check. Enter the W unit. The W unit tells the browser the saved width of each image in pixels, thereby enabling the browser to choose the right image to retrieve, depending on the screen pixel density and the viewport size. Just to be clear, the source set attribute is giving the browser information about the image width. It does not specify the size to display the image. You still need CSS for that. And one gotcha to remember, you can't specify both a pixel density and width descriptor in the same source set. It must be all pixel densities or all width descriptors. You can go further than just telling the browser the image width. The sizes attribute describes the display sizes of the image element. The sizes attribute in this example is telling the browser this wallaby will always be displayed at 50% of the width of the viewport. Given the image files available, please choose appropriately. And this enables the browser to select the smallest possible image to download. The picture and source elements enable you to provide alternative sources for the same image. The browser will load the first source that it understands. If the browser can't read the files specified in the source elements, or if the browser doesn't support the picture and source elements, the default image will be loaded. The source elements can include different file formats. In this example, we use WebPfirst and then JPEG and provide the same JPEG file as the default image in the image element. This is great for photos. You can also use picture for art direction. That means choosing different images for different display sizes. The source element can take an optional media attribute to specify a media query. If a media query works for the current viewport width, then the image in the associated source set will be loaded. Only one image will be loaded at a time, kitten large here, when the window width is 650 pixels or larger, kitten medium, when the window width is at least 465, but no more than 650 pixels wide, and kitten small, when the window is less than 465 pixels wide. If the browser doesn't support picture or source, it'll fall back to the image element, which means that the small kitten image will be displayed. The live demo link will take you to an example of this code for you to test in practice. So, OK, hold on to your hat. Here's everything put together. We've combined media queries and source set to specify images for smaller and larger viewports, with different images for different pixel densities. Don't forget, there are tools for making this part of your workflow, so you don't need to manually code all this. There are lots of resources to help you get started in the materials that go with this video. The lab exercises will help you get to grips with coding responsive elements and attributes. Thanks for watching. I hope this was useful.