Image Optimization To Improve Website Speed And Website Promotion - Semalt Expert

Images are one of the most important components of the web, following text of course. A website without images will usually be boring and less motivating to surfers, than a site that has images.

Also, there are quite a few areas where the use of images is mandatory and even necessary to justify the site.

For example:

Google image promotion: using images properly

Have you invested and purchased photos from photo sites/image repositories, or have you even enlarged and taken photos yourself? You should also maximize them for SEO purposes!

Google Image Promotion is one of the best ways to increase website traffic in certain areas - especially those that focus on the visual side.

Despite the above, improper use of images can do more harm than good to the site and even significantly impair promotion efforts. When talking about the use of images in the context of organic promotion, it is important to keep a few rules in mind also, improper use of images can significantly impair the speed of the site, and therefore can have a significant impact on promotion.

Basic image optimization rules:

1. Weight and dimensions of the image

One of the important parameters for promoting images online - is the weight of the image.

On the one hand, we would like to use high-quality images but on the other hand, it will not come at the expense of site speed, user experience, and promotion. The recommendation is always to "optimize" (from the word optimization) the images to the maximum possible, without significantly detracting from the quality. To do this, follow all the following rules:

Recommended weight for photos

Almost any image can be compressed to one degree or another so it is always advisable to use only the dimensions that are really needed and that are physically displayed on the site, and reduce the weight of the images as much as possible. This is true for any site. But especially for sites with lots of images. There is no one rule that is true in all cases, but it is advisable to make sure that the image weight does not exceed 70-80K unless it is a gallery/slider image of special importance.

2. Choose an appropriate name for the image

In a Google search for images, several parameters are taken into account to display the image relevant to the query. One of them is the file name. It is recommended to spend another second and give the image a name that describes what you see in the image. It is important to keep a file name in English and use middle lines and not spaces. The reason is that Google copes better with middle dashes.

Examples of a bad name for a picture:


Site promoter.png

Example of a good name for an image:


For those of you wondering - yes, Google knows how to deal with English image names for other languages as well. As it knows how to translate search strings and highlight translated words in search results.

3. ALT to image

The alt tag, which is an abbreviation of alternative, is a parameter that aims to describe the image. The alt tag is defined within the management system / HTML code for each image individually, and its original function is to serve the blind and people with disabilities who use special software that scans these tags and reads what is written.

Technically in the code, it looks like this:

<imgsrc = "tree.jpg" alt = "tree">

Beyond the importance of the tag in terms of website accessibility, it also has importance to search engines. The alt tag helps the search engines understand what the subject of the image is (along with other things like the file name, the context of the page it is on, etc.) and it also naturally affects the image search on Google.

Also, the alt tag is part of on-page optimization for everything. Also, when there is an external link coming out of the image, the alt tag serves as a kind of text anchor ("anchor text") for the image.

How do I check if an image has an ALT tag?

There are severalways:
Screaming Frog - Use a frog suitable when we want to perform a thorough scan of images on the site.

The process is to enter a URL to scan and then click on the Images tab.

There we will see the list of images on the site, which can be sorted by several parameters:
There are of course more ways and more plugins of various kinds, but it seems to me that I have covered the subject here in terms of a point need, per page, and a sweeping review of the site.

Google image promotion - tips for optimizing ALT tags

You should not force keywords, but try to describe what you see in the picture.
There is no need to use alts for wallpapers / decorative images - even it is recommended not to so that Google will not suspect that you are trying to over-optimize.

4. The title tag for an image

Image captions, or Captions, are a kind of tooltip that can be seen by moving the mouse over an image. Many people confuse them with ALT tags.

Image titles are another indication of the relevance and subject of the image that can help Google understand what the image is talking about and improve its image search rankings. Unlike the ALT tag, a title tag will usually be more descriptive and a little longer, and its purpose is to describe to the surfer what is seen in the image and/or what will come after clicking on the image. News sites make frequent use of this tag.

This is what it looks like in the code:

<img class = " alignnone wp-image-1323 size-full " title = " Example title image ">

5. Image types and file extensions

There are several common formats for using images online. I will briefly expand on each of them:
Bottom line - gifs are not meant for displaying images, especially when it comes to image quality, but for simpler icons, animations, and elements.
There are lots of other image formats available, but they are less relevant for use on websites.

Tip - For those who use Photoshop, I always recommend comparing image weights using Save for web and devices between the different formats (there is a preview of the image weight before saving the file).

Rules of thumb for selecting image formats

6. Proper use of Thumbnails

Thumbnails (previews) are an important and even critical component of some sites - especially gallery-based sites and commerce sites. Thumbnails ("Thumbnails" by Google Translate…) can be great on the one hand but significantly sabotage the site and user experience on the other.

The most critical thing in using these images is to maintain a reasonable quality and weight as low as possible. In large commerce sites that rely on thumbnails to display category pages and product previews, this fact is especially important. Did you know that every second of delay in loading the site costs Amazon $ 1.6 billion a year? Much of the loading time on such sites is the images. 

True, most of us can only dream of having a site of this magnitude. But you know - big changes start from the bottom up and small ones. The sooner we address the better.

Tips for using Thumbnails correctly

It is highly recommended to create a thumbnail for the thumbnail and a larger image for the product page itself. Do not use the big picture as the thumbnail! This will load several times the load of the site, especially when there are many thumbnails on one page. In various CMS systems, you are automatically exempt from this issue.

When it comes to image optimization rules, it is advisable to invest more in large images rather than thumbnails. For example - do not include the thumbnails in the Image Sitemap (extension below), in some cases do not even set ALT tags for them. The ambition is that Google will index the big pictures at the expense of the thumbnails and not the other way around.

It is recommended to set Image Title to Thumbnails, which describe the product in a few words and in general what the surfer is going to see after clicking on the image.

If each product category page has many products (say over 30), it is recommended to use a Lazy Load script that loads the images only when the surfer scrolls to the area where they are.

7. Use of wrapping text

Usually, the images come to serve the text and not the other way around. But as far as image optimization and Google image promotion are concerned, and if the site is a net based on images, it is very worthwhile not to neglect the matter of texts, even if it is basic stuff.

For those who want to maintain a clean and minimalist a look as possible (for example on a photographer's portfolio website), it is recommended that he at least define the following on every page that has an image:

8. Sitemap for photos

Image Sitemap (image-sitemap.xml) helps Google to read and index our images on the site better. Similar to a standard XML sitemap, a sitemap of images can be submitted using the Search Console, in the area of sitemaps.

Add a Sitemap in the Search Console

A sitemap of images is especially useful when using all kinds of galleries with scripts and various effects - which Google has a hard time scanning conventionally.

There are some parameters for using sitemaps of images.

How to create a sitemap?

WordPress - As usual if you work on WordPress, your life is easy. The Udinra All Image Sitemap plugin closes the corner for you. All you have to do is install the plugin, mark some V in the settings, create the sitemap, and launch it to Google through the Search Console.

On any other platform - it depends. If there is no Out of box solution like a plugin etc, this can be done using Screaming Frog.

The frog can help you produce a sitemap of images easily. The only problem - it will not update automatically (unlike a plugin) and must be refreshed from time to time.

How do you do that?

A full scan of the requested site must be performed and then in the top menu of the software go to Sitemaps -> Create Images Sitemap. What you will receive is a kosher XML file to use and launch through the Search Console.

9. Encourage photo sharing

If you boast a lot of use of original images (whether a physical image or a graphic element) and the images are the main thing or at least an essential part of the site, it is very worthwhile to encourage users to share the images on social networks and make it easier for them to do so.

As usual, I have practical tips for the WordPress platform, in other systems I recommend using a programmer or check if there is a dedicated plugin for it.

WordPress has 2 nice plugins for this purpose:

10. Image reduction and optimization tools

TinyPNG - an excellent service that allows you to compress images online with a particularly convenient drag interface. They also have an API that allows you to work in larger quantities and automatically, and also a great plugin for WordPress that allows you to compress all the images on the site - requires the use of their API (free for 500 images per month).
Fotosizer - nice desktop software that allows you to edit images in large quantities - not only compression but also the reduction of dimensions, adding watermarks and various effects to images and many other nice features.


You have just understood the importance of optimizing the images of a website. However, if you want to know the current state of your site, you can do it for free, thanks to Semalt's SEO consultations.
Semalt will help you to identify SEO problems related to your site. In addition, with Semalt Experts you can easily improve the performance of your online business at a lower cost.