Lessons

Lesson Info

Responsive Images

So I want to talk about responsibilities first we've so far in the last session, we kind of dabbled a bit and talked a little bit about it, but it's a big deal, okay? As far as responsive site, so we need to we need to go in further, we need to really fully explore what it means to be responsive image have responsive contact if you look at my sight right now, I'm gonna take you to your law history, okay, well, history and you just don't fall asleep, but ah, little history of response to design a responsive, you know, nature, if you will. Back in the day when we started doing websites, I've been doing websites for since ninety seven, so I don't know when it's embarrassing, I'm not going to say that again, but I've been doing websites for quite awhile, and I mean, we're pressed for for a while as well and back in the day when we wanted to make a site if we knew how to make a table, we were like king of the web, especially if you knew how to take a table and make it centered, you know? I ...

mean, you were you were that that was it that's, the only thing he needed to know how to dio and we used to complain about, you know, the three bar browsers we had in the two operating systems we just complained endlessly about, oh, it doesn't work in this browser, etcetera. And of course, now we have six billion devices, seventeen operating systems and everything else, so we should have just kept their mouth shut. But my point here is this with responsive design in general there's a lot of things to consider, okay? And when you talk about what's called responsive images, um when we were used to build websites, we would actually go out and create tables. Everything was table based, you set it in stone got it done a matter of fact, I'm sure some of us out there have come from photo shop or illustrator or any fireworks users come for fireworks and gone straight out to the web and created ourselves in html file that was table static and wound. It did its thing, right? Yeah, well, with responsive design were starting to add content and imagery like let's say this large banner I've got right here, or even you know this video or other content that we have, and we need to ensure that the experience between mobile tablet desktop is not necessarily the same, it doesn't have to be the same, I don't think. But it has to be has to be good, okay? It's gonna be a good experience and people have to be able to find what they want they've got to be able t enjoy doing it is a matter of fact and they also need to make it so that it doesn't take forever to download that's a big deal when we started doing response to design back in the day um what we would do is we would take a site that we had and we would use dibs to creatives and we'd create kind of ah mobile afterthought if you will so I'm going to go to the board again. I know I used to sing a lot, but when we created before this is way back when for responsive design we would actually have maybe a div let's say and then maybe like a sidebar on left ah header and a footer. Let me just kind of slap these in here, all right? And these were debased so each one of these would be a diff and of course each one would have a style sign and say yo so big and where you are etcetera and we thought that's that's awesome that's great! And then suddenly we had the the iphone came out okay and I'm talking about somebody there earlier is I know, but the iphone came out and what apple did that is not even looking like an iphone. Whatever. Okay, that's an iphone. So what apple did was they they actually, the browser lied to us. Okay, so what they said was, you know what? Enough interview have ever gone to aa, use a blackberry before, okay, if you're surfing the web on something like that, I'm given my age again, okay? But you, sir, find a device like that, and you're looking, and you're like, you either have to scroll for days. School opened down or looks like garbage, right? Well, what apple did, teo and I thought was really smart, was they took your page, which was not responsive. We didn't even know responsive was it wasn't even a thing yet. They took your page and they just scaled it down. Okay? They said, you know what? We're going to tell the browser and the server and everybody else we're gonna lie to him that we are let's, say, and I don't even know what the number was but let's say we were ten, twenty four by seven sixty eight, for instance, that we were that mid so he would grab the content, take it, shrink it down, and you would see this, how many of you? Seen sights like this you'll have read so you see a sight like this where it's just a minute sir version of the site and you're you're like pinch zooming for days and like going around and like you're like why are they doing this to me? So so but this was the first reaction or you know thing that we did to make it work if you will and like I said, I think it was a pretty cool idea because otherwise we would be we'd see like a big honkin logo they would take up most of the phone and you'd be swiping forever so that was fine that was great but as designers and as web developers we kind of realized that that's sucks because who wants to look at a website like that right? So you want to go to go when you want to make it a better experience? So we started started thinking about it and most of us stand on the shoulders of giants I know I do and people come before it kind of came up with this but responsive design kind of came out and this was after actually so we have responsive this is actually after a mobile version of a site so we for a long time we would actually create two versions of a site at least so most would depending on the budget you had you'd create the desktop or the everything version and then you create like the mobile version and that was pretty much it and the two would meet you have like two databases to set to code two different things etcetera one database and it'll be a hard time responsive came out and it said why don't we just do this? Why don't we just take the stuff we've got and make it so that it responds to the view port response the device and works and fitz naturally and we don't have to have fifteen cents a code and make it all crazy so that's the delysia coming the idea behind responsibilities that's my take on it and that's great today what we do a lot of times is we will either developer design mobile first or desktop first depending on her bed and if you've sure a lot of you've heard of that before desktop first design is what we did before and it's kind of reactionary it's just saying I care more about desktop and mobile is something that maybe my audience isn't really looking at my site for I look at analytics and it says not a lot of people are looking at it on mobile okay, so I want to focus on desktop and this might be a little more of an afterthought or we go with mobile first mobile first design is something that kind of came out and came into being because a lot of us realized that a lot of our core audience maybe for a site and this depends on obviously you know, the person you're working for etcetera and their audience we're actually using mobile devices toe look at that site so you figure if if if somebody really looked at your sight on a mobile device and not nearly as much looked at a desktop, you probably want to focus more on mobile because most people are doing that so mobile first it was kind of born out of that and that basically means we dealt with content we dealt with hierarchy, we dealt with structure of course, but navigation was a little bit secondary to that so content first a lot of times and then, you know, we develop mobile and well, of course, you know, go on and move on and we'd have what's called a lot of times progressive enhancement it essentially means that on mobile we've given experience, we'd show the content we do what we need to do to make it still the site because it's not it's, not just dumbed down version of the site and then you know when we get into tablets and we get into desktop, we would actually as we kind of work our way across devices here we would progressively enhance the content or the nature of the site so you down here mobile maybe you'd have like static imagery or a very simple slideshow for instance, you get into tablet and maybe even just desktop and that thing could go full blown you could have video content you could make it so there's actually separate content just have it be a bigger experience may be okay so that's progressive enhancement with a lot of this that's that's happening we basically decided okay, well responsive awesome we're going to take one set of content and let it respond and of course response to design and that means you know let's suppose I'm going to ask about first whatever I'll put an image out here and also okay there's a picture right there awesome when we first started doing response to design it came down to we figured out that we could take the image that the size we wanted put it in there and if we put something in there and we discussed this a little bit earlier something called max or maximum whip and we did max with of let's say like one hundred percent and I'm getting really small here and I'm sorry so we did like max with one hundred percent we would tell the browser the image can't get any larger than its original size but if you viewed this on a phone or some other device for instance if the area that it was inside of let's say column got smaller it would actually shrink it would get smaller and that's awesome when we first started doing this, we realized we're done whatever what else do we need? You know we're finished so let's just put the images in and let him respond and work a little magic here but it's it's actually we're not finished we're actually just getting started with responsive design response to design is a long way to go and it's none of it's all figured out yet but there's some things we've learned along the way and one of them is if we have an image let's suppose that I focused on desktop I'm like okay desktop is mikey I'm designing for that and I've got a header image and that header images yea big okay and this thing is like, you know, two hundred k insides which is a little crazy but that's pretty big okay two hundred k insides according to our our thinking here we're just going to say oh let's let it scale right we're done so I let it scale for tablet on tablet maybe it's you know yea big on phone it's yeah a big still looks the same everything's great what's the issue with that or at least on one issue with that well desktop a lot of us are going to be dealing with d s l faster speeds, you know, download speeds, things like that where's on the phones were dealing with with mobile networks a lot of times so we're dealing with maybe three g maybe for g we don't know it's etcetera but the point is you know this be the speed of this is a lot of times slower than the speed of that not always so if we have a two hundred k image here and we just decide to let it go it's going to download a two hundred a k image to the mobile device and just be a big so that's something that we really have to consider and think about it okay? So not only response of images in general just responding size wise but responding to the device and responding with maybe separate images for different devices or having the image itself on the fly being converted or somehow compressed toe work with different devices this is the rial nature of responsive design I mean it's really kind of getting down into this and determining our deciding well you know it is too much is a too big etcetera and download speed versus you know what we have available in dust op a lot of things to think about a lot so what I want to do is we're going toe back over here I'm gonna I'm gonna take a look at working with what are called response of images and that's something that you know involves this max with involves that but also involves being able to swap out images and work with images in a different way. All right, this is this is kind of a big deal so on my site here you're going to see that we have this this header boner right here and the header banner itself if you were to look at if I were to go to each image, let me let me write click and I could go to inspect element and this is of course as we've seen so far going open up developer tools and I actually pulled my developer tools you can kind of move them around if you want to I'm gonna put it back down there, you'll see that if I look in here and kind of scroll down a bit, this is actually a background image a lot of us are going to use background images for different content you'll see right here this is people banner three and the background, which itself is a certain size and a lot of times if I you know, go into code and hover over, I can kind of see what the background which sizes in here it's actually just showing me I guess what the original images if I were to click on that, which is kind of need sometimes didn't quite do it there, but a lot of times what I could do because actually take that, earl and open up and see how big this image really is. Sometimes this developer tools will tell you that probably just going to do this I'm actually copied out and I'm gonna go out to a new web page here, it's the same stuff we got you're going to see ban or three right there? Okay, now if I go out and take a look, you're going to see this is the idea behind a response of image just generically it's a larger image that's just scaling right? But if you take a look this image, if I go right up here to the title bar, I'm actually going to see that this image is twenty, six hundred by eight hundred, which is pretty big. All right? One of the things you need to think about today is does anyone know? And this is a question for the audience. Okay, um, anyone know what the default size or the most widely used size or you, um, size of display her size of monitor for desktop is across the world? It's not ten, twenty four, seven, sixty anymore it's like thirteen sixty by something I never remember it's big, so we're starting to see bigger images, but this is pretty crazy twenty six hundred so if I take this image right here and say cool we're good let's load it on desktop and mobile it's gonna it's gonna choke the mobile device or at least slow it down okay let me go back let me go back to the page itself so what can we do to help this several things we can get done here we can actually since this is a back on image we can use what I called media queries to change the image itself based on the size of the view port the size of the thing they're looking at essentially you know we could do that ourselves but one of the things that were going to run across is that this banner is actually a featured image which means that it's not hard coded into the code it's a background image and it's in the c s s and it's it's being added in the theme so we're doing it in the pages itself so I can't I don't know what people are going to put in there you know as far as the image my client might swap this out one day and it might be a different image name so so I can't go into the image content itself and make it css to match that toe work for myself so what we can do let me go out here and take a look here um you're going to see that let me switch over to my other content here that I have we have there is actually a plug in here which allows us to work with featured images and this is going to kind of show you the direction that a lot of people are using as faras like back on imagery to swap out images we are going to talk about the different methods for working with different types of images and the two big ones we're going to talk about our background images and just image is placed in the code because those are two different things basically one is css one is just in the html stuck in there the ones in the h e mail actually relatively easy I'm not going to see easy they're easier to get to be responsive and to swap up this plug in let me just describe what this thing does if you look at it you're going to see this somebody who likes star wars obviously the idea behind it is it's going to take images and it's going to go in and it's going toe add or place different images depending on the different sides of device this plug in is actually gonna go in and let you create these images it's going to do it for you basically and it's going to let you just put the plug it in there it's going to decide based on the device size which image it should use so it's actually going to swap out the background images so if it's on a mobile device it's going to take us much smaller image and download that instead of the large image for desktop, for instance, so with this place and if I take a look, you'll see that one of the things that's interesting about this plug in is it it's not on its not on wordpress dot or so it's not available via the plug ins directory, so you're going to find it sometimes this happens, all right? They just they decide not to put it up there from various reasons. Maybe it's no longer supported maybe doesn't work anymore? I don't know, but this one actually this one does work and he goes through and talks about how it all works, how it all happens. You could just take the code directly and just kind of work with it there. But I wanted to point this out and show you guys this because this is this is important. You're going to see this right here, media screen and right there essentially, the way this is working as it's setting up your thumbnail there these images that you've got and it's saying, ok, we're going to capture them, we're going to figure out what they are, and then, depending on whatever device it is, we're going to send it a different image if you look right here, these media screen and you've got something called max with you've got men with these air media queries and if you're familiar with css and you're familiar with media queries that's great if you're not in css this is how a lot of times we just we basically build our sites this is how we do it these days we actually have ah max with and I'm in with we have these different queries that say if you're a certain size device or if you're within a size of let's say like tablet or desktop, for instance and we give it a number usually I want you to use this styling or this style sheet so we can kind of pointed to different styling and what's really great about this is that if you have, like let's say my desktop here and I say for media query or media screen this goes into the css, by the way and I say men with, uh, twelve hundred pixels or something like that that would be this device because that screen is going to be bigger than twelve hundred pixels. So what this browser does on my device it's gonna look over here and say, okay, I fit that description now this is you guys don't worry about this stuff it's getting tricky and kind of pulling in your images don't worry about it but it's saying, if you match this criteria, I want you to use this styling instead this is what immediate careers all about so it's going in and saying if you meet the criteria used the styling down here it's going to take this hero image and it's gonna actually put it in there for you automatically it's a school and it's going to swap out the image and put something called men hide on there so it's going to say as the image okay as the image actually scales or we put different images in there, we don't want the banner to be the same height or these featured image to be saying height, they're going to change size, right it's going to get shorter and taller so it's accounting for that by using what's called a min height so this plug in is is pretty cool and it's something that I have hand coated myself kind of worked on, but I found the plug and I'm like is pretty need so what we can actually do if you keep going to go down, I'm gonna get rid of all this stuff and go down there's a lot of comments and things like that you're going to see right here we can download the plug in, so this is where you guys go to download it so once you download it, we can then activated, we can put it into our our wordpress install and start to work with it. Now I've downloaded that. I want to make sure that I've actually got it down here just so I don't. I'm not lying if there it is right there. It's called rest image master dat's it now once you download that thing is a zip file. I'll go over and I'm gonna take a look at my site. Here, let me get back and you'll see that I'll get back to my plug ins directory. So go to plug ins down over here, and what I want to do is I'm gonna install that one. So if I come in here going to see plug ins, add new, certain types of plug ins we can if we want to. We could just upload directly if we have the files themselves, so I will click on upload, plug in and you'll see it's going to say, choose file. Now this is a zip file, which you've got, and typically is that file's coming from the plug in author. So click on, choose, file and go out to my desktop and find that thing wherever it happens to be in plug ins, there we go and open that up. There were no install it I'll click on install it's gonna go through the process of unpacking it, doing all that stuff I can now start to activate this so I'm gonna click on activate to look at it and see what it does and you'll see it's it's there now if I school down a little bit and you'll see that we will find it there it is rest image responsive image solution using using a picture phil there we go so essentially what's going on here is we're going to go through now and it's going to kind of try and figure out what we've got is gonna look at all of our imagery and find where we have that located and if you guys do this watch, I'm going to go back up to one of my pages here and just take a look if you ever use what's called a featured image this could be in a page or a post featured image is something is built into a theme and a lot of us used isn't themes let me go to my homepage and I'll school down and you go look over here on the right you're going to see what's called header backhander header boner background image I actually just changed the name of that because this is what's called a featured image if you look right there it says featured image featured image a lot of people using themes for blog's, for sites, whatever you're working on because you can load them here and in automatically puts them on the page in the header or wherever they happen to seven theme this plug in works with these works with thes featured images. Okay, so once I put the image of their now, I've already loaded them. That's the thing okay, what's gotta happen though here is we need to actually have multiple sizes of these images. I only uploaded one really big one. If I go out, let me let me do this. I'm gonna go out to my page and refresh and take a look. I'm gonna go and right click you're going to see we can inspect again. This is once again going into our inspect and take a look at the image. Let me click on that click on the image there. There we go you're going to see it it's really not doing anything? If I scroll down, let me find the background image we're going to see right there it's just still saying let's, go to people banner three let's just do that if I go smaller. The idea behind this plug in is when I get to a certain size it's going to swap out the back on image with a smaller one okay, that's awesome because in a smaller device it'll use a smaller image file if I look at what I've got and take a look, you're going to see wherever I happen to have that back can't really find it it's still using the same one the reason why is because those images air not built those have to be created okay, so that's what? We're going to go d'oh let me go make a little bigger I'll go back over the plug in page here and you're going to see that if I go to settings over here and take a look, I believe it's under settings there we go you're going to see responsive image of rasp image click on that and what we can do now is we can go in and we can set these image sizes if we want to it's going to do this for this is actually really cool it's going to go and take a little bit of php and put it into our pages okay and tell it text you generate these images for us if we regenerate our thumbnails it's called so it's going to make images roughly this size so it's going to take each header that defines the team into the fines and make three versions of it essentially and then it's just going to use its magic to swap them out as soon as we get smaller this is we don't do a lot for this. This is actually pretty pretty amazing you're going to see over here that it's gonna also lie to set some different sizing is this is more advanced, we don't need to go there, you'll see that it's going to load what's called picture filled that j s this is something that a lot of us are starting to use these days and you may have heard of it before picture phil is away, I guess it's kind of a hope for the future way all want tohave everybody forever in a daze wanted to have some kind of image tag that you could just say on a phone used this image instead on a tablet use this image instead, but we're not there they're still trying to figure it out a lot of us. This is why we're using plug ins and scripts and stuff to get this work toe work. Okay, so this is using something called picture phil, which is really cool you're going to see that these are all the image sizes it's going to generates also going to generate what's called at two images and these air actually images you can use for retina displays okay, kind of cool it's gonna be it's gonna try make some of those two so here's what we need to do you can see it's it's got these in here if I go back over let me go back over now to the media I'm going to take a look media and go look at my library you're going to see that we actually have ball cap actions we can work on here now for every image we've already uploaded it's too late okay, what we need to dio is you either need to re upload the image and as soon as you re upload another image afterward press to use in your sight it's going to make all those sizes for you or we can use a plug in called regenerate thumbnails this is a really good one we're going to use for a lot of different things regenerate that was a matter of fact if I were to go to that site and take a look, I think they actually have it in there. Okay remember to regenerate your thumbnails this's actually that plug in page I was telling you okay, otherwise you're going to scratch your head and be like, why isn't it working? So what I'll do is I'll go back to my page we are going to and you can do this a couple ways but there's a nisi plugging for it once again I'm gonna go to plug ins I'm gonna add a new one and I don't think I actually have it in here I just wanna make sure I don't don't have it in there now I don't okay, I'm gonna go to add new and we're gonna do is we're going to do something like um thumbnail generate we'll see if we can find something like that. I'm nail my name's spelling this right thumbnail generator something like that and you're going to see like video in bed and thumbnail magic post document galli there's tons of ways and I actually have kind of one that I use a lot it's called regenerate thumbnails you'll find the link in the pdf file that that you've got so I'll say, like regenerate thumbnails its contract, you guys you're like it's like going out to google and finding the search the perfect search terms you really got to be pretty good at it, so I'm going to regenerate the males there we go check this out if you think that you're alone in doing this, but you know how many downloads there are for this one it's almost one point six million downloads so so many install now you're going to find you going to use this plug in in different cases. This is not the only time you're going to use is this okay? And if you ever need to use it, the plug into needs it will tell you to do this how many install it and you will see though this one is actually not been updated so um hoping it's gonna work should I've used it recently so so I'm going to activate it got in there all right now if I look in here you going to see regenerate the males now the way we do this typically is we can go back to that media area the media tab until it to regenerate the thumbnails so I'll go back to media and you're going to see now it really doesn't look any different kind of always freaked me out when I saw this but now if I goto bulk actions under here you're going to see regenerate thumbnails that's what that plug in is doing okay I'm going to choose regenerate thumbnails and we'll play it but first of all what I'm gonna do is going to make sure you pick all of those featured images all those thumb the larger images that we loaded that you could kind of shotgun it and you could regenerate bye bye regenerating for everything it will just make a bunch of extra images that you may not use so you've got to kind of you know pick and choose like I don't want the fabric on I mean we don't need that the banners yes I dont we do not need to do like logos and spg and all that kind of stuff we don't need that jim yeah sure we'll do him that's good and what I'll do is are going here say bulk actions regenerate thumbnails apply the thumb nea r the plug is going to start the work now it's going to go look at the pictures you have and based on those settings in the plugging how big they were we said it did it by default it's gonna start to remake all the images and it's going to make them smaller now that the key here you guys is that it's going to take a larger image and make it smaller if you have an image that's like yea big and you say regenerate the thumbnails it's going to try to make it bigger and I'm sure a lot of us that work in photo shop and other programs no that that could be bad okay that's why we tend to work with larger images you want to make sure that it didn't fail two if you look in here you'll see it says and there were zero failures if there were failures, maybe it couldn't grab some of that moment the internet went down I don't know you could click on click here and just kind of re tried again so okay so it went in and said ok, people banner were all created all created let me show you what it did this is hopefully is going to make a little more sense I'm gonna go back over now you don't have to do this, but I'm gonna go back over to my files. This is my these are my theme files, the ones that are live on the web and you're going to see that your images are actually not kept in the theme file that we upload through the media upload er they're kept in our uploads folder so if I come back over here, you're going to see there's the themes folder there's the plug ins folder and we have the uploads folder if I go in there and take a look, you'll see now take this up. It's actually has generated a siri's of images that have a whole bunch of sizes on him, so you're going to see, like, don't abandon we have nine hundred ten, sixty, twelve hundred thirteen, seventy all of these and your theme can actually also if you guys do that regenerating your theme can have built in sizes too, so it may generate more than you expect. That's what this did I'm not expecting all these images, but it did it so that's, what regenerates going to do? So it's just gonna take your original image size and start to kind of do its thing, okay, all right, now what I'm gonna do is go back over, we've regenerated the thumbnails I'm gonna go back to the page itself. I'm going to do a nice refresh here and just take a look real quick. And we're going to see that if I look at the image itself it's still doing the people banner out there you can see it's going to swap it on me. If I do this picture, phil things, let me do this something back it out. I'm a refresh your oh, quick. And if I go back over to the admin, let me just take a look at one thing. I want to show you something here. I'm gonna go back over to the settings and go to the response of image here. This was these settings for that day. So we got the images created. We got the plug in setting here. These are all the images that it generated. We want to make sure that we actually set up what's going on here to make sure that it's gonna work properly. Okay. If you look in here, you get to see youse full, full size image as fall back. This could be a good thing, because if it chokes on a smaller image some smaller image earl does not working, something happened, you deleted it. Something like that it can actually break and not even show up that's one of the bombers about this okay so you can tell it to use a full size image you'll also see what's called native implementations uh right here and this is going to say that in the future someday we're gonna have maybe an image tag or picture tag where we can tell it to use different images for each device or source we're not there s so don't don't check that by the way we're just gonna leave it hey synchronous bloating for picture feels good as the loads it should be working okay I loaded this in a project file that I was working on a couple months back and I was so excited I was like this is gonna this is gonna kill it tons of featured images were done but there was a problem it wasn't working okay so you're going to find it as I go out like I said before I refresh I take a look at the image I go into my my inspector and look and it's just not doing it okay, so I go oh look it's the same image what's going on why is it it should be changing out images so I started to do a little searching and I the real you guys the reason why I'm actually showing in this is because this is an awesome plug in but it's also going to kind of teach us a little bit of something about plug ins. You gotta do your homework on them too. Okay, I got this and I was like, this is awesome. This is gonna be cool. I then went back to the plugin paige when it wasn't working and I started looking around. I'm like what's going on here. Thanks for posting blah, blah, blah. All this stuff. I started looking at the comments and a little further down, I saw something that said, dude, your code doesn't work there's something wrong with it and here's how to fix it so I this is the stuff you gotta watch out for, okay? If you're if you're trying to base things on plug ins is what you're gonna face. All right, if you decide to go alone kind of do this yourself if you guys want to put all this in your page yourself that's awesome. But because you're copying code from the web doesn't mean it's gonna work. That's one of the big things you're going to, you're going to kind of come, teo. So let me just show you what the deal is here. If I go to the plug ins here and there's, all my plug is listed okay, now this was actually looking at the comments trying to figure out what's going on if I come down here going to see what's called plugging editor we talked about this in a previous class but this is where we can go in and we can select the plug ins that we have installed are active and we just kind of start to take a look at him and you can even see all the files associated with that plug in you can add it the plug in now I'm not saying to do that okay? I'm actually saying please don't in most cases because if you make a mistake it can crash everything also the next time they update the plug in it's gonna wipe out your changes okay, we kind of went through that and I want to reiterate it but if you look here you're going to see that we have that responsive featured image is that's the one we want to look at so I go to responsive feature james isn't selected you're going to see that it really is simple there's only one okay one php file in here if I scroll down and you're going to see that this is the issue right here, check this out this is actually the same issue that I ran across in the last section of our class where I couldn't get the generic icon sort of generic cons to work there's a function here named this thing kind of a long winded function name and then add action this happens more than you'd expect so here's the function name right here if you look at the two they're not the same. Okay, so if we make these to the same I'm gonna this copy paste right here we should get this to work bye then go out hopefully all my images air set I'll update the file make sure they're set I'm gonna go back and just regenerate my images one more time really quick to make sure ok just regenerate the thumbnails make sure it does it I've got all the right sizes once you guys make that change and make sure that the function is the right call it's going to allow us to do this okay let me give it a second here is gonna kind of do it staying on this thing I'll save it I'll go out and take a look you guys could see it's it's kind of doing all of them hopefully sometimes it'll actually crashing a few of them which is fine but you can always like I said go back and fix those two failures that's fine I could say which ones were failures failed to resize okay they were logo's that's fine, I don't need that so let me go back out and take a look I'm gonna refresh here and if you watch check this out can you guys see the flashing there okay but you're not going to really see that on devices because you're not going to take your iphone size and start changing the size of it right so watch what happens here when I go to inspect this I'm gonna click on a suspect look what it is in the css right here you're going to see that it generated these images and it actually stuck on the end the size of the image so those air now in my folder so if I go over and dragged bigger or smaller well may actually you can see bigger right there once you get to a certain size is going to swap images so that's actually pretty amazing so if I go a little bit smaller let me zoom out here a little small you see eight hundred by and they're going to be five seventy by so this is pretty cool it's just doing the response of thing that we would really want to do ourselves and having it work okay so let me let me back out of there so you guys when you go in and you regenerate the thumbnails and you get that plug it installed you should be all set us faras setting up your background images these air the actual feature name it just like I said before and this is this is one way to do it okay. Using that s p plug in is one way to get it done. And there are some other settings weaken set on that one. If I go to settings, I should be able to see. All right doesn't actually have him in there. That's fine. It's a pretty simple plugging it's. Got one one php file. As you can see. Now, as far as working with responsive images. That's actually a great way to go. That's an awesome thing. You could do another way that you can do this or another way that you can work with it is that plug in that I actually loaded just a few minutes ago by default or by accident. Rather, there was actually a plugin called rest image. Okay, these air responsive images and this is a plug in you can use as well to do kind of the same thing. But this recipe image actually doesn't work. And you saw that. Doesn't work with back on images. It works for the images in the html. So it's a little different there that one with the, uh, responsive featured images works with the background images. Okay for the featured image. And the rest was actually works for just regular images. The process we're going to go through is gonna be very similar for any kind of responsive plugging you use it's going to go through a delighted to activate the plug and, after, install it to go through and usually set up some settings. Regenerate your thumbnails. And usually, you're done that's a lot of times, the way it works.