A complete guide to image optimization on the site



High-quality, sensible images are always a good illustration of text. But in addition to working “for the reader,” they also serve another function – to improve the site’s ranking in search engines, if this is not hampered by poor quality or slow loading. To do this, images need to be optimized.

And even though Google has learned to recognize images, optimization is still relevant for all of your photos and screenshots on website pages. Let’s talk about what photo optimization is and how to help search engines correctly identify image content on your web resource.

1. Basic image requirements

Search engines analyze content according to several criteria that help achieve query relevance:

  • high quality;
  • fast loading;
  • informative.

High quality images are designed for user comfort. It is good when the pictures are large and clear, if we are talking about photos – with high resolution. However, they should not be “heavy”, as they will not load well, and the page will want to leave – this already affects the rankings. It is worth using special tools that allow you to compress images without loss of quality, and create a suitable size images. We will talk about them in the section on editing.

To optimize both the mobile and desktop versions of the site is very important the fast loading of pictures. File sizes of different formats are very different. Google indexes JPEG, PNG, BMP, GIF, WebP and SVG image types.

They apply depending on what you’re illustrating the content with:

  • for photos, JPEG is the optimal choice;
  • for pictures or screenshots – PNG (graphic images, pictures with text) or SVG (vector drawings);
  • GIF is fine for moving images;
  • WebP is lightweight, but not yet supported by all browsers

In any case, all of these formats can be converted from one to another.

If you resize images to fit the scale of the page, downloading them at their highest resolution, your browser won’t have to adjust the size of the gadget and slow it down.
You will also need to optimize the loading of images on the site. First, check the storage location. For images to display correctly on your resource, it is better to store them on your domain or subdomain.

Optimizing images, storage on your domain

Fig. 1 – Library files in the admin panel of the PPCSEO site

Otherwise, using image search, users may go to the address of the resource where the picture is located and not the content. It helps to check Google’s search through images or the Tineye service.

Image optimization, image identification

Fig. 2 – Checking the preview of the article Instalending: stylishly about your brand

Content should not only be high-quality and beautiful, but also unique. This rule applies, among other things, to images. Search engines are looking for a variety of material in the output, so do not be lazy to change something in the picture: the background, the number of characters depicted.

The last point can be called the informative image. It is important to match the picture description – it should make practical sense and confirm the clarity of what is described in the content.

Optimization of pictures, matching the photo subject

Fig. 3 – Example of a slider with roses blog about ornamental plants Florium

If the text contains abstract or inaccurate information, then the picture or photo makes no sense.
But the behavioral factors of the site are also affected by the attractiveness of the pictures. This means that the image is pleasant to look at, the frame is well composed, the colors unobtrusive.

Users will often go to pages with these images. If it is a product, it is depicted on a neutral background in close-up, its differences from other positions are visible.

Optimization of images, the appearance of the goods on the site

Fig. 4 – Example of a good image of a product in Koni.ua

2. Searching and editing picture

Finding good pictures and pictures is not difficult. You can do it:

  • through a Google image search (go to Usage Rights, the default checkbox is “All”, set the filter to “Creative Commons licenses”);
Optimization of images, search photos with the license

Fig. 5 – Google image filters by licenses

Optimization of images, search photos in Google Images

Fig. 6 – Search of aphelander plant by images

  • by going to Rеddit, because its users agree in advance to the use of their published materials. You only need to sort the selection by section and date, the categories are on the right;
Search for pictures on Reddit

Fig. 7 – Images of users on Rеddit

  • by downloading the original picture template from a free photobank or photostock. Among the most popular photo stock sites are Free images, Freepik, Pixabay
Search for pictures at Freepik

Fig. 8 – Intuitive interface of Freepik

Let’s proceed to editing. Add visual appeal, crop and improve the image in other ways is easy in graphics editors. In addition to the well-known Photoshop, Canva has become a popular tool. Many of its elements and layouts are free.

Editing photos in Canva

Fig. 9 – Working with images in the program Canva

In this graphic designer, as in other programs, you can apply effects, use text animation, crop and crop photos.

3. Optimizing images for the site

What should be remembered about optimizing images to be noticed by search engines? Of course, images must be placed in the text, which corresponds to the query. Consistency in meaning – an obvious criterion for a well-chosen image.

Optimizing images, the photo meets the meaning of the text

Fig. 10 – Picture of the band on the official site

Spell out in Latin letters a brief appropriate description in the name of the file with the image. It is important to insert relevant keywords. But they should be as simple as possible. The name of the image helps to convey the content of the picture to the users of the site. For example, devushka_hippi_v_shliape.jpg. rather than 052.jpg:

Optimize images, the photo is named by number

Fig. 11 – Example of an article with pictures without titles

You can name the file in the native language – then, when you upload it to the site, the name is automatically transliterated. You can perform transliteration immediately online (f.e., in the service translit-online). Or you can write the title directly in English. Choose the variant you prefer.

To optimize raster images, which consist of pixels, we will save their quality as much as possible. To do this you will have to:

  • either scale the image by cutting off unnecessary pixels;
  • or reduce the color depth to a palette of 256 colors, which halves the weight.

A universal formula will help you determine the weight of the file: Length x Width x 4 bytes (weight of each pixel).

If you want to optimize vector images, which are usually saved in SVG format, we reduce their size and clear them of hidden elements.

Reduce weight without loss of quality you can with the help of programs:

  1. Compressor – reduces the weight of images by up to 90%. Has three degrees of compression: with loss of quality, without loss of quality and manual settings. There are paid and free versions. You can upload images in batch both to the computer disk and to cloud storage.
Reducing the weight of the image with Compressor

Fig. 12 – The Compressor program

2. Kraken – you can change the size of pictures and photos, use the batch conversion of files. There is a function for optimizing pictures, an archive with compressed pictures is easy to get by entering the url of the site and waiting a bit.

Reducing the weight of the picture with Kraken

Fig. 13 – The Kraken program

3. Imagify is unique in that it can be used to optimize all the pictures on a web resource at once. It’s very fast, and it supports JPG, PNG, PDF and GIF files. It can translate WebP files into other formats.

Image weight reduction with Imagify

Fig. 14 – The Imagify program

Google Pagespeed Insights can help compress images on the server. This tool measures the performance of the web resource and can give you advice on improving it.

Compressing the image size with Pagespeed

Fig. 15 – Google Pagespeed Insights program

The next step is to write the metadata for the images.

For the optimization you need the Alt (alt text) meta tag. This not only explains to the users what is shown in the image, if it doesn’t load, but also helps search engines to index the image correctly. This is the name of what is shown in a photo or picture, with a description in 3-4 words.

The allowed size of the alt – 125 characters, so it should be both informative and capacious, containing the appropriate number of keywords. For example, the alt=”two sheepdogs running with a stick” would be more logical for the picture below than the one below, duplicating the title of the article “Leashes, muzzles, and fines: why the new times will come”.

Alt tag doesn't correspond to the content of the image

Fig. 16 – Example of a bad alt meta tag in an article

If we are talking about an online store, where you fill out product/service cards, then it is advisable to specify the name and identifying attribute (name, brand, color or size). This will help search engines identify the image of the product. Below is not the most successful (the inscription “photo 1 Motokurtka” there is clearly unnecessary), but an example viola for a picture of the product.

Image optimization, product meta tag on the site

Fig. 17 – Example of meta tag for motoshop products

In the Title field we write the name of the picture or photograph. This is what will appear to the user who puts the cursor on the picture.

Optimize images, sample blog post image title

Fig. 18 – An example Title for an image in an antique furniture showroom blog

Ideally, the Title and Alt fields should be written differently, but it is better to fill them in the same way than to leave them empty. Keywords that search robots can notice should also be included in image captions.

There is an OpenGraph markup that helps promote content using social networks. It will increase the clickability of links to the site.

Image optimization, social media preview

Fig.19 – An example of a post image with micromarkup

So, with this markup, the post automatically looks neater – the image is filled in the right size, supplemented by a link and a title. Attractive previews will carry traffic from social networks. The easiest way is to use plugins for your site’s CMS.
If you build external anchor links to them, then the text must match the content of the image:

<a href=”https://example.com/ interior/home-design.jpg”> Home interior design photo </a>

THE CONCLUSIONS

So that’s what a checklist for optimizing images on a website looks like:

  1. When searching and processing images, remember that content is created for the user, but must meet the requirements of search engines, otherwise no one will find your pictures.
  2. Good quality, fast loading, visual appeal and conveying meaning these are the pillars on which the illustrative content is based.
  3. If necessary, we can edit (reduce weight, make it unique, keep the pictures in the right format for the site). To promote the content through social networks we install OpenGraph on the site.
  4. Optimize the images by filling in the Title and Alt meta tags for each of them. In the Title field indicate the name of the picture or photo, in the Alt field, respectively, a short description.

If you follow these recommendations, the images on your site will not only offer users a variety of content, but will definitely have a positive impact on traffic.

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Share

Spelling error report

The following text will be sent to our editors: