How to optimize WordPress images? Your full guide

373

What are the benefits of inserting images on your company’s website?

There have been many studies on the benefits of images on web pages.

Here is the one I retained:

Pages with at least one image have a better yield in organic research than pages without images.

To make you want to read your content, the benefits of images are obvious.

However, if your images are not well optimized, they can add multiple megabytes to your page loading sizes.

This will be extremely detrimental to the performance of your site. And it will even not only bring you down to Google rankings but also give a frustrating experience to your readers.

I turned to Laurent and this is what he said to me:

Optimizing the images on your website is very simple to do. Any business owner must be able to optimize the images to obtain a better natural referencing for their site.

I got to work immediately and here are the 8 chapters of image optimization covered in this article:

Sources – 3 sites where you can find millions of images for free
The format – Choose between JPEG, GIF or PNG ?
Resolution – Use images with the same dimensions with which they appear
Size – Compress your images for faster loading
The Name – Use descriptive file names
Alt text and title – Note to inform them
The map site – Increase the chances that your images will be referenced
Social Media – Making the most of your images on social media

Plus a bonus tip if one day you migrate from theme !

Find free and free images of law

Even if it is always better to shoot your own images, taking your own photos to illustrate content is not always feasible, whether for time or resource constraints.

Fortunately, there are tons of websites available on the web with millions of free images of law.

Here are the 3 image sites I most often use to find quality images:

If they are not enough for you, go to my list of 18 sites where you can find free images by right.

In addition to beautiful photos, your content may also require screenshots. In this case, you should always spend some time creating yours.

Most of the screenshots on my site are created with the screen print key on my keyboard and then worked with MS Paint. And yes, you don’t need skills on Photoshop to edit simple images.

What image format to use?

After the quality of the image comes the choice of file format.

There are many types of image files with their advantages and disadvantages.

I will focus on the 3 most common types of files: JPEG, GIF and PNG

JPEG

With JPEG (Joint Photographic Experts Group) images, there is a compromise to be found between file size and image quality.

The compression level should be adjusted to find the right balance between file size and image quality.

Transparent funds are not supported, so JPEG is generally not an appropriate option for website logos.

JPEG is, without a doubt, the best option for colorful photographic images.

GIF

GIF stands for Graphics Interchange Format.

GIF files are obviously well suited to animated images.

The constraint: the GIF format only supports 256 colors of the RGB spectrum. This restriction makes the GIF format unsuitable for colorful photographic images.

GIF supports transparent funds. It is therefore an appropriate option for logos and other page elements, such as buttons.

Please note: the size of animated GIF files is often large. I advise you to consult this size before using them on your site.

PNG

PNG stands for Portable Network Graphics. PNG supports data compression without loss of quality. It was imagined to replace the GIF format

The PNG format supports transparency and a wide range of colors, such as the JPEG

PNG offers an incomparable image quality for simple images compared to JPEG format. But their file size will be much larger for color photographic images.

WhoIsHostingThis has published an infography on the subject from which I extracted the image below:

My recommendations :

Use the JPEG format for your photos,
Favor the PNG format for transparent logos and images with few colors.
Use animated GIFs sparingly because of the weight of the files.

What image resolution to remember ?

Image resolution greatly influences the size of the file.

Never forget that you have to have the smallest file size possible to load pages as quickly as possible.

For example, if your website displays images up to 720 px wide, there is no need to use images 2000 px wide.

The 2000 px image will be automatically resized to fit the 720 px container, but the image size will be kept.

However, the difference in file size between a 2000px wide image and a 720 px image can be more than 1 MB !

Likewise, if you need an image of 250 x 250 px, do not use a larger image (for example 500x500px), create an image with the exact size you need, i.e. 250 x 250 px.

So you minimize the size of the page, and therefore the loading time of your page is faster for your visitors.

My advice: know the resolution necessary for the theme of your site and work on your images so that they are exactly this size. This will reduce the page size and therefore your pages will appear faster without losing quality.

Reduce the weight of images with imagify

Once you have put your images to the right resolution required by your theme, seek to eliminate any unnecessary kilobyte without sacrificing the quality of the image.

Although there are excellent WordPress extensions that compress the size of the images, I am convinced that the images must be well optimized before downloading them.

Once you have optimized them before uploading them to your CMS, the WordPress (or other CMS) extensions compress them more without losing image quality.

Most extensions offer a percentage cursor on quality. Imagine an image with a size of 100 ko and a quality of 100. It is very likely that the size can drop to 30 ko with a quality positioned to 70 and this without any degradation visible to the naked eye.

Generally, for JPEG images, the quality adjustment between 70 and 85 ensures correct image quality while significantly reducing the size of the output file. On the other hand, below 70, there is generally a more significant loss of image quality.

Before I entrusted this work to the WP Smush extension.

WP Smush is very easy to use. You will be surprised how many kilobytes it can save you without any loss of quality. I won about a third, which is almost 100 MB.

The free version limits packet compressions to 50 images at a time, which is more than enough for small sites.

But it will take a while if you have thousands of images in your media library.

Recently, WP Smush added the possibility of converting images in PNG format into JPEG as soon as he thinks you may have chosen the wrong type of file. This feature also reduces your image files.

And the images are automatically “smushed” during downloading.

The paid version of WP Smush – which I used – further reduces your images to get an even smaller file size. Incidentally, it also removes the limit of package compression. You can therefore compress all your images in one click regardless of their number.

Overall, WP Smush is an ideal image optimization plugin for beginners or if you have little time to devote to optimizing images.

Today I use Imagify

I migrated to imagify.

Optimizing images is as powerful or better than optimizing WP Smush.

But above all imagify is a free tool up to 25 MB per month which is more than enough for most websites.

Use descriptive file names

Simply naming image files is extremely easy to do, but it is an aspect that is often overlooked.

In its recommendations, Google asks you to provide as much information as possible about an image. He particularly insists on the name of the file.

For example, for the above image a file name like “chiot-carlin-mignon.jpg” is more descriptive than “IMG003324.jpg”. So Google classifies your images better in its results pages.

However, naming all image files quickly becomes tedious.

My tip: I use the extension “Media File Renamer”. I have set it so that the names of the image files include the name of the title of the article in which they are present.

My advice: make sure the image file names are a textual description of the image.

Find the alternative text and the title of your images

Alternative text

One of the most important elements in optimizing your images is Alternative Text (or Alt Text).

The Alt Text provides search engines with a way to understand your images. For Google, this is an important factor in image search.

But that’s not all.

The Alt Text is also displayed on the page if, for any reason, your image fails to load. Finally, it is also used by screen readers for the visually impaired.

I’m still trying to add, in my Alt Text fields, a variation of the main keyword of the page.

A final point to emphasize is that Internet Explorer uses Alt Text as an info bubble when your mouse flies over an image. On the other hand, other browsers, such as Chrome, use the Image Title as an info-bubble.

Text of the title

The text of the title is not a priori a classification factor for image search. It is also not considered an important aspect of image optimization.

Although this does not improve the SEO quality of your page or images, it may be a way to provide more information to users. Because most modern browsers use the title text as info-bubble when flying over an image.

Note :

Putting the same text in the Alt Text field and the Title is perfectly suitable.
Use normal spaces in your Alt Text fields and the title, not dashes “-” or dyerscores “_”.

My recommendation: inform the Alt Text fields in all images. 2 to 6 words usually provide a sufficient description.

Include your images in your Sitemap

Although not as important as other aspects of the SEO image, remember to include images in your XML schemaps to increase the chances of your images being found in Google Images.

Images can be referenced manually using the “image: image” and “image: loc” tags in your XML map site

The good news is that, if like me, you use the WordPress Yoast extension, the images are automatically added to your XML website

So you have nothing to do !

My advice: use the WordPress Yoast extension which automatically adds your images to your XML website and submit it to Google Search Console.

Images for your publications on social networks

Remember to define which image you want to display when someone shares your content on social media.

Why is the image important on social networks ?

A good high quality image has a positive impact on the click rate on social platforms, while a poor poor quality image has a negative impact.

You obviously want as many people as possible to click on the shares and land on your site, so be sure to specify the image you want people to see.

Optimize your Meta OG tags

You can do this by manually adding Meta OG tags to the head section of your page.

The Open Graph (used by Facebook and Pinterest) meta OG tags and the Twitter Cards specify important information about your content for social media platforms.

Again, the Yoast SEO extension takes care to automatically add these tags to your pages.

Yoast will choose the image to put in “star” during sharing.

But you can easily select your own image by clicking on the ‘sharing’ icon in the menu on the Yoast side. This will display Facebook sharing options for this page. The recommended image size for sharing on Facebook is 1200 × 630 px.

Click the Twitter icon to display the Twitter options and select your image from the Twitter card in the same way. The recommended image size for sharing on Twitter is 1024 × 512 px.

Note: it is in this window that you specify the title and description when sharing to Facebook and Twitter if you want them to be different from your meta-title and meta-description.

Precision for Pinterest: Even if I don’t talk about it much, I also like Pinterest. Pinterest uses the Alt Text, seen previously, as a description of your image when someone pinpoints it. This is important to know if you want your images to position themselves well in research on Pinterest, which can be an amazing source of traffic.

Bonus: how to regenerate your vignettes in WordPress

If one day you change the site template, either:

To give a more modern look to your site,
Or to migrate to a responsive design compatible with any screen format,

it is a safe bet that the size of the images necessary for the template is different.

And that’s what’s going to happen !

New images that are downloaded after activating the new theme are correct. On the other hand, all the old stickers are displayed with a very average quality or even will appear distorted.

You will try to adjust the image sizes in “Reflags> Media” from your WordPress administration console, but that will not solve the problem.

Indeed, by default, when you download an image to WordPress, it creates different sizes in accordance with your theme and saves them in the download folder.

Many WordPress themes take advantage of this feature and define new image sizes. But the problem is that these new image sizes are only applied to images that you download after activating the theme.

To solve this problem, you must generate new sizes for all previously downloaded images. So you have to “regenerate your miniatures” (or Regenerate Thumbnails in English).

There is a WordPress extension that does this very well: it is “Regenerate Thumbnails”.

It depends on how many images you have, but the treatment may be a bit long. But this extension does the job ! Everything is back to normal once “Regenerate Thumbnails” has passed over all of your images.

My checklist “Image optimization”

The 8 practical tips are summarized in the checklist below.

Use free images of right on stockvault for example
Favor the JPEG format except for logos with transparent background (png)
Re-size images in the right format for your theme before uploading them
Name the image file so that it is readable by a human being
Compress the size of the images with the imagify extension
Teaching the alternative text and the title of your images
Check that your images are well included in your map site
Parameter the sharing of images on social networks.

Summary to optimize your images for the Web

Take the time to put your images in order.

Optimizing your images is not difficult.

This consists of :

Make their weight as low as possible without degrading the quality to speed up the loading time of your pages,
Then, provide all the descriptive fields (title, alt text, file name, etc.) to optimize their referencing in search engines.

Make sure your new images are always well optimized.

You easily improve your classification in search engines.

And as your pages are loaded faster, you also lower your rebound rate.

This therefore means more traffic to your company’s website and better experience for your users.

Optimizing your images is necessary, but not sufficient.

Then also review the other referencing instructions on your pages to propel your web content to the top of the search engine results pages like Google.