.
Have you ever wondered how to optimize images for WordPress?
Or have you heard someone say that it’s important to do that?
Well, they are right – it’s extremely important to optimize images for WordPress – and all other website.
Hi, this is Teena Hughes from TeenaHughesOnline.com.
In this tutorial, I’d like to show you the two things which must happen to every image before it’s uploaded to your website.
- (1) We need to resize the dimensions
- and (2) we need to reduce the weight to make it Internet-ready.
When you first download photos from your phone for example, they’re really a huge weight and a huge size. So having said that, let’s take some steps to fix this. We’re going to take three steps:
- We’re going to find and or download an image.
- The second step is we’re going to upload, resize, and change the weight of the image, and then
- the third step is we’re going to download it.
Now I’m on a Mac, so the screen might look different to yours, but you know they’re very similar. They do the same thing. First thing we’re going to do is head over to a browser and on Pixabay I’m going to find a photo and download it for this tutorial. Now if you have a photo on your computer, you don’t need to go to Pixabay, you can just use that photo that’s on your computer. Now because everyone loves cats — and I know there are dog lovers out there so don’t get upset — but for this tutorial I’m going to look at cats, so let’s do this. I do a search for cats. I’m on Pixabay, now I have logged in to Pixabay and it’s free, absolutely free. These images are royalty-free, license-free and copyright-free so they’re able to be used on your website. Then when you go to Pixabay, they are supported by advertising, so at the top of the screen, this first row is sponsored is Shutterstock.
So this first row of little pictures, if you click on them, they’ll take you to the Shutterstock website where you can buy photos. We’re not doing that today. We’re just going to look at free images. So as I scroll down, I’m just looking for something that’ll be fun to play with today. Oh, I’m going to choose this one right here. This is “Cat, Relax, chill out cat”.
So on the right-hand side I can see who the creator of this photo is. 22 images today. Now if I click the free download button, I can choose sizes. I’m never going to need a size that’s bigger than 1280 by 960. So I’m going to click on that and then I’m going to download it. Now that’ll go straight to my download folder. From there, I can drag it wherever. Now on the screen here, you’ll get a message that says, “say thanks to the author”. You can donate too. You can also give them some credit if you want you, but neither of those things are required.
Okay, so let’s go over to the folders and we’ll see the image. Now we’re on my desktop and here in a folder I have the image that I’ve downloaded and it’s called “cat”. So we can see that it’s 384 kilobytes. It’s a JP.G Now what I’m going to do — and I do this for every single thing I download from Internet — I put a dash and then I put a note to myself of where I got this. I’m just going to put “Pixa” for Pixabay because that’s my shortcode to remind me later on where I found this image. I’m keeping the numbers related to this. Before I would upload this to a website, I would also add keywords in the name of the image, but we’re not going to do that today. We’ll do that in another video. So right now I have a jpeg that is 384 kilobyte.
Optimising images includes resizing, and fixing the weight
I’d like to get it down below a hundred and I’d like to change the dimensions of it on my Mac. I’m doing command I or the Apple Key plus “i” and here I can see the size of it, but scrolling down I can see a lot more information.
So that it mentions here is exactly what I chose, 1280 by 960 — that’s a fast way to see more information about a photo. Now if I come over to the Internet, I’m going to go to a website called ImageResize.org
Now this is a great little website. Today we’re just going to do a single image where that Image resize is the first option in the menu. If you had more images that you wanted to resize to the same size, you could use Bulk Resize. There are other options, but today let’s just focus on this one crop and resize, I can use photos from my computer or I can use photos from the link or URL.
Today I’m going to be the select the image or drop the images here. So let me just — I’m just going to drag that image to the page. Now here I can crop, flip or rotate. Great thing to do, we’re not doing that today. The image size, of course, I want to check, I’m going for a hundred pixels or less.
On my website. I usually choose 800 by 400 if I want to keep this in the exact size of the whole face of the cat, I’m going to do 800 by 600. Now as I scroll down, I’m not going to touch optimization level. That changes the quality of the photo. We don’t need to worry about that right now. And then I’m going to save it as a JPG. I’m clicking on Jpg and clicking on the blue Save and Download image.
So here’s the image of the kitty. As I scroll down, I can see the name of the cat — image. I can see what its original size was, 374 and now I can see its new size is about 80 — and I can see the original pixels, 1280 by 960, so that’s fantastic. So very happy with that.
Ignore all these ads wherever you see this little light blue “i”and the light blue “x”, that’s an ad. Ignore it.
Now I’m going to click on the download image button. It’s going to take me over here and that’s fantastic. Back in the folder on the desktop, you can see I now have two images. This is the one we originally downloaded and this is the one that I’ve now downloaded from the optimisation. Now I’ve added a “2” at the end of it so that I can see the difference between the two of them.
Another thing that I quite often do is I will add “-LQ”at the end for “lower quality” or “lighter quality”, and this tells me that this is a good version of the photo. Sometimes I might have a high quality and medium quality and a low quality depending on what I’m going to use the photos for. So now that we’ve got that, I’m going to just open it here. Both of these images look exactly the same. There’s no difference. They both look fabulous, cute little kitty cat and that’s the easiest way to do this.
I do hope you’ll be able to use ImageResize.org to tweak your images and photos. I’d love to know how you get on. So please do post a comment or a question below. If you’d like a PDF cheat sheet for image optimization with a bit more detail, please do download it here. That’s at TeenaHughesOnline.com/image001
Oh – while you are here, if you enjoyed this video, please do consider liking it, and subscribing, so you’ll be notified as soon as I post new video tips which might help you.
Questions about how to optimize images for WordPress? (or “optimise”)
If you have any questions at all, give me a yell – send an email, call me or pop over to Facebook for a chat.
Ciao ciao for now,
Teena Hughes
- PS – Prefer to watch the video on YouTube? >>
- Get notified every time I upload a new video to YouTube >>