Compatibility:

WebSite X5 Evo e Pro

When you optimize your website for Search Engines, you really have to look into any detail, even when you prepare and add images.


When you optimize your images for the SEO, you need to take the following aspects into account:


File size and quality

It's nice to have high-quality images on your website, but if their size is too big, they can slow down the page loading speed, which can negatively affect the navigation experience. You need to focus on finding a good balance between quality and size.


With WebSite X5, you can easily solve this problem, as the software automatically creates a copy for the images you add to the project according to the size they are displayed with: in this way, the original image is preserved while reducing the whole page weight.


If you use the Pro edition, you can further optimize the images of your project. You need to go to Step 1 - Website Settings > SEO > General and select the Image Optimization level you want to apply: None, Minimum, Medium or Maximum.


Images are then compressed and saved in .JPG format. You can apply a higher compression level by activating the Convert images in WebP format option.


#tip - WebP is a compression format for images that Google specifically developed for the images to be used on the Web. It is compatible with all modern browsers, while it isn't compatible with Safari versions older than v14 and with macOS versions older than v11 (Big Sur). Finally, the WebP format isn't compatible with the Outlook mail client.


Please consider that the more you compress the file, the smaller the file and therefore the lower the image quality will be. You then need to find a compromise between size and quality for the images of your project.


#tip - The WebP compression cab be applied to any image except the GIF and SVG ones. On the other hand, the JPG compression can't be applied to PNG, GIF and SVG images.

File name

Giving proper names to your image files is important for your SEO. Avoid using acronyms or numbers with no specific meaning. Please follow these tips instead:

  • choose a name which describes the image;
  • if possible, report a keyword in the name;
  • if you use more words for the file name, separate them using some dashes.


ALT Tag and Title Attribute

Search Engines use the alternative text for an image (ALT text)  to understand what the image is about. It is the text which is used when, for whatever reason, the image cannot be correctly displayed. For example, it is read by the so called screen reader tools, i.e. the programs used by blind people to surf online. A good ALT text must be:

  • optimized for SEO, it must report at least one of the keywords chosen for the page,
  • functional for the website accessibility, i.e. it can serve the same function the image does.


On the other hand, the Title Attribute of an image is the text which is shown on mouseover. It is useful for the visitors who will be able to get more information about the image itself. 


You can set ALT text and the Title Attribute by following these steps:

  • Select the Image you want to work on and click on the  button to open the settings window.
  • In the General section, type in the relative texts for the Title and the Alternative Text.


Sitemap.xml

You can help Google find the images of your Website and understand which are the most important by using the Sitemap.xml file. For instance, all the images simply used for the graphic design of a template are less important, and therefore they don't have to be added in the Sitemap.xml file.


You can add an image the Sitemap.xml by following these steps:

  • Go to Step 1 - Website Settings > SEO.
  • In the General section, verify if the Automatically create a SiteMap option is active: in this way, all the images used as content of your pages will be automatically added to the Sitemap.xml.
  • Select the Image Object you want to work on and click on the  button to open the settings window.
  • Open the SEO section, report the Title, Caption and the Geographic position (the address for instance). 
  • Repeat these steps for all the important images of your website.


#tip - For more information, please see: How to work with the sitemap.xml file of the website