Video Summary

In this section we’re going to talk about image sizing. I’m going to have a whole lesson dedicated to how we can manipulate images and work with images that we have. So they look good on our website. But I want to go over just kind of the basics of just image sizing in general. So when you’re when you’re sizing images on your site, whether the image is being used as HTML element or the background of an element, the size of your image matters. So if you want to have a clear resolution of your image, your image size needs to be large enough to cover the whole section. That you want your image to reside in. And here’s the thing is, is that you can shrink an image as much as you want without losing resolution, but you can only make your image as grow as big as its original file size before it gets distorted. Alright, so my recommendation if you’re looking for an image to set up as a background for your website is around 920 pixels wide. Now, that means that the width of your picture is 109 or 1920 pixels, that is the average size of the largest desktop or screen size that we have. I’ve used 1924 for multiple webs, web images that need across the whole page and haven’t lost distortion. We’re talking about like the resolution and the clarity of it. Now, I know if you have professional photos taken and you’re using like a really high resolution digital camera that you might get pictures that are like 2000 8000 pixels wide and you’re thinking well, well, if I can make my 8000 pixel wide image smaller, why not just use that? Well, here’s the reason is that those large images take up a large file size. And when we’re talking about page loading speed, if you had dozens of images that were you have high, like high file size, so it takes up a lot of memory. And it takes up a lot of juice to actually upload those. It’s really going to slow down your speed of your website. And Google and search engines have been penalizing people who have really long load speeds. And again, that’s the word to get that we’re getting to down the road. But if you’re playing around with this or you’re coming back to revisit this section, just know that 1920 pixel width will look good pretty much on all devices. 

So for that being said, I want to show you an example of one of my photo editors. So right now I just have from a previous client, I have a Cisco logo, and if you come down here it’s like 1024 pixels wide by 540 pixels. Top so if I go and resize this, okay, um, let’s just take this and we’re gonna make this 300 pixels wide, and I’m gonna click Apply. Alright, so we just made it smaller the resolution is there. And like just for this example if we take this and we make this a 50 fix, the pixels aren’t and it’s super small. So now I’m going to save this photo which I save him. 

And now what I’m going to do is I’m going to resize it. I’m going to make this say student 1820 And let’s apply. Alright, so now I just took that image, I tried to make it larger, it became distorted. All right, like it doesn’t look like the original even if I backtrack, right? And if we go backwards with the that’s how growing you know, you can take an image that’s large, and you can resize it down, resize it down, it still holds its resolution because even if it’s small, I can still open that up a little bit and actually see it but now if we take that image that was saved and we make it large, all sudden it is very distorted. So think about that when you’re choosing your pictures and again, I’m gonna have a whole section dedicated to dedicated to how the best practices for image picking images, how you can crop and resize and make sure that’s going to fit in all these different sections of your website. but just keep that in mind when we’re going through these examples that if you’re seeing this distortion or you’re playing with some stuff, That’s the reason why things are getting distorted is because the original file size is too small. so say for instance, if this picture got exploited to cover the whole page. It wouldn’t look as crisp as it does right in here. So, with that being said let’s hop over and let’s talk about how we can manipulate the background images.