 Hi, welcome to Designing in the Browser, the series where we explore user interface design through the lens of modern web technology. In this season, we're doing a deep dive into the APIs that prepare you for the flexible and fluid responsive web of tomorrow. And today we're covering one of my favorite topics, art direction. One of the coolest things about web design versus print design or other static mediums is how interactive it is. You can adjust elements around on the page for a better overall user experience. Check out the first and second episodes for more on micro and macro layouts, as well as container queries. And you can even adjust the content within them. Now, we already talked about micro layouts in episode two and something that is similar but different is responsive images and art direction. With the picture element, media queries and even container queries, depending on how granular you want to get, you can adjust the art media you're sending to your user. So say that you might want a different image for a vertical layout like on a mobile device, but that image takes up way too much vertical space on wider screens. One option is to adjust the way the media object fits into the space provided. Another option is to swap it out for a different layout. And yet a third way is to readjust the content within the media object to best fit the given layout. So let's explore. Let's talk about media and aspect ratio. When you place media into an interface, there are a few options with what to do with it. First of all, you can include it as a background or a foreground image. But once you made the decision on how to add the media, you have control over how that media is presented and how it shifts to fill or fit its space. One thing you can do is specify with keywords how you want to size an image in a parent. Let's take a look at placing a background and foreground image. So here I have a demo and I have these parent elements that have a width and height of 400 pixels. So I could just set an aspect ratio on them. It's one to one. But within them, here as a foreground image, I've placed this AVIF image of these plants. You can even see in DevTools that it has an intrinsic size of 1620 by 1099 pixels. I would probably size this down in a production website, but this is just a demo. And then the intrinsic aspect ratio is 16 to 1099. So if we were to sort of guesstimate this, it's closer to 16 to 10. And the way that I have it fitting right now is covered. So it's taking up, it's filling that space. If I expand it, it's going to continue to expand to fill the space to cover the available area. Now, if I adjusted this to something like contain, then as I resize this parent element, you're going to see the full image. It's going to contain it. You're not going to see it being cropped off like it was in cover. Some other options here are to fill. And this will rearrange the initial aspect ratio, the inherent aspect ratio of the image. And you see it's sort of stretching and pulling here. This happens when you have both a width and height set on images. And then with background, I have similar properties here. So I have this background position centered. And I resize here. It's going to try to maintain that. But then it does cover the space, so you do get a crop. I can set this to contain. That's another option here. And you might notice that now we have multiple backgrounds. So this is because we don't have a background repeat set. By default, it's repeat. So I have to go in here and say background, repeat. No repeat. And there we just have the single image without multiple backgrounds. It's still centering it. I have the background position set. You could readjust the background position. So I could make this top. I could have it be top left, top right. I could even set it to like a pixel amount or percentage. 50% would also kind of be like moving the centering it. That's a shorthand of 50%, 50%. I could change it to 50%, 20%. So shift that around 20%, 20%. So this would just readjust the image and how it fits into this space. Other options here, auto is massive image. So it's just, you're not even seeing where that fits. Contain, there's cover. And then the other default properties. By default, images placed as content into the page have a preserved aspect ratio. But not everything does as I showed you with this demo as you're trying to set that width and height. And when you start to give that image both a width and a height, it quickly starts to lose the aspect ratio as it tries to fit into that. That's why something like object fit can be useful. Luckily, there's also the aspect ratio property, which I could have used instead of for these parent boxes setting them to a specified width and height I could have set that aspect ratio. Aspect ratio can be applied to any image, video or element in general, and it will retain its aspect ratio, whether that's a square at one to one or a video at the default 16 to nine. This can really come in handy, especially with responsive content that you don't wanna get cropped or squished. Many of the windows in the Design Sember site use aspect ratio to retain their size as they reflow. You can even create aspect ratio grids. Adding an aspect ratio for your media is also a great way to prevent cumulative layout shift by creating placeholder areas while your content loads. This way, you only need to know the given width of an area and it automatically assesses the necessary vertical or block space needed. Here's what it looks like when you don't block off vertical space for an image as you wait for it to load. There is this layout shift, but here you can see that the image space is actually being preserved by the aspect ratio. There's a background color that stays there as we wait for the content and image to load, and this aspect ratio is preserved when it's scaled up or down as well. So as the width changes, the aspect ratio remains and that will prevent cumulative layout shift because we can create these placeholder areas for images. Speaking of core of vitals, media performance and optimization is pretty important to your webpage. And one of the best things that you can do for your performance is optimize your images. And when I mean optimize, I'm not only talking about running it through an optimizer program once, I'm talking about adjusting the image format and providing your user options as well as adjusting the sizes of the images you're serving for even more significant savings. But first, let's take a peek at image formats. One new image format that's sweeping the scene is AVIF based on the AV1 video codec. It's smaller than WebP and produces less blurry results and the image media savings are really incredible. You can then serve multiple files with something like source set or the picture elements to allow the user to get the smallest possible file size for what works and is supported in their browser. With this set of images, AVIF conversion reduced them each by 92 to 95% in size. That's a 92 to 95% size savings from PNG. They went from 1.1 megabytes, 1.2 megabytes and 1.3 megabytes respectively to 89 kilobytes, 91 kilobytes and 100 kilobytes without any visual loss. And you might notice that each of these images shows the same content, but they're rearranged to better fit the screen in different aspect ratios for different available space. This is an example of swapping media for art direction. This is something that I see often in digital publications who have a mobile version of a hero image and a different one for wider formats. This comes in handy when you have a wide-angle photograph but you want a more narrow crop for mobile. But cropping isn't your only tool in the tool belt, although it is a convenient one because there are many services out there that will automatically do this for you. You can rearrange the images you're sending to best fit the interface to like these examples. I have a wide version, a one-to-one square version and a vertical version. And in code it would look like this. These are two great techniques to combine for the best outcome. You can send multiple file sizes and formats at the same time. This way your browser does the selection and your user gets the best outcome. For more information on responsive images, check out our web.dev learn design course at web.dev slash learn slash design. There you'll find modules on responsive images and at the picture element. Remember that button from our episode on micro and macro layouts? This is another example of art direction in UI. We're removing complexity and detail at smaller screens so that the human eye can better read that icon since lines become messy and blurry at smaller sizes. At larger sizes, the lines add to the cart effect. So to give you a reminder, here is that cart. We have the cart with the plus with the add to cart and as we resize this, we lose that plus. We lose some of that detail. We lose the two cart text and then we also are going to be losing those lines so that the cart doesn't become messy at a smaller icon size. So this is an example of a micro layouts with some art direction applied to it that can be placed throughout your UI. We're using container queries in this demo so that the button owns its responsive information and always looks optimal wherever it's used on the page. This would be that last option, the rearrange option of art direction. It's important to note that we can't currently use a tool like the picture element to decide on what media to send based on a container query because picture relies on viewport information and not on container information. For it to reliably send content based on a container, it would need to wait for the page to render first, do a paint pass, and then it would start the logic process to decide which image to download and render, which is relatively slow. But you can do this with background image as we're doing in this demo. Here I'm sending different background images with different aspect ratios based on the available space using container queries. So here I have this image container and I have this hero image. The hero image has an aspect ratio and a background image URL. And here I have this vertical version of the background image because it's a wide view with a lot of vertical space. But as I resize this, I might want that to be a one-to-one version. So I'm adjusting the image that I'm sending and the aspect ratio or I might want that to be a wider version as I rearrange the layouts and the image. And this is now a 16 to nine ratio with this image here. And this might be more optimal for mobile devices because I want the viewer to see the content a little bit faster and it will work a little better in some of these mobile views. And like in our button example, you can rearrange art within an art board for optimal interface design. The design sembersight is full of windows that use container queries for art direction. Here's an example of an early work in progress to briefly show how that might work. So we have this window here and I'm able to rearrange it, the width, the height and it's rearranging the entire layout of all of these elements within it. We have this interior with person, food, items on the table. And as I resize this, those are gonna shift and even stack as it gets to more vertical space to fill that space and make this interface something that works no matter where it lives on the page, no matter the available space that it has and within some boundaries. I encourage you to go on the design sembersight to resize some of these windows and try them out on your own. Responsive images are a great way not only to optimize your webpage but also to add some flair and optimize your art direction. With the picture element, source set and container queries, you have the ability to shrink, crop, swap or rearrange for an optimal user experience. I'll leave some links in the show notes for you to check out the demos and learn more. For now, that's all we have for this season of Designing in the Browser. I wish you all a happy new year full of new responsive possibilities. That was really cheesy, should we keep that? I'll see you all on the internet, sign off, take a break, don't forget to drink water and bye for now.