Images and SEO : how to optimize them

Article recap : 

• Adding images to your content is a good way to level up the optimization of your website for search engines and users

• Improve your images quality and your website performance by scaling down the file size to not lose too much quality

• Include alt attributes and captions to your images

• Don’t forget: not all images require a caption 

• Choose your image a filename based on your customers’ search patterns  

Are images necessary ?

No matter what your content is about, you can always use images to exemplify or “just” to bring some dynamism to it. By “images” we mean, any visual support such as photos, charts, data flow diagrams, etc. Images are not only useful to illustrate and attract content for readers to better understand an article, but they are also a powerful tool to level up the optimization of a webpage for  search engines.  However,  in order to do so, you need to pay attention to some key aspects that will enable you to optimize website images. Among them, you can find form-related aspects (e.g the format of an image); speed response-related aspects (eg. the size, scale, and compression of an image) and index-related  aspects (e.g the images descriptions,  also known as Attribute alt). In the following sections, you will have a list of everything you  need to know to work on these aspects and increase the chances of your website pages to have better rank emplacement.
 

1. Mind the size and the quality of the image

High and large resolution images  often slow down a website page considerably. What  you need to do in order to conciliate quality and good  performance is scale down the file size* to not lose too much quality.

(*) File size and image size are two different things. While an image size refers to the dimensions of an image, that is, its pixels. File size, on the other hand, refers to the storage space it needs on the server (kilobytes).
Don’t forget: the loading time performance of your website is important for both UX and SEO.

2. Choose the right file format and compression rate

There are plenty of options of file formats, among the most popular ones: PNG, JPEG, and GIF.  Each one of them has its advantages and disadvantages depending on the platform they are being used and the intentions you’ve got for them. If you are willing to display images with lots of colors you should choose the JPEG format, for example. However, if you intend to display simpler images with a relatively small size, you could go for PNG format instead. 

The compression rate will depend on the file type you have chosen. You should consider testing different compressions to identify the one that works best for you. Generally, image editing tools like Adobe Photoshop already have the option to “save for the web” in which your file size is automatically reduced without losing image quality. 

Even if you don’t have access to Adobe Photoshop, there are other tools and plug-ins that do the same job. Here you have a few of them: WP Smush,  Affinity Photo, Image Optim (Mac only) or Optimus Image Optimizer.

3. Include alt attribute tags

Search engine crawlers cannot (yet) understand what a picture is about. The only way for them to accurately index your page is if you facilitate their task by providing an “alternative attribute” to each one of your images. Besides, alternative attributes or alternative texts are helpful for visually impaired users and will be displayed when there is a glitch and the images aren’t loading. Basically, they are written descriptions of the image. 

Let’s pretend you work for a pet-shop website and you need to add an alt attribute to this image. Based on the previous paragraph, which example would you use?

 

Example 1 :  <img src= “dog.png” alt=”dog”>  -  This is an acceptable alt attribute tag even if it doesn't bring a complete description of the image.
 

Example 2 : <img src="dog.png" alt="dog with a birthday hat"> - This is a perfect example of an effective alt attribute because it really describes all the components of the image in a direct way.

Example 3 : <img src="dog.png" alt="dog dog birthday  party birthday hat animal costume"> - This is an example of a bad alt attribute because we have separated keywords, that may have a connection with the components of the image, but they are not properly describing it. 
 

Cocolyze tips for alt attributes : 

• It is not necessary to add “picture of” or “image of” at the beginning of the description 

• Keep your alt tag simple and accurate, avoiding keyword stuffing

• Don’t use emojis or other images in the place of a text

• Include the main keywords in your image

4. Include captions

Image captions are a helpful tool for communication. Placed under the images, they bring a brief description of the context of an image. Longer than an alt attribute and also visible for Internet users, image captions catch 16% more readership than text, according to Poynter research. Thus, image captions give you an extra opportunity to catch your reader's attention. Let’s check a perfect example of an image caption: 

Depending on the image, you won’t need to add a caption. Some images can stand alone and don’t require a description, which is the case of the following example :

Cocolyze tips for captions : 

• Use captions to contextulize the image content

• Keep your captions simple and accurate

• Use keywords from your content 

• Prioritize the use of present-tense 

• Don’t forget to include citations and credits of the image

5. Name your file thinking SEO

According to Google “Image best practices”,  filenames give clues about the subject matter of an image. The less ordinary your filename is, the more chances it has to be indexed and then ranked. For example, “my-new-black-kitten.jpg” is better than “IMG00023.jpg”. Thinking your filename for search engine optimization will help search engines to better understand  your content.
 

Cocolyze tips for your file name : 

• Keep it simple and accurate just as the alt tags and captions

• Use website analytics to understand how your products and services are searched by users. It will enable you to find out the patterns they follow in their search, so then you can name your files accordingly