Optimising your images is one the key skills to learn if you run your own website. Large or heavy images are one of the main causes of a sluggish website. Page-loading speed has been a ranking signal for some time now, and it will ironically, only continue to weigh more heavily in the ranking mix going forward.
Good SEO requires blogging and blogs require images. Whether you’re using your own camera or hunting down CC0 images through the likes of CC Search or Pixabay, you need to learn how to size an image correctly for web. (CC0 images are copyright free images you can use for both personal and commercial purposes.)
Of course, this is easy if you have Photoshop, which is little pricey, or something like GIMP, which is free but still requires a bit of study time to master. However, even without these professional image editor tools, correctly sizing an image need not be a headache.
What Needs Resizing?
Okay, so let’s first talk about what needs to be re-sized. Two things.
- An image’s dimensions, it’s width and height dimensions to be exact. These are typically measured in pixels (px).
- An image’s file size, measured in kilobytes (KB) or megabytes (MB).
These two specs are related and changing the dimensions of an image changes the file size. If you reduce an image’s dimensions (making it smaller), it stands to reason that the file size will also decrease.
What’s an ideal file size? Anything between 200KB – 400KB. Obviously, larger images will be nearer the 400KB mark and smaller images nearer the 200KB mark.
The first task then is to get the correct dimensions. You can (and should) peruse our guidelines for all image specs in our article entitled Image Optimization: Image Sizing & Page Speed [Ultimate Guide]. However, generally speaking you’ll be looking at two kinds of images:
- Larger images used in a gallery or portfolio, or as a featured image for a blog post. For this, you should use images that are no bigger than 1200px wide by 800px high.
- Smaller images used in the content of a blog, to break up blocks of text. For this, you should aim for no wider than 300px (height isn’t as important).
Typically, an image that comes out of your camera is much larger than this. These images can be as big as 6000px wide and 4000px high (weighing anything between 1-10MB). Images you download from Pixabay won’t be as big but they will be larger than the recommended specs.
Resizing Images with Microsoft Paint
There are any number of free and easy-to-use image editor tools. Microsoft users have Microsoft Paint on hand. Follow this quick tutorial to locate and open Paint in Windows.
I’m going to show you how to resize an image using Microsoft Paint, but the steps apply to any image editor.
Step 1 – Upload the Image to Paint
Select File → Open and browse for the image you want from your computer.
Step 2 – Resize the Image’s Dimensions
I’ve opened a very big image to demonstrate. Its dimensions are 5184px by 3456px and its file size is a whopping 7.8MB.
What do I do? I click the Resize button.
The following pop-up appears:
Select the Pixels option and you’ll be shown the image’s current dimensions (Width = Horizontal and Height = Vertical):
You can simply edit these fields. Make sure the “maintain aspect ratio” checkbox remains ticked or you’ll distort the image.
I changed the Width (or Horizontal field) to 1200px. The Height (or Vertical field) automatically changed to 800px (because the original image happened to have the same ratio 1:5 : 1). In some cases, you’ll need to crop the image using the Crop function to get the height you require.
Now, click the OK button.
Both the image’s dimensions and file size are reduced. The dimensions we know are now 1200px by 800px (because we set them), but the file size depends on whether you save the image as a JPEG or a PNG.
Typically, JPEG saves the image in a smaller size than PNG, but not every time. It all depends on factors beyond the scope of this article. The bottom line is that you’ll often need to save the image in both formats to compare.
Select File → Save as and save in both PNG and JPEG formats.
For this image, the JPEG file size is 533KB and the PNG is 2.8MB. While the dimensions are perfect (1200px by 800px), both sizes are still too big. Remember, we’re aim for anything between 200KB and 400KB.
In this case, there is another step involved.
Step 3 – Use the Power of TinyPNG.
Head over to the wonder that is TinyPNG (and bookmark the spot for frequent use). Then simply drag and drop your images into the “compressor” and watch your images shed those kilobytes. Download the compressed image when it’s done. You’ll often see up to 80% of your image weight saved with rarely a loss in quality.
Okay, let’s demonstrate. I dragged both my test images into TinyPNG and…
…the Panda got all happy and I shed 79% off the PNG version and 32% off the JPEG. Yay!
In this case, the PNG is still too large, but the JPG is perfect at 370KB. Here it is…
After a while, you’ll start to get a feel for how images work. If you’re using your own camera, you’ll get to grips with how big the raw images are, and how they respond to Paint and TinyPNG. And if you’re using Pixabay, you’ll learn how to pick the image specs that suit you (from the 3-4 options they provide).
Practice does make perfect.
Of course, whether you have to use TinyPNG or not, you need to remember to complete the Image Title and Image Alt-text fields to optimise your image for SEO. What am I talking about? These two fields must be completed correctly for good SEO…
For every image? Yes. Every image. And … at least one image per Page or Post should also include your keyword phrase in the Image Title and Image Alt-text field. How many? At least one. Don’t stuff your keyword in every image.
Am I done? Absolutely. For this image, at least.