It is important that your web page loads as quickly as possible for visitors. Page load time is also a ranking factor Google uses to prioritise faster-loading websites, so it is important to have your images be as small as possible.
This is the top area I see needed when trying to optimise a page for Google PageSpeed Insights.
Please see the video and complete transcript below.
Use the free Photopea software found at https://www.photopea.com/.
Talk to your web designer to get the size of the images. In particular, find the maximum width needed. This may be anywhere from 700 to 1,200 pixels wide. Adjust the size as needed then save and get it well under 100 KB as shown in the video.
Also see this video on YouTube:
Video Transcript
0:11 Hello. In this video, I’m going to be showing you how to optimize your images for your website. Now, this is very important because you want your website to load as quickly as possible for people you’ve only got five seconds when they first come to your site to really get across certain points.
0:28 And if they’re waiting on images to download, that’s not a good thing. It’s also important for your rankings on Google for your site to come up higher in the rankings because Google uses page speed as a ranking factor.
0:42 So anyway, let’s get started. Now, one of the tools that I think is probably one of the best out there is photopia, photopia.com or photopia.com.
0:55 I like it because a it’s free. B you don’t need an account. It’s all you can just go to it and start using it, which is really handy.
1:04 So the first thing or the main thing you need to know is how wide and pixels does that image need to be.
1:12 Now, you can get this from your web developer. They should be able to give you a spec to say, okay, for your blog post, your images should be a max width of this width for page backgrounds.
1:22 It should be this far in width or for image placement on page in certain positions. It should be this width.
1:32 Now, once you get that, you can go to photopia and get going. So as an example, I’m going to show you this image.
1:40 We’re going to start with. I have a nice image of a cat and it’s a lovely image that I say want to put on my site.
1:46 But the problem is, this image is 2.33 megabytes. So when I load this up 2.33 megabytes, that is a large image.
1:58 So I need to reduce that down. So what we’re going to do, if I go over to photopia, the nice thing is you can just drag this image right on your screen and it will load the image.
2:10 Boom, there it is. Now, what I’ll do, I want to, again, reduce the image with. It’s going to be a huge image with.
2:22 So you go under image, image size. You can see the width here is 3,602 pixels. So I’m going to reduce that down to, I know I need for this, say I want to use it in a blog post.
2:35 Maybe I’ll use it in this one. 700 pixels wide. So I’ll change that to 700 pixels wide. Usually it’s with that you’re worried about this.
2:47 You might even have certain dimensions. You need the image in which you can also use to crop and resize images, but I’m only going to show you image size in this video.
2:58 So I’ll hit OK. Now my image is resized. If you want to see what that looks like in actual size, you can go under view and then pixel to pixel.
3:11 And that’s what my image size would look like on this image. So I’m going to show you how to see what the image is.
3:14 So I’m going to see what the image is. Now I need to save my image. So I’m going to go to file export as in this case a JPEG because it’s a photograph.
3:23 If it is line art, I might want to use a GIF. And if it’s a line art, a graphic with a preserved transparent background, I want to use a PNG.
3:33 There’s more types of file types that you can select from web. P is a popular new one. But in this case, I’m just going to use japing because I know that’s going to be small enough size.
3:50 So you can see now I can see a rendering of what the image would look like. And I can adjust my quality to adjust the file size.
3:58 So I’ve got quality slider here. And I’ve got my file size here 36.4 kilobytes. You want to try to get your file size under 100 kilobytes.
4:06 I’m already well under that at 80% is usually a good setting. But what you can do is see how your image looks like what it looks like at 100%.
4:16 And you can see it’s up to 296 kilobytes. Way too big. I want an under 100 at least. But if I reduce it down to 7%.
4:24 You can see the quality of the image starts to go. So keep upping the quality until you get the image quality that you are happy with.
4:35 And in this case, I think 80%, 79%. That’s fine. And that’s a very small image size. 35.3 kilobytes compared to the 2.53 megabytes that we had before.
4:47 And just click save. This will save the jpeg onto your computer, which you can then upload to your website. That’s all for now.
4:54 Hope you enjoyed this. Please let me know if you have any questions.
