Did you know that you can optimize an image on your WordPress website and gain in download speed?

Indeed, the speed of a website is one of the criteria taken into account by Google’s algorithm. In other words, if your site is fast, you will be more likely to find yourself on the first page of the search results, and as a bonus, your readers will find your website more pleasant while navigating, and will happily come back for more information.

However, this speed depends on a certain number of criteria such as the choice of your server, your theme (WordPress), your fonts, the quality of your internal and external links and, especially, the weight of your images.

In this tutorial I will explain how to optimize and effectively compress your images for the web while maintaining a good level of quality.

But before you begin, you might prefer to join my FREE Internet Marketing course which you can receive in your email box one lesson at the time, once every other day. For that, just click on the banner below and that’s it …

Done it? Thanks, and let’s get on with our tutorial …

How to optimize an image for WordPress …

If you have done your research already you will know that there are many ways to optimize an image for your WordPress website or blog, and as many plugins available to simplify the process.

But, it important to note that there are several rules that you must respect in order to satisfy Google, and other search engines.

Optimize your image for the web: conventions to respect!

---

These rules are in number of three of the most important, and we are going to go through each one of them one by one.

Before getting to that, you might like to share this tutorial with your Twitter followers, so all you have to do is to click on the box below and it will automatically do that for you …

How to Optimize an Image for WordPress - A FREE Step by Step Guide - Click Here To Share! Click To Tweet

Okay, let’s get on with it now …

Rule # 1: act on your images according to several criteria

---

• DIMENSIONS: cameras take pictures in high quality, usually more than 5000 pixels wide. But for the web, these images are far too big. An image of 600 to 1000 pixels wide will be enough. But it also depends on its use and the WordPress theme used. For example, an image used to illustrate an article, an image for a Hero Header or an image in background will not have the same width). Reducing the size (Width x Height) of an image will de facto reduce its weight. This is the first point on which we must act. However, be sure to maintain the “ratio” of the image, ie the proportion between width and height.
• RESOLUTION: Your images can have different types of resolutions, from 72 to 400 DPI (Dots Per Inch), it is the number of “dots per inch” that defines the grain and quality of the image for printing. For the web, the type of resolution will not change the weight of your image, so you do not need to act on this criterion.
• COMPRESSION: most image editing software will allow you to act on the compression quality according to a given percentage. If you lower this percentage, from 100% to 80% for example (you can go down to 60%), your image will not lose much in quality but, on the other hand, it will be considerably lighter.
• WEIGHT: there is not really a “perfect” weight, but it is certain that your images for your website should be as light as possible. Ideally, an image of less than 100KB would be a good start. Then, what must be taken into account is the number of images on the same web page.

Rule # 2: act BEFORE uploading your images in WordPress

---

Before sending your images to the library of your WordPress site you will have to name your photo correctly.

By any means, you must not use:

• special characters (“# / @ & (,! ‘+ =.),
• accented characters (éïèàêîâ …),
• capital letters,
• and you will have to replace your spaces with dashes (- and not the dashes called UNDERSCORE _).

For example: “menu-sugar-salt.jpg” and not “menu_sucré _ & _ salé.jpg”.

Incorrect naming of your images could affect their display in some web browsers.

Rule # 3: act AFTER downloading your images in WordPress

---

This is the last phase of optimization. Once your photo has been imported into the media library, you will be able to:

• change its TITLE: the title of the imported photo will look like “menu-sugar-salt” and you can replace it with “Menu Sweet & Salty by my culinary blog”
• add an ALTERNATIVE TEXT: it is important to add an alternative text to your images for three reasons. The first is that it is important for accessibility, ie a visually impaired user using a browser with voice function can know the content of this image. The second is that this text will be used for your SEO, so consider including your keyword (s). The third is that this text will be displayed when the browser will have trouble providing your images, especially when the user has a bad network.
• fill in the LEGEND and the DESCRIPTION: these options are optional. If you want a text to appear under your image, you will need to fill in the legend.

How to compress your images for the web?

---

There are many ways to achieve an optimization of your photos. Depending on your hardware and your environment, you will be able to use various software.

1 – The method with PHOTOSHOP

We will not talk here about the fame of PhotoShop, I guess the majority of people who work in the web uses this software, whether you are on Mac or PC. Not only will you be able to edit your images but you can also export them for the web.

2 – The method with AFFINITY DESIGNER or AFFINITY PHOTO

Both of these software, Affinity Designer and Affinity Photo, are very recent. Initially, they were created for MAC but their success has implied that they have been extended for Windows use.

Affinity Photo is a “competitor” of PhotoShop and Affinity Designer is a “competitor” of Illustrator.

They are very powerful and there was a time when they were not forcing users to take out a monthly subscription. You had the option to pay only need to pay something like US$67 for each application, only once.

I couldn’t find this option anywhere, so I would imagine that it doesn’t exist anymore. If you are reading this and know more about this, we would be very happy to read about it. Thanks for commenting on that in the comments’ section at the bottom of this article.

In short, we can also use these software to optimize your images for the web.

Note that the compression quality of these two programs is excellent and that the methods are identical in all respects! However, I do not advise you to make your exports via Export Persona because you cannot define the weight, only the quality level.

3 – The method with GIMP

You can easily use this free software to edit your images for the web.

There is also a script that you can add to GIMP that makes exporting your images to the web easier.

You can find out more about this on their website.

And for out francophone readers …

4 – The method with APERÇU

APERÇU is a software embedded on all MAC. Many people use it without knowing it because it is the application that is used to display any photo when you double-click on it.

Beyond its image display function, this small software can allow you to optimize your images for the web, add annotations, arrows, frames etc.

Warning ! Note however that Aperçu compresses your images but the quality is not always great. This application can help according to the starting quality of the images to be resized.

5 – The method with LIGHTROOM

Very soon you will find this tutorial here. I am still researching and testing this software. If you wish to be notified the minute it is available, simply join my mailing list below …

In conclusion …

---

Indeed, some of my readers find that image optimization for the web is a very difficult step to manage. Unfortunately, you must not skip it because it is one of the best ways to lighten your site.

However, you can go beyond this process, i.e. you can push the optimization one step further by using CDNs (Content Delivery Networks), optimization plugins like IMAGIFY or online tools like TinyPNG.

A quick sum up :

• Resize your images so that the width is between 600px and 1000px (even more depending on the use of your image)
• Compress image quality when exporting: from 100% to 80% for example
• Rename your image appropriately: without capital letters, without accents, without special characters, without spaces, without underscores but with dashes
• Upload your photos onto your site
• Fill in your images with a title and an alternative text containing your keyword (s)

And what about you?

How do you optimize an image for your WordPress website?

---

I hope that you’ve enjoyed this tutorial on how to optimize an image for your WordPress website. If you have some particular techniques that you are using which prove to be successful, we would love to hear from you.

And, if you have any questions, please use the box below and I will respond as soon as possible. If you enjoyed this article please share it socially and leave a comment below, I will highly appreciate it!

I am a Premium Member of Wealthy Affiliate, where I have learned how to share my passions. I am inviting you to join my team and learn how to become successful in business and retire early. It is 100% FREE to join, learn and earn! Click the button below and I’ll see you on the other side.