Optimize Images & Photos for a Faster WordPress Website

1. Introduction: Folks says are important on every website for the problem is if you upload a photo that's a very big file size, that will slow down your website. That's bad for everybody visiting, but it's also bad for your SEO score, your Google search score. So how do we keep the file size small, but keep the image quality high? I'll show you right here. Hello, I'm John Wolfgang nella. I've been a professional designer now for 20 years, and I've worked for some big clients such as Fox TV here in Australia. The three important rules for every photo you upload a file size, ratio and filename. Now, in this class, I will show you how to get all three perfect using Photoshop or using the pre-installed photo program on your laptop. Okay, let's get started. 2. Website Speed/Ideal Image Size: Images are very important for every single website. You want them to look awesome so that your site looks awesome. The problem is if you upload them incorrectly, it can massively slow down your website. Here we are in one of the speed test websites, GT metrics. So come in here and type in your URL. This is not a good score. There are many things that can slow down your websites. Some of them do need a bit more technical assistance, but we're just going to look at images. So on this page, if we come over here to structure, we can see a few problems around image size. This first one down here, properly size images. If I click on this one, this is telling me every single image that is potentially too big on my website over here, or tell you the size of the image and overhead, it tells you the size it should be to speed up your website. And one more thing to look at here. Here where it says Serve images in next-gen formats. This is because we are using a JPEG image on our website, but we could be using one of these or WebP Image. I will talk about that one later on in this class. But first of all, let's just take a look at image sizes and look at how we can improve that. Every image that you upload to a website sits inside a container. And that container has a certain size. It has a pixel width and a pixel height. These ones at the top are quite small, meaning that the image that I've uploaded is probably too big for the container. How do you find out the size it should be? Well, that's very simple. Just right-click on any image and go to Inspect. And when this window pops up, click over here, and then hover over the item that you want to check. The numbers below that we're showing you the size of the image should be. Chances are I have made this one too big for that spot. So let's open our images and start resizing them. 3. Image Editing - Photoshop & More: We are now in Photoshop. Every image that you upload must follow three rules. Number 1 is ratio. That is important to keep every image size consistent on your website. That means things line up correctly and it makes your website look nice and clean. Number two is the file size. We want the image quality to be high, but we want it to be as small as possible because then our website is faster. And number three is the final name. As you can see at the moment, these two images just have a random number at the end of them, that's not going to help anybody searching on Google. If you add keywords to your filename, that will help your Google search score. Let's start with this smaller one. When we looked at the website, we can see what the ideal ratio for this one was. It was 360 pixels wide and 240 pixels high. So that is a ratio is three by two. To change the ratio on any image just hover over here and click on the crop tool. As you can see up here, that is already set to four by three. But I want to change that to three by two. To stay consistent across the entire website. I make all landscape images three by two ratio. So in this little window that hovers up where you can move the image around in the background to get a better crop and double-click. There we go. Now the image has a three by two ratio. Now I will export this one and have a look at the file size and the filename. So go up here to File and go to Export. And Export As. In the pop-up window, you will see that the format is already a JPEG. If you have something that needs a clear background, make that PNG. But for a normal square image, Let's keep that as JPEG. Down here you will see what the image size already is. The width is 910 pixels and the height is 607. We want this to be 360 by 240. So let's just change the height to 240. When I do that, it automatically changes the width as well. It's changed a single pixel in here. Don't worry about that. That's not going to make a big difference. It's still the correct ratio. Now the next thing to look at is over here on the left, this number here, this is the file size that is 840 kilobytes. That's not too big, but it can go much smaller. Over here you will see the quality it is at 100%. In the drop-down, play around with this little button and drop down the quality. Here, I've dropped it down to 49 percent. And you can see that as a much smaller file size. Is that high enough quality? Will click down here and you can zoom into the image to see what it looks like. That looks okay to me. But if I want to make it slightly stronger, That's just up in a little bit. Okay, and at this size is now coming in at 34 kilobytes. So try and keep every image that you upload a lower a 100 kilobytes. This one's 34, so that's fine. Let's click Export. And in this pop-up, this is where you can change the file name. As you can see at the top, it still has the original filename. But I want this to include words that people may be searching for in Google so that my image shows up. So I'm going to call it this. And then save. If you do not have Photoshop, just use the pre-installed photo editor on your laptop. I use a Mac, so I'm just using Apple photos in here. I'm just going to choose the image I want to edit. And in this window hover up to the top and choose Edit. You got many options in here, but let's choose crop. We still want this to be a three by two ratio, and we have all of these options over here on the right side. Let's choose three by two. And click Done. And then hover up here to File Export and Export one photo. You can change photo kind and we want that to be JPEG. Quality. Play around with this, see what works for you. I'm going to choose medium here just to see what the quality is. Now my width, I want that to be 360 pixels. And down here it says filename, choose this one and type in what you would like it to be caught. And export. Now find the folder. And you will see it has taken the name that we've given it, but it's put this dash and a one at the end. So just delete that. As you can see the file size here. Well, they're quite similar, but just try and get it as low as possible and just play around with the quality you will see what works best for you and the type of website that you are running. Now these images are ready. Let's upload them all to WordPress. 4. Extra Optimization - WebP Images: This is a service called short pixel. What this does is it compresses all of your images to an IV or smaller size. If you want to give it a quick free test, just come here and type in your website URL. And if I use this service to compress my images further, and we'll even make the website run 44% faster if you just have a very small website, well, click here, View Details. This will tell you which images have been resized. You can just download the smaller version and upload that. But if you have a big website with a lot of images, you're going to need to install the plug-in and short pixel have two plugins. One compresses the size of the jpegs that you have uploaded. And number two, that is one that helps you create the webpage, a version of your images. That's web only images. So therefore they are even smaller and make your site run even faster. So let's have a look at that. Come into your WordPress dashboard and go to Add Plugins, type in short pixel. And you will see these two at the top. One is the image Optimizer that makes your jpegs as small as possible. And this one is adaptive images that turns every image into the webpage version. So let's install them both. And then just go through the whole setup process. They have a free version that allows you to resize up to a 100 images for free. Or they do have some paid versions. If you have a much bigger website with thousands of images. Just check the About section here. If I have any offers from this company, I'll include some links in there. When you have it all set up, go to the image optimizer, plug-in, fill in all the details, and then click here on Save. And here you can see that it will optimize one hundred, two hundred and thirty eight of my images. That's because I have quite a large website here, but just click this. When that is finished, come over here to Settings and choose the one that is short pixel AI process that you go through. We'll make sure that your website is suitable for this change to WebP images. You can run a few tests or you can set it all up and just see if it is working and if it's not taped down the plugin. When you come to this page over here, it says Web PIE Support. Just make sure they are all texts and that will change every single image, uploaded your website into a webpage version. Then come into your website and click on the short pixel icon at the top. And you will see CDN come up on the top of some images. Click on that. And then you will see what the service has done. It has optimized and scaled image from a 1000 pixels to 334. That's the right size that it needs to be. As you can see, that has reduced the size and 32 KV to 5.9 KB. So that's much smaller. Now when you look at this, you might go, actually that is not the quality of the image that I want. Then you have a bunch of options here to exclude an image like this. If you just click Exclude this image URL, that means that image will not be included in this optimization. But that looks fine to me. So let's keep going with that. And if we scroll down here, click on the other images. You will see that every image down here has been resized. So therefore you should have a much faster website. So then we come back to duty metrics and we retest the speed of the site. And you can see that is all now running a lot faster. And that's just because a lot less space is now taken up by images on our site. And if we go back to the site, while the quality looks just as high as it was before, nothing has changed. And we have a much faster website. And all websites are setup a different way. And it may be a case of using both plug-ins here doesn't work on your website if that is the case, Here's what I recommend. Deletes the i1 and go to the regular short pixel. Then come to this page, too advanced, and under where it says next-generation images, click this box. Then the one below that says deliver that next generation versions in the front end. And you'll have a couple of options here. Destroy all of these to see which one is going to work on your website and get you the best results. Give it a try. You scroll down here and save it, and then you'll have the perfect working fast website. 5. Thank You: Thank you for watching this whole class. If you have any questions about the photo upload, host them here below in the discussion section. Also, while you're there, make sure you click on my name and check out my Skillshare profile. In here you will see all of my classes about building a website. There was one perfect for beginners about using the Elementor page builder and another one about building your own online portfolio. But both of these, you don't need to know a single bit of coding. It's all about creative design. Also, make sure you follow me and you'll get notifications every time I upload a brand new class. Okay, That's everything. Have a great day.