Why is resizing images important?

When you upload images to WordPress you do have the option to display the image in your post or page in different sizes.  Resizing images before uploading is important because smaller images load faster. 

It helps with the load times of your website or blog, which in turn has an impact on search ranking.  Obviously people don’t want to be hanging around waiting for your images to load either!

Not everyone has fancy graphics or image editors.  That’s Okay, because you don’t need them. 

In this video I explaine why resizing images is important and how to resize using Paint (free on Windows), Microsoft Image Editor (bundled in Office Suit) and Gimp (free download). 

Resizing Images Using Simple Image Editors And Uploading To WordPress

Resizing images using Paint – 1 min 53
Resizing images using Office Image Editor – 3 min 25
Resizing images using Gimp – 4 min 44
Uploading to WordPress – 6 min 36

Resizing Images and Uploading To WordPress Video Transcription

Hi it’s Jan from My Local Business Online. I had a question earlier today about images and uploading images and photographs to WordPress. One of the issues that popped up was resizing images to fit on your page. Now, why would you want to resize images when you can do that within WordPress?

Well what happens is, when you take a photo with your phone or digital camera, or download a picture, often they’re really quite large images. When you upload a large image to WordPress, or even your website, what happens is even when you resize it so it shows the right size on the screen when somebody views the page with their browser, the browser loads the full image then resizes it on the fly. That can really slow your website loading times down when you do it a lot.

Resizing images before you upload them is best practice. The only time you don’t want to resize images before you upload is when you’re showing thumbnail or smaller image and you want people to click on it to open the larger image. For example if you have infographics on your website, that’s quite handy to do.

How do you resize images?

Most images editors have a resize function. If you don’t have an image editor I’m going to show you a few here that are available on Windows, I’m using Windows 7 I think! These programmes are pre-installed on there.

1.53
This first one is Paint. It’s a very, very basic image editor, but it has the resize function, which is all that we want at the moment.

Resize is here and when you click on resize you’ve got the option you have the option to change by percentage or pixels. I’m going to choose pixels.

Your WordPress blog, the actual page width of a blog is around 600 to 700 pixels. It depends on your theme and what your own settings are. When you resize to show a full width at the top or within your post, aim at around 700 pixels. Half a width would be 300 to 350 pixels.

Another size you may want to remember is for Facebook. On the timeline, a column on the timeline is around 404 pixels. So you want your picture width around about 400 pixels or there abouts.

So just type in 400 in the horizontal box. Because the maintain aspect ratio box is ticked, you don’t need to change this, it will change the height automatically. Then click OK and there it goes. The image is resized to the size you want.

3.25
Another programme you may have if you have got Office is the image editor within Office. This one is a bit different, click on edit images at the top. Actually, I’ll click home and show the original menu you may have.

Click on edit pictures and here is the resize section. You can choose a predefined width and height or custom width and height. The problem with Microsoft’s picture editor is it doesn’t keep the aspect ratio. So, if I change the width then the height doesn’t change automatically. It’s easy to skew your pictures and make them look bad.

You may be better choosing a percentage of the original width. The original size of this image is 843 by 520 so if I choose 50% then that gives me the new size underneath here.

4.44
If you don’t have Paint or Microsoft’s image editor then you can download an image editor. I recommend Gimp. It’s nice and easy to use. It does all sorts of fancy stuff too, most of which I don’t use at all so couldn’t tell you about them! I do use it to resize images though.

Here’s an image I used on my last blog post. To resize this image, click on image then scale image. Here’s the scale image box.

I can then enter the width at 300 and because this little chain here is locked, when I click here then it automatically puts in the right height too. Click scale and there you go, the image is slightly smaller.

Now while you are editing your images, one thing I want to say is once you’re done editing, save them as keyword phrase. Preferably use the exact keyword phrase that you are targeting, if not use a phrase that is related to it. I’ll talk more about that when I show you how to upload.

If I go to save as, you’ll see that I have saved this image as scheduled-tweets-automating-twitter dot jpg. I’ll just put a 2 at the end there and press enter. Up pops the save as JPEG box. The quality is at 91 and that’s fine. Usually it’s around 85 for web display. Obviously, if you are going to print your image it needs to be at 100%.

Then just click save. You don’t need to bother with all the advanced options. Click save. There you go, that is saved now and I’ll be back in a tick when I have opened my blog to show you how to upload the images.

6.36
Here we are in my blog and I am going to show you how to upload an image. It’s really simple. Just click on the little camera, add media icon here and you’ll get a pop up box. My computer is rather slow, I have far too much going on on it!

This is the standard WordPress add media pop up box, you can change to the browser uploader as well. You can either drag and drop files in or select your files that you want to upload. I’m just going to change that to day, save me scrolling through all these folders.

There’s my scheduled tweets picture that I have just resized. Click on it and click open. Now that this has uploaded, scroll down, you’ll get all sorts of options here.

Remember what I said about using keyword phrases and related keyword phrases? Put your keyword phrases and related keyword phrases in your title. A related phrase in your title is fine.

The alternate text – this is where you tell Google, it’s the hidden code behind the image that lets Google and the other search engines know what the picture is about. Use your keyword phrase that you are targeting that accurately describes the picture.

This also shows when, for whatever reason, the image doesn’t load. Some people may be on a particularly slow connection or even browsing the web with images turned off. The alternate text is what shows instead of the image, so try to be fairly descriptive. For now I am just going to call it scheduled tweets.

You can add a caption if you want a caption. Captions are really useful because a lot of people read captions more than the full post text. Their eye is automatically drawn to a picture so it’s a fab place to put your calls to action as well.

You can also add a description. This is also hidden behind the image and the search spiders can read it, so you can put a description in there as well.

The link URL is handy if you post this as a small image and you want to link to the full size image. Click the file URL and it will insert the URL of the original image. If not just leave it blank.

The alignment is self-explanatory. Where on the page do you want the image to align with the text? You can choose none, left, center and right.

This is where you can choose your image sizes. Because this is quite a small picture, I can choose a thumbnail or full size only. If I choose thumbnail and put in the URL up here, when you click the thumbnail image it will open the full size picture again.

We’ll leave it a full size. If you have a particularly large image, you can also choose medium or large. Like I said, if you resize the image before you upload it, it’s actually easier on the browser that’s viewing it, because it doesn’t need to load the full image then resize it on the fly. It makes loading your website quicker, which is good for you.

Then just click insert into post. You can also use it as a featured image as well. So there’s my image inserted into the post. It is really that simple. I’ll speak to you soon.