A better image reset for your CSS

Key Takeaways

hi there my frontend 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 cuz I was thinking the same thing and I actually saw this uh from a post by Harry Roberts and when I first saw it 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 were doing something kind of weird and was you know posting this a little bit in Gest 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 uh 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 a width and a height uh 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 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 um just because you're going to see my I'm I'm purposely bringing in an image that's way too big uh please optimize your images at least a little bit uh and don't bring in Giant images like this uh but this does bring up the first thing and this is the one that I think everybody can agree on right if you 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 uh 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 um 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 image is in here with this um this text right it it's just lives in the text and we could even you know 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 um but like we have descender 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 uh 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 uh but let's go and grab our image and not put it in there cuz 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 um 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 uh along the way which is why he suggested that using that instead of using our display block on there uh 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 we're expecting it to work um 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 um 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 uh in its font style italic why would you why would you want to do this take a guess um 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 uh 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 um 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 uh 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 uh cuz the little broken image icon is not the most obvious thing in the world so we add this one line here in just a fail safe 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 um in you know if ever we do need it or if ever it does show up now the next one uh F that one I sort of figured out pretty fast this next set there's actually two of them the the first one is our background repeat of no repeat uh along with a back background size of cover and this was more of a head scratcher for me I really couldn't figure out uh 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 Det details on how to optimize things and make sure that things are well set up for this to actually work properly um but it has to deal with sort of like a fake lazy loading of images almost uh where if you're on either a slow network connection or if your images are are way too big like this one is here um so the idea with this is you actually want to have a low reses 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 uh low res you can see it's really disgusting and blurry uh 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 uh 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 uh 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 um but here we have my Lowes or no we want our regular one here but then I'm going to come and I'm going to say that the uh 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 I'm why why would I see a background image here yeah that's a good question uh but what happens if we come in and in this case as I said my my original image is like three mags I purposely made it really big just for the demo uh 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 uh 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 highres image is also coming in that's pretty cool right uh 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 reses background image and one last thing though if you are going to use this approach which I think is really cool is uh 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 the slow 3G coming in um but we can actually preload the low version of the images as well so uh we can have that set up and again this would probably be some uh 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 an hero image coming in um or something that is a little bit bigger um it you know in that case maybe you could manually set this up and it's really not the end of the world um and you just do something like this where we're pre-loading the low reses version in so make sure that's coming in and write it 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 uh Network or whatever it is you know you have a bad Wi-Fi connection or or whatever it is um but it just makes it so there's at least something there instead of a jump in content which is always terrible uh 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 uh margin of uh he did 75 it's just the idea here is just to have a default shape margin uh 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 uh 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 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 uh 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 uh 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 on optimize 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 neers 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