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.
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.
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.
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.
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”);
Fig. 5 – Google image filters by licenses
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;
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.
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.
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.
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:
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:
- 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.
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.
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.
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.
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”.
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.
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.
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.
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:
- 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.
- Good quality, fast loading, visual appeal and conveying meaning these are the pillars on which the illustrative content is based.
- 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.
- 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.
