Working with Responsive Images

Key Takeaways

[Music] On average, images consume by far the most bytes on most web pages. We can do better. Responsive images are a huge topic. So, I'm just going to give a whistle stop tour. First though, some general principles for using images on the web. The goal here is to increase performance and reduce data cost. Now the first step in that is to avoid images wherever possible, text, CSS and so on. Use vector formats where possible, SVG. You could use icon fonts, but there are good reasons not to use them. I I won't go into that here. Anyway, always use the lowest possible resolution and quality image. Use the right format for the image type, WEBP, PNG, JPEG, and so on. 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 width and height. 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 workflow. And remember to use online tools and to add testing to your workflow. Page speed insights, web page test, and many other free tools are available. It's a great time to be doing responsive image design on the web. You have really powerful elements and attributes for sizing, resolution, and to reduce data cost. This chart is for picture and source set. As you can see, there's great support across modern browsers. There is also a picture polyfill available for older browsers. So what makes responsive images responsive? Firstly, the resolution of the screen. You need to serve images with more pixels to devices with higher resolution screens and vice versa. Secondly, image display size. This is the size at which the image is actually displayed and that can vary significantly even on the same device. 100% width in a maximized browser window on a big monitor is going to need an image with much larger dimensions than if the image is displayed at say 30% width in a smaller window. Think about format support. Different browsers support different formats. For example, you might want to serve WEBP images to browsers that support WEBP and provide a fallback to browsers that don't. Art direction. Now, you might even want to serve a different version of an image depending on display size, just like we mentioned earlier. Let's take a look at the source set attribute. This example shows what are called 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, 2x for a laptop screen, or even more on a phone, for example. Note that fallback to source. So this will work on browsers that don't support source set. Also note the use of the alt attribute to improve accessibility. Now unfortunately we're not going to cover a lot of accessibility in this course, but the alt attribute is fundamental for those using screen readers or for users with images turned off. 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 each image to check. Enter the Wunit. The Wunit tells the browser the 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. Now, note that we 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 size of the image element. The sizes attribute here is telling the browser this walabe will always be displayed at 50% of viewport width. Given the image files available, please choose appropriately. This enables the browser to select the smallest possible image size to download. The picture and source elements enable us to provide alternative sources for the same resource. the browser will stop and load the first source element that it understands and load that image. 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 from the source. The source elements can include different file formats. In this example, we use WEBP first and then JPEG as a fallback and provide the same JPEG file as the default image in the image element. 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 where you can specify a media query. When that media query is triggered, then the image in the associated source set attribute will be loaded. Only one image will be loaded at a time. Kitten large 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 and kitten small when the window is less than 465 pixels wide. If the browser doesn't support picture and source then only the image tag will be used and you will see the small kitten image. The live demo link will take you to an example of this code for you to test in practice. Okay, hold on to your hat. Here's everything put together where 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 started with responsive elements and attributes.