Optimize your Blog Posts Images: to Improve SEO and User Experience

Have you ever wondered why your website was sometimes very slow to load?

Well most of the time, it is because you have not optimized your blog posts images. And this affects the entire load speed of your website.

Which is why you must optimize your images on your WordPress blog.

Optimizing your image means 2 things:

1. Editing your blog post image in a way that the file size won’t slow down your website
2. Make it SEO friendly 

Non-optimized images will create huge problems on your website. Imagine that you have never optimized them and that you have a bunch of articles and pages full of heavy images. 

A visitor going to your website, might take a very long time to load your page. Leading him or her to discontinue the loading and click to another website. 

I am sure you have done this as well: When a website is too long to load, you just renounce and check another one. Which is not something you want to happen with your blog.

Loading slowly is one of the top reasons why visitors leave a website. On average, more than 30% of visitors leave a website that takes more than 5 seconds to load (bounce rate).

Let’s see how to optimize your images then:

Understand the Use of Images on your Blog

Using images for your articles is a great way to break up your text and give some fresh space for your readers.

If the image is very relevant, it will illustrate well your point. As the saying goes: “a picture is worth a thousand words”.

This is even more relatable if you have a blog that has to be very visual. Like a travel, lifestyle, food or photography blog. 

Those blogs require lots of images. And if they’re not optimized, you’ll end up with pages too difficult to load. Meaning that if your article doesn’t show up quickly. Your visitor might abandon visiting your page.

Which is why you should ask yourself first: Why are you needing an image here?

Try to think if it’s that necessary. A 500-word article might not need more than 1 or 2 images for example. And maybe what you need is not a high-resolution picture. But more of an infographic or a drawing, which are less heavy files.

Know the Right Dimensions for your Content

Once you know which image you are going to use.

Think of where exactly you’ll put it. So that you can easily determine what dimensions your image needs and not to make it larger than where it will be displayed.

For example, if your blog post area is 600 pixels wide. Your image shouldn’t be larger than that. I suggest checking the content width of your blog.

To do so:

Go to one of your blog posts and select a paragraph for example.

Then, Right click and Inspect (as below).

You will see a new window on your right – then just look at the info in the green rectangle below.

Here is the zoom screenshot.

So, 747.5×90 pixels as its dimensions. Therefore, my content area is about 747.5 px large. So, I don’t need to upload images larger than this width.

For the height, you can choose depending on how high you want your image to be. For my blog post, I mostly use 647×427 images, so my images look more like rectangles:

But sometimes I change it. Especially, when a rectangle image cannot really fit with the picture, such as below where the width of the image is at 287 pixels:

As I said, choose the height according to how you want your image to appear.

However, remember that the dimensions of your image impact the file size of your image. The higher and the larger it is, the heavier the file size will be, see below:

Edit your Image before Uploading it

Be careful here! A lot of beginners make mistakes.

The dimensions of your image has to be edited before you upload it on your website. This is because your image will be uploaded on a server that will store your image.

If you decide to edit the size of your image directly on WordPress for example or another blogging platform, it will just change the appearance of your image on your post but not its file size.

So, make sure you crop your images or reduce its dimensions as much as your defined content area.

If you check my other articles, you’ll see that my images have most of the time, the same size. I crop them in advance when I upload them on my website.

I use WordPress, and my theme automatically gave me some recommendations of image’s dimensions for my blog posts.

Knowing the dimensions for a medium image. I kept them in mind and cropped all my images , using those, when uploading them on the WordPress Library.Doing such also gives some coherence on my website that my visitors appreciate and overall, improve the user experience.

Know the Recommended Weight of your Images

As you’ve understood the heaviness of your images is often the source of the slowness of your website. 

You cannot control the connection speed of your reader but you can control the weight of your pictures, so make sure they are light.

As it is said previously, the file size of your image is how much storage your picture requires and it is usually expressed in bytes (KB, MB, GB).

Most bloggers advise us to keep your pictures smaller than 100 KB.

I personally try to reduce them around 30 – 50 KB if I see that their quality isn’t impacted that much. Truth is that most of my images are here to break up the text or are just screenshots.

I give them less importance than what I’m writing about.

But another blog that I have is a travel one. Pictures are for sure essential as I’m showcasing the places I went to.

If I downsize my pictures to 40 KB, the quality might be too low. Therefore, I am trying to keep them around 70 – 120 KB in order to have them light but still clear.

Now that you know why you’re using an image, what dimensions it should have, and how heavy it should be. 

It’s time to talk about the practical part.

My travel blog: 2frenchinmanila.com. Mostly vlogs as we developed the YouTube Channel more and produced videos with Air Asia, the Department of Tourism and many hotels in the Philippines.

How to Optimize your Images

Now that you know the basics of image optimization, let’s see how to optimize your image step by step.

1. Find your image

If you don’t want to have any issues, make sure your picture is non-copyrighted.

There are lots of websites where you can download free pictures about the content you’re looking for. I usually go to Pixabay or Unsplash because of their wide selection.

It’s great to have at least 2 or 3 websites where you can search for your picture as sometimes the first one won’t show you the image you’re enough satisfied with.

I made an article about which websites to use if you need: 5 Best Websites to Find Free and High Quality Images for your Blog Posts.

2. Edit and crop your image with the right dimensions

Once you’ve downloaded or have the image you want to use for your blog post.

You now need to edit it to fit the dimensions you’ve chosen.

On Photoshop, it’s kinda easy as you can just create the area with the dimensions you need and then crop your picture into it.

I use Photoshop, which is why most of my images have the same size (and sometimes effects) as I use the same layout to resize them.

If you don’t have Photoshop, you can use an online website. Just google “image crop online” and you’ll find many. Sometimes even your own computer’s editor can modify pictures when you open your image.

On WordPress, you can crop directly the image when you upload them. Which I don’t do. As it’s best to do all the modifications before uploading your images on WordPress’ Media Library.

3. Export your image with the right settings

For Photoshop users or other similar apps, when you are done editing your picture on Photoshop (cropping to the right size, maybe adding some corrections, color effects or filters if you want), you will export your file.

As you choose the quality of your export (from 1 – 10), you’ll obviously see that the less the quality is the less the file size is.

Photoshop displays the file size preview on the export settings. So you can adjust the quality based on the size you’re targeting.

I also suggest exporting your file in JPG instead of PNG. As it will lower the size of your file.

What you need to check out is the format, the quality and the size then you can export.

4. Compress your image online

After the export, we can optimize images even more.

So, I do one last stop to reduce the file size even more. I use a free images compressor available on the net.

Those websites optimize your images even more after you have done it manually. This will help you to make your website faster and save bandwidth.

Check below the many websites available:

Some of them will try to reduce to the minimum the size of it without reducing the quality. Thus, will not really let you change manually the parameters. It will be done automatically. Like the second one: compressor.io. That’s actually what I use because I don’t want to lose too much quality.

I basically drag and drop the picture I want to shrink. And automatically it will compress it to the minimum size without losing too much on the quality. Then I download the result and that’s it.

Other online compressors will give you a way to manually change the size of your image. But if you’re reducing it too much, you’ll lose a lot in terms of quality.

So, now you are done. Your images are optimized.

You can freely upload them on your blog’s article.

I invite you to do this process for all the images you want to optimize all of them and before publishing your article. You will notice how faster your page will load than if you are using heavy pictures.

Plus, you can check out: Page Speed Insights. It is a free google developer tool that will show you how fast your page is loading and what you should work on to improve your speed. And usually you will see that you have to optimize your images as most of the time, we forget to do it.

I hope you found this article useful, don’t hesitate to comment below 😊