 Hi there, my friend and friends. Normally we see something like this used as a reset for our images and it works really well, but what if I were to tell you that maybe we should be using this instead? Now, you might be thinking that I'm trolling you because why would you want a background image on an image and I get it because I was thinking the same thing and I actually saw this from a post by Harry Roberts. And when I first thought I wasn't sure if he was being serious or not, he talks a lot about CSS performance and I thought maybe he was found something along the way on a site where people were doing something kind of weird and was, you know, posting this a little bit in jest, but he had a whole thread where he went through it point by point. And as I went through the entire thing, each one of those lines actually started to make a whole lot of sense and I wanted to spread the word about it a little bit. So we're going to go through this code right here and we're going to see why maybe you might actually want to use a whole bunch of these on your images. So let's dive into the code and we're going to see right here. I just have a simple thing set up with an image at the top. We're going to be using this to sort of go through all of the different things right now. We just have an image that's right here with an alt attribute on there with, you know, a description of what my image is and I have put it within a height, which are just generally a good thing to have on there. And it's going to help us with one of the things that we're going to look at along the way. And in general, it is considered a best practice to have your width and height on there. So I would suggest having those, even though that's not part of what we're looking at for now, though. I am going to take this width and height off just because you're going to see I'm purposely bringing in an image that's way too big. Please optimize your images at least a little bit and don't bring in giant images like this. But this does bring up the first thing. And this is the one that I think everybody can agree on, right? If the first line that Harry shared there was a max width of 100% on our images, which just stops them from overflowing, which is nice. It's, you know, one of those lines that we often include. But normally we also throw a display block on there. And when I do that, actually see this text right here, I'm going to comment this out and hit save. And you can see it's moved down a little bit. And then when I put that back on, it moves back up. And the reason that's happening, let's turn off this display of block. And if I come here, images are sort of like this weird inline slash not inline element. So if I put it inside my paragraph, and of course the width is too big now, let's just say that the max width is 250 pixels to make it smaller. You can see the text is in or the images in here with this this text, right? It just lives in the text. And we could even take this word and put it in front of my image and it just lives in there. And the reason that we have is we have this like little bit of space underneath and let's like really zoom in on here. But like we have to send our characters like this J that go underneath and images are meant to be on this baseline of the text like normal characters are not the ones that descend down. And normally if we do a display of block that just gets rid of that space underneath. But Harry's suggestion was instead of bothering with a display of block was to do a vertical align of middle. And if we do that now, it breaks everything here. So it is assuming that you're not going to be putting your images inside of text, obviously, but let's go and grab our image and not put it in there because that's not something we would normally do anyway. And if I did a display block, it would also completely ruin it. So either way, it wouldn't work. But by doing that, if we turn off that vertical line middle, you can see we have that space showing up. And when I put that back on, it removes it and it keeps that like display inline block style thing that images normally have. So we're not changing the behavior. We're just getting rid of that alignment issue. So it's very similar to doing a display block, but a little bit less heavy handed along the way, which is why he suggested that using that instead of using our display block on there. So a vertical align of middle gives us that same desired behavior. Now we also had on here to do a height of auto. And by having the height of auto in here, we are just making sure that our image is actually going to work the way that we're expecting it to work. So it is one of those ones, you know, it's going to keep the aspect ratio of the image. And as I said before, on the image, normally you do want to have the width and height on there. And so by having this, this is telling the browser what the aspect ratio is. And then this is just making sure that that aspect ratio will always be maintained. Now, the next one is the first one for me. That was like, why would I ever want to do that? And we'll throw it up here at the top and it's font style italic. Why would you? Why would you want to do this? Take a guess, but there actually was a good reason for it. And it's if ever, you know, we have alt text for two reasons, really. We have it for screen readers. So if somebody who's using a screen reader comes on this and they can't see the image, the screen reader can read the description of it. You also say it's used for SEO and stuff, but it's also if the image doesn't load, it could be a network issue if you have a very large image, which we do here. We're going to look at some other things with that. But it could be, you know, there's a typo. There could be a lot of reasons an image doesn't load. And look at that. The alt text actually comes in as italic instead of coming in, you know, like this. And the advantage with that is you're setting it apart from the rest of it to sort of indicate that this is this text is actually a little bit different. Because the little broken image icon is not the most obvious thing in the world. So we add this one line here in, it's just a failsafe, right? So it's not really going to impact things almost ever. But in the rare situation, we're just sort of offsetting this text, making a little bit different in, you know, if ever we do need it or if ever it does show up. Now, the next one, that one, I sort of figured out pretty fast. This next set, there's actually two of them. The first one is our background repeat of no repeat, along with a background size of cover. And this was more of a head scratcher for me. I really couldn't figure out why we'd want to do that. And I actually ended up on a blog post of Harry's that I'm going to link below because he gives a lot of details on how to optimize things and make sure that things are well set up for this to actually work properly. But it has to deal with sort of like a fake lazy loading of images almost where if you're on either a slow network connection or if your images are way too big like this one is here. So the idea with this is you actually want to have a low res version of your images. So I have my hills and then I'm also going to have this hills low res, which is a very low res. Actually, let's go and take a look at how low res it is low res. You can see it's really disgusting and blurry. Now, if you're going to implement this, please check the blog post from Harry that I'm linking down below because it goes into detail on sort of the size and quality ratio that you really want to make sure you're hitting for this. I'm just going to give a brief overview of why you might want to do it. And if you're interested, please check out Harry's post. And of course, there's ways of like having these generated for you, right? You don't have to do this all manually if you have a blog or something with lots of images. But here we have my low res or no, we want our regular one here. But then I'm going to come and I'm going to say that the we're going to do a style is equal to background image URL. And we're going to bring in our low res one as a background image instead. So that was Hills low res. And you might say, well, what's the point, right? I reload my site and why would I see a background image here? That's a good question. What happens if we come in and in this case, as I said, my original image is like three mages. I purposely made it really big just for the demo. But I'm going to come in my dev tools here and we're going to go to network. And I'm going to simulate a slow 3g site. And there's one more step. Actually, we might want to take here, but we're just going to I'm going to have that on and we're going to refresh the page. And watch what happens here as the page refreshes, we're going to get a blank. Then we get the low res one. And while the low res one is acting as a placeholder there, the high res image is also coming in. That's pretty cool, right? So it's sort of like almost like a skeleton loading, but with the original image itself there first, which is coming in as a low res background image. And one last thing though, if you are going to use this approach, which I think is really cool, is what you can also do just to ensure that the image loads in. So I hit save there and it took a minute with the slow 3g coming in. We can actually preload the low res version of the images as well. So we can have that set up. And again, this would probably be some something you'd want to automate a little bit. Instead of manually setting this all up, but it does depend if you just have one hero image and you probably don't need to do this for other images, right? You can lazy load lower down images and other stuff, but maybe you have a hero image coming in or something that is a little bit bigger. In that case, maybe you could manually set this up and it's really not the end of the world. And you just do something like this where we're preloading the low res version in. So make sure that's coming in right basically as the page comes in. And then we can have the other one slowly come in after. If somebody's on that slow 3g network or whatever it is, you know, you have a bad Wi-Fi connection or whatever it is, but it just makes it so there's at least something there instead of a jump in content, which is always terrible, which is also why you want the width and the height on here, right? Because if you don't have a width and height defined, it's possible that that's also where you as the image loads in. That's when content starts shifting around, which is also the worst. And of course, there was one more in here, which I found really interesting and it's to come in with a shape margin of heated 0.75. It's just the idea here is just to have a default shape margin on it. And this would be in those rare situations where you might be coming in and floating an image. So as a really quick example of that, I just have this one here where I have this image that's a circle and it's floating to the left, but I've set it up to have a, you know, here's the float left on the image. And of course, I've set this up a little bit fancier, but we do the float left and then it wraps around. But that's also happening because I'm using the shape outside here. So if I took off shape outside, it gives me, you know, obviously that's not quite what we're after. So the shape outside is saying that it's a circle. So the text can actually wrap around and then I can have a shape margin on there and actually give it the spacing that I want. And you can, you know, play around with different numbers there to control the space around the image. And this isn't something that we use every day. So maybe you don't want to bother with it, but it's, you know, it's inert. It's not doing anything unless you actually end up floating something. So it's one line of CSS. It's not like it's going to unoptimize your site or something just because you're not using it 99% of the time. Again, you don't have to include it, but it could just be one of those defaults to have in there just in case you ever run into a situation where you need to do something like that. And if you'd like to know more about how shape outside works and some of the stuff you can do with it, of course, I've covered this in a video in the past. So if you'd want to know more about that, you can check it out right here. And with that, I would really like to thank my enablers of awesome who are Web on Demand, Andrew, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.