 Hi, this is Jeffrey with Lightbox and today we're going to go over optimizing images and getting them ready for your website Main reason why you want to optimize the image is for speed The smaller the image size is the faster the web page is going to load And if you add images are way too large It's really going to have a negative impact on your website It's going to slow and viewers are going to start to bounce off before the web page could even load All right, so let's go ahead and start for this tutorial We're going to be optimizing the images and Photoshop and don't worry. It's going to be super easy It's going to be fast. It's not going to be technical If you do not know Photoshop or know really how to use it you still can do this because we're not going to Get deep into it in the technical aspect. So let's go ahead and start right here We'll go ahead and just choose an image here from unsplash We'll choose an image that will be a large size banner such as this banner that we see back here So let's go ahead and pick a random image that will look good For a background. All right, let's go ahead and choose this one right here Okay, so on downloading let's take a look at it So we can see this image right here is 6.9 megabytes almost 7 megabytes and that is massive and just to give context On the size of this image your web page should be under 1.2 megabytes for the entire web page That means all images all code scripts everything the website has it should be smaller than 1.5 So this already far out exceeds what you should put on your website. So let's go ahead and optimize it So I'm going to drop this over to our Photoshop right here, let it load Okay, and here we got our Photoshop you see all these tools here on the left You see all these settings up here on top all this here on the right. We're not going to touch any of it We're going to make this as simple as possible Okay, and what we want to do is you press shift option command and save at the same time Now this takes you over to save for web So you got to save for web portal right here and you can see the size of it right here is almost 8 megabytes And so let's go ahead and optimize it first You want to do right here is make sure it's the right file format. You got GIF JPEG PNG we want to stay with the JPEG just about all your images that you put on your website are going to be JPEG GIF is only if you're going to add short videos and PNG is only for rare cases where you use cutouts and you want to cut out the background to something So everything basically is going to be JPEG also JPEG could be compressed more as way more web friendly Okay, so now we got it on JPEG. Make sure that is set a set on progressive Right here. You see the quality now. This is the compression and this is where we reduce the size of it thing is You don't need a hundred percent Because that's more for like prints. That's something for you know something for way larger not for a website a website It's not really going to be able to tell the difference between a hundred percent and 90 percent What I like to do is stick around the 80 percent mark, you know our our Our goal is to make the size smaller, but we still want to keep the quality of the image We don't want to look in fuzzy. We don't want to look in pixelated. So I find 80 percent compression is a good number for me and I get good results with it So you want to make sure this is clicked off and you also want to make sure that this data the Metadata right here is also set to none by default all the images have metadata in it And what the metadata is let me pull up the image right here. We'll click on get info and You can see right here where it shows all this information on the image now This is the metadata. We don't need it for the website. This also adds size to your image. So by keeping that out We can make the image even smaller Alright, so now let's go ahead and resize the image. This image is 7,680 pixels. That's huge Most laptops most desktops are going to be around 1,300 to 1,500 pixels 1,200 pixels So no need to have something this big because no screen is that big I like to use around 1,200 pixels. I Use 1,200 pixels sometimes 1,400 depending on the project and how high the quality the image needs to be but I find 1,200 is a sweet spot for me for the large banner images If you're going to use a smaller image That's more of a thumbnail then I would make it even smaller, but the large banners 1,200 works pretty well for me So I'll go ahead and add 1,200 there Hit enter and you can see we reduce it all the way to 432k that's less than half a megabyte That's a big difference From what we had and also the quality of the image is going to stay the same This is still kind of big though for me. I Like to keep my images under 200 so I'm going to reduce the quality a little bit I'm going to take it down to 70 see what happens. All right. It's still kind of big That must be because this image has a lot of different colors and Details in it. All right. So this is what I'm going to do. I'm going to bring it up to 75 We got it under 400k. It's still on the large size side But it's not terrible not as long as you don't have many images. It's large on the website I think this is good right here. We have everything checked off go ahead and click save and That's it Go ahead and save it and there's our image for web You can see it still has a quality inside of it It is now the right size for a website and it's going to look a whole lot faster Than the eight megabytes that originally was well. I hope this helps out We're used Photoshop for this one. I use a few different tools I'm going to release a couple more videos on the other tools that we use in case if you use something different from Photoshop Such as affinity and that is it your image is now ready to load on your website via WordPress or whatever platform You're using I hope this video helps out if you have any questions Please throw them aside the comments and if you find this useful Go ahead and subscribe and go ahead and press a like we're a new channel just getting started I usually make a lot of these videos for our clients and for teams that I work with And I figured that I want to start Sharing and sharing to others and go ahead and spreading it out because this is how I learned I found videos and just clear Instructional tutorials super helpful inside my development. I want to go ahead and start doing the same and give them back So yeah, please subscribe like if you have any suggestions drop them in the comments and thanks you