How to Optimize Images for SEO? Part 1

Do the graphics on your website influence your search engine ranking results? Yes, they sure do. Is it easy to explain how they do it? Well, this is where our story begins.

In this two-part series on SEO and optimizing images, I will try to explain in straightforward terms how this works.

Typically, SEO work related to graphics is limited to completing the ‘alt attribute’ text and ensuring that the size of the images does not affect the page-loading time. 

Ensuring that this is done is important but this is only a small part of the whole issue. In general, image SEO affects the way your images are ranked and positioned in Google images.

Not only that, but it can also affect your overall organic search potential and the search volume for your website. Moreover, the importance of images for search engine results is becoming more important by the day and has done so since the publication of this SEO Clarity study in 2019.

But before we move on to more complex topics related to user experience (UX) and how image quality indirectly influences the ranking of your website, in this first article let’s have a brief look at the basic technical matters related to web images.

Are alt text and title text optimization worth the effort?

Yes, and yes. These attributes are of great importance as part of technical SEO and have a direct impact on the quality of your website and its rating by Google.

It is worth putting effort into this aspect when building your website. It seems like a tedious process, but with a little experience and the right tools, this process can be greatly improved.

These are the basic, most important elements of image SEO optimization that you should start with:

1. Image’s name. Image names must be short but meaningful. The highest performance images are approximately 8-16 characters in length, which is the length of several keywords. It doesn’t automatically mean that the name has to cover solely keywords. The most important thing is that it should be instructive and reveal the real content/purpose of the picture. Remember that Google penalizes keywords stuffing and such practice may be counterproductive.
2. ALT text. The search engines place great emphasis on this due to its influence on the accessibility of the website. 

Proper structure and content of images’ alt text enable blind and partially sighted people to navigate the site relatively easily, and, more importantly, help Google robots to understand the content of your images. The Google bots may not have eyes – at least for now – and they have to be guided. ALT tags are also displayed in place of the image in browsers when the file cannot be loaded. Hence, the properly formatted alt text should be a simple and informative description of what can be actually seen in the image.

The words should be a textual representation of what can be seen.

For instance, if the image shows a red car parked in the city centre, the alt text should read … ‘a red car parked in the city centre’. 

The only elements that do not require and do not need alt text are purely decorative images that do not communicate any content and are not an important element of the page structure. 

Neither the Google bots nor the potential user cares if your page has a “red decorative shape” well described. 

This element has nothing to do with the content of your website and it doesn’t impact the value of the information contained therein. In fact, it can interrupt smooth navigation and confuse the mechanisms that determine the semantics of your website for search engines.

3. Image’s Title. The title appears as a caption when hovering over the image. It is a less important element for SEO, yet it can improve users’ experience on your website and therefore extend the time spent by them on the website, which is always important in assessing the quality of your website by page rank algorithms.

What about the website speed?

Website speed is an important SEO ranking factor and general loading time can dramatically impact your ranking position. Obviously, poorly optimized images may have a significant influence on this factor and can make your well-optimized website significantly lose quality due to this one neglected element.

 Basically, improperly optimized images can constitute render-blocking resources and have a decisive impact on the loading time of your website.

Below we will discuss a few crucial factors related to image optimization.

Image formats and the best practices related to each

It is difficult to give you any definitive guidelines on this topic. Basically, the jpg format is becoming a thing of the past, and will probably be replaced by Webp in a few years. However, other formats have advantages that Webp doesn’t have.

For instance, in certain situations, the need for a transparent background forces us to use certain graphic file formats, like PNG. Let’s look closer at each of these popular formats.

• JPG. As said, the jpg format is still the most popular graphic file format, yet it’s a lossless format that always must be properly optimized. In addition, in near future, the .webp format will supersede this format entirely in all sorts of internet applications. 

With a bit of experience, you can use the jpeg format in a very sensitive way, but it requires an individual approach to each file and an understanding of how to balance the image size and its compression. 

This topic will be dealt with in the next article about image SEO optimization (stay tuned!)

• Webp. Probably the format of the future, already supported by virtually all browsers and becoming the new standard. 

The biggest advantage of this format is the way the file is loaded by the browser. Basically, the file loads “bottom-up” so it won’t be a burden on the browser resources (i.e. it will not extend the page loading time). Stay tuned for the possibility of going to .webp on all popular platforms.

• SVG. This type of graphic file tends to be the least burdensome for the browser. However, it is a vector file, which means that graphics prepared in this way have their limitations.

Basically, it is an .xml file that contains all the graphics data in code form. For simple shapes, this type of file uses very little resources because it uses a mathematical description. Most of the illustration files you can find on stock (for instance, ai and .pdf files) can be converted and used as svg files.

One important note – svg files, as they are de facto. xml code can cause security problems. It is worth being careful and downloading this type of file only from reliable sources. Learn more about security issues related to using .svg files here.

In the next episode, we’ll try to dig further into the use of different types of graphic files and their relationship with SEO issues.