image() - taking background-images to the next level

Key Takeaways

when we declare a background image we usually use the URL function to do that and while it works just fine it has nothing on what we'll be able to do with the image function hi there my front end friends welcome back to yet another video and if you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and if I can't get you to fall in love with CSS I'm hoping to at least help you be a little bit less frustrated by it we're going to be doing that today through a little bit of a different video than what I usually put out first of all this is being put out as a collaboration with Stephanie Eckles 12 days of web which is basically an advent calendar going over fun HTML CSS and JavaScript stuff and my article on image came out today and there's two previous articles that are already out for this year which are looking at the dialogue element as well as the new viewport units that are Now supported in Chrome I just found that out so that's awesome and the reason this is going to be a little bit different is for two reasons or three we have the collaboration which is kind of fun but we're also looking at something that actually has no current browser support and so we're going to explore what it is and why I'm excited for the image function but we're also going to talk about how I learn new things about CSS and learn new things that I haven't seen before because I get asked about that a lot and being something that isn't actually supported anywhere yet that I can't even play with adds an extra challenge to being able to write an article or do a video explaining how that thing is going to work and so I think it's a fun opportunity to take a chance to look at how I learn new things as well and the very first thing I always do whenever I'm trying to learn something new is I go to the NDM page for that thing and so here is the image function one I'm not going to go through everything here because I'm going to use my own visuals as well that I think will help highlight how different things are working here but this is always that first step that I take to start reading a little bit about how something works I'll read through it you know I sort of will skim this because this usually explains what it is and is it says it's actually similar to the URL function and if you wanted to you could actually use the image function exactly like the URL function and just throw a string in there that has the path to your image and it works and this is one of the things I like about the image function is you don't need to learn a whole bunch of new stuff to figure out how it works you can go okay just replace the URL with image and that's going to unlock some new stuff for me and I only need one of those new things so let's I can just plug that in and get it to work and the three main things that are coming from it I think it mentions here the image's directionality which is really interesting we're going to see why we'd actually want that the media fragments right there it talks about we can display and choose where we're going to display in a much easier way than using things like background position and background size and trying to move things around and the last thing is setting a solid color as a fallback which doesn't sound super interesting we could just have a background image and a background color it wasn't that hard to define a fallback color before but this actually opens up new possibilities that we couldn't do before and as cool as the other parts are this is I think the thing I'm most excited about so when I am learning something new as I said I usually come through here and I sort of go through the different things and this is where they break down the syntax a little bit which can look a little bit confusing it's not that bad I'm just basically saying that you have your image and then you're giving it some image tags an image source and a color and those question marks are saying that everything is optional and then it just gives you a little bit more context to the types of things you can be doing so my image source can be a URL or a string RTL or LTR are for my image tags here um and and stuff like that and you have a color as a color so it's this can look weird but it's not that bad and it's one or the other for these that's why we have the bar there this is usually the more the better part though because it actually describes what each one of them is actually doing and then it sort of goes into the information on how all these different things are going to work so I try and read this in quite a bit of detail and if it is something that's actually supported I'm going to play with it in like I usually make a code pen or something like that and to start playing with different values and trying it so I'm actually typing code and not just reading about it because when you're typing stuff and doing stuff that really helps things sink in we do also have some accessibility concerns here which are always good to know in this case I think it's basically the same as with any background image where we just it doesn't actually provide anything like a real image would where you can add alt text to give that extra context that a background image can't have um and also just make sure you have a fallback color in case the image doesn't load because you have text there the image doesn't load you want to make sure that text is still easy to read now usually what the MDM does is this where it sort of describes what the different things are and then you'll get two examples so the examples are always really nice to sort of go okay this is how things are working this is where if you're playing around with the code you can look at their examples toy around with them now here they have an example that's not working because browser support for this isn't there yet so we just it's completely broken so that sort of sucks but one day that will work um we have again we have the different examples but again it sucks when we can't actually interact with them because that always makes things a lot easier when that does work uh and it just describes everything and at the very end there's always a link to the actual specification and I have that opened already here and in this case actually the specification um I think I went too far but I think it's right here um but the specification itself is actually very similar to the MDM article that's not always true um if the MDM article is lacking or sometimes doesn't even exist yet that's where this comes in handy if you go to some older things it can be really hard to parse through the documentation I find the newer parts of this that are written now they usually have really nice examples and lots of examples they include a lot of visuals so as you can see there's like an example there with an image lower down I think there's another or there's this example where they tried to simulate it because the browser support's not there yet um and they do it it's much better in the spec now than it used to be in the new things there's a lot more visuals coming and a lot of other stuff so don't be scared of going into these and actually reading them to try and understand more about what you're learning and with both of these cases they often lead to um the link to other things throughout them right so here it's linking to the Natural dimensions if you don't know what natural Dimensions is click on it or maybe not regular click on it maybe do a middle click or whatever open it a new tab and read what natural Dimensions actually mean and doing this and then you end up with like oh now I have natural aspect ratio and then I find out about that and then you end up on this like rabbit hole of learning about sort of what things are actually built on and it just really can help you solidify your understanding of CSS but that aside let's go back to how this all works so as we saw in on the MDM article there's three different things that are kind of important with how the image is going to work one is the directionality of it the second one is image fragments and the third thing is the fallback color which as I said is a little bit more than just a fallback color or opens up better doors I guess you should say but let's start with image fragments and then work our way down because I think image fragments are something that people are going to be maybe the most excited by so to understand how it works we can jump on over back to the syntax section here and we can go and look here but I will use some visuals but it's not seeing like how it's actually going to written be written out there but when you start off we can just put our image and then put a URL like we normally would and then we do a hashtag and then do an x y w h which are for the X and Y starting point and then the width and the height that we want to use and so we're going across and down in pixels and then we're choosing a pixel sized region if we'd rather work in percentages rather than pixels we can explicitly say that we want it to be in percentages instead but when we do that all the units will change the percentage the X and the Y are percentage based and the offsets from there to define the whole region everything is going to be in percentage and why would this be useful why would you want to use something like this the two main things that come to mind I think you saw we saw one before we were looking at the spec a little bit it mentioned image Sprites so definitely it could be a nice use case because it could be really easy to put in fragments and just easily identify different sections so you just have your big image Sprite you can just put the coordinates you need and it would work if using svgs there's other ways of doing Sprouts that are maybe a little bit easier these days but I still think that using it for Sprites could be useful and the one thing I would not use it for is Art Direction because we could take a big image and say crop it this way for your desktop and crop it this way for a Mobile screen but then you're loading in a much heavier image than you need for both situations because you're losing a lot of information on both of your crops so I'd probably use the picture element for that instead of using image even though it would be possible but where I see it is maybe you have the same image two or three times on the page and you have different crops that are needed for it one of them you have the whole image and then you want to take that same image and maybe zoom in on a part of it because you're highlighting something and then you're highlighting another part of it you're highlighting another part we already loaded in the full sized image you don't need to load in now a second and a third and a fourth image you just have that same image four times and choose the different spots that you're zooming in on it or something like that and I think potentially something like that could be kind of useful and kind of interesting now for the bi-directionality of it the example here and even the one there isn't the best we're just gonna go with other visuals but let's say you have a website that needs to be multilingual some writing languages are left to right other ones are right to left you could even have some vertical languages in there and in those cases you have you could add directionality to our images but you generally probably won't do this it's more of an edge case than it is something you would do on a regular basis and that's because most images they don't really matter when it comes to like the writing mode of the text right an image is an image and that's why the if we go all the way back up here and look at the syntax of it it's saying that this image tag here which is the left to right or the right to left it is optional so you can leave it out and if you don't include it it means the image doesn't have any directionality to it so that means regardless of whatever writing Direction you're using it's not going to change it's just showing you the image as it is occasionally though we do have images that might have directionality stealing the example from here and from the spec where you have bullet points with arrows that might be pointing so instead of a bullet you replace it with arrows that are looking at each one but then you you change the writing Direction and if you do that now your arrows are pointing the wrong way that sort of sucks and you have to write extra CSS to flip them around well we could just change this and use the image tag there and when you put the image tag you're saying what the default is so this image is a left to right image so if the writing mode gets changed to a right to left we're going to switch and follow that and and actually have to flip things over so it's important that you're defining it for what it is in its natural state so then it basically just does a transform on it to flip the image over so that in if you are dealing with multilingual sites I'm sure could really come in handy and then last the part that I'm as I said most excited about which sounds like the most boring one which is our color fallback and as you guess like if you do a background image you can then put a background color and you have a fallback color so what's the big deal about this well first it's nice just to have image put your URL and then put a color and you have a fallback it's super easy and a little bit left to write which is nice but especially when this is new some people are probably going to complain about it's not as readable or whatever but uh that's fine what I really like about this is it also means because we have a background image you can Define like 10 background images if you want and we can use that with things like mix blend mode or mixed background background blend mode we're going to get there eventually right you can take a a gradient and an image and mix them together using background blend mode and while background blend mode could be really useful it's also not the best because you can get like these it can be really hard if you have images that are light and dark it's easy to like okay we're going to use only the darks or use only the lights or use a overlay in it it just if you needed something that would just like sort of lower the opacity of your image which people always ask me about how do I lower the opacity of a background image or how do I do like I just want a solid blue and lower the opacity of that blue by 20 or 30 percent and it was there was no way to do it because the background color is always behind my background image and as I said blend modes could be useful but often it could still be a little bit tricky or hit and miss it works really well with this image but not so well with that next image so the nice thing with this is you could have two backgrounds because you I mean you could have 20 backgrounds on something if you wanted to and just have a whole bunch of images this is you know you could use that to blend things really well but now we could actually do is take a background color but as an image using the image you do your background image is a solid color and then a second one that's an image the color will be in front of the image and then you can lower the opacity on the solid color and just create this effect so you could either have a dark color to try and make it easier to read text that's on top of it you could put the color is the same as your background color but reduce the opacity of that color and make it look like the image is just at a reduced opacity these are all things that are possible to do now but you'd have to use like a pseudo element to put in an extra layer to be able to control all of this it was just a little bit more complex a little bit more work and really now it's just going to be so so much easier to do and that's why for me I'm really looking forward to this but I'm sure all these other things are also going to come into some really good use cases as well and so yeah when you come across something new that you've never seen before even if browser Sports not fantastic it's still possible to find out a lot about it just by reading through a little bit of documentation on them I'm really looking forward to image actually becoming a thing and if you're looking forward to other future CSS stuff that's not available yet but that you can actually use on like image I have a video where I explore some of those right here and with that I would really like to thank my enablers of awesome over on patreon Jan Johnny Michael Mr Dave Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome