Guide on How to SEO-optimize images:
Pictures as an SEO promotion tool are underestimated by many SEOs. In vain. Relevant images allow you to get additional traffic from Google and Yandex, and also significantly improve the behavioral characteristics of the audience.
Relevance, resolution, technical features:
Properly selected images multiply the visitor’s interest in the content and improve behavioral factors. To get bonuses in SERP, it’s not enough just to add a picture to the article. To make it useful for the visitor and crawler, it must be carefully selected for the content of the page. It is also impossible to place images “as it happens”. The picture should be exactly where you want to illustrate the example. You can’t use other people’s images from Google Pictures.
The selected image must have a sufficiently high resolution, be clear and not contain any defects. In pursuit of uniqueness, some SEOs mindlessly crop other people’s images, change their size and try to make them “original”. This approach will not bring anything good: framing, most often, does not make sense, since the pictures lose their visual appeal and lose important details.
It is equally important to make the illustration visible to search engines. To do this, we will use some attributes of the tag <img>, as well as micro-markup. It is important to optimize the resolution and format of the pictures, bringing these characteristics to a common denominator. There is a lot of work to be done!
Why do I need images on my website?
I know novice webmasters who add images to a page just like that. The image should help the user: to reveal a complex process or to demonstrate certain characteristics.
It is not always possible to choose relevant images, especially when it comes to very abstract topics. Nevertheless, even in this case, you can create or find a unique picture that will be useful to the audience. Either way, absolutely every image on your website should have a clear purpose.
Originality
Ideally, any picture you use on your site should be original. In practice, this is not always the case: most beginners simply do not have a budget for original visual content. In this case, it is better to create illustrations yourself: make your photos, draw pictures in graphic editors, and use free images.
The danger of non-original visual content is that pessimistic measures can be applied to the site that hosts it. If your site is entirely or half composed of someone else’s content, it will never get high positions in the SERPs. Most likely, it will become less noticeable in the search results.
On my websites, I try to use only original images, but if there are any doubts about these, I use the Google Images service.
To determine whether an image is unique or not, upload it to the search:
I want to note that this method does not always help to find the original, especially if the copy was artificially unique. In the latter case, you can use smarter services, for example, TinyEye. It even finds heavily altered copies of images, such as those reflected vertically and horizontally.
Copyright
By using images from other sites without permission, you are violating copyright law. Even if you do not receive a corresponding complaint from the owner of the site or the author of the photo, the site will still suffer. At a minimum, it will become less noticeable in the issue, as a maximum, it will leave it forever. Therefore, it is better to initially fill the resource only with original content. If you can’t pay for a photo, you can find the right-to-use images. To do this, open Google and enter the search phrase we are interested in. Next, select the “Tools” item and specify the following settings:
You can find pictures with an open license for further use using photo stocks. For example, I regularly use the Unsplash libraries. On this stock, you can find beautiful and relevant images that can be used for commercial purposes, including on websites.
Tag attributes <img>
We add pictures to the site not only for visitors but also for crawlers. It’s important to provide search bots with as much textual information about the image as possible. To do this, you need to use the <Title>, <Description>, and <alt> tags. A small life hack: the name of the picture file itself should also reflect the content of the image. In other words, if the picture has the name DSC389604.jpeg, it is better to replace it with “human-understandable“. For example, bolshoi_teater_vid.jpeg. It is better not to use Cyrillic in the file name, since not all CMSs work with it correctly.
Resolution, quality, format
Many people forget that excessively high resolution creates problems with the speed of loading the page for the end visitor. We must not forget about the limitation of the size of the disk quota on the hosting. You always want to balance the quality and size of the image. It is necessary to take into account the purpose of the picture. Let’s say it depicts a lot of small details, and the image itself is of small resolution. In this case, the picture will be unreadable.
The quality of the pictures is a factor that should also not be underestimated. If people come to the site for information, and not for a purchase, then the lack of image quality can be justified. If we are talking about an online store, the low quality of pictures is already becoming unforgivable. Poor image quality negatively affects the number of sales and the trust of the audience. To store images, most Runet sites use a proven JPEG, but abroad there is now a boom in WebP – this format was proposed by Google back in 2010.
WebP is more advanced than JPEG, if only in terms of balance between compression and quality, in addition, it supports lossy/lossless compression. The main drawback of this format is that the output of the image necessarily requires Support for WebKit, which is not available in all browsers. Be that as it may, In Russia, WebP never received such a mass distribution, although there were all the prerequisites for this.
- JPEG is the preferred option for most tasks. Great for both heavy and light images.
- PNG is useful when you need to use the alpha channel. For example, to maintain transparency in the logo or icons.
- SVG is an option for vector graphics. Requires JavaScript or Cascading Tables. With the help of these languages, you can painlessly change the size and resolution of vectors in SVG format.
Compression
When compressing images on your site, you should always remember the final quality of the picture and how it will look on the page. We must not forget about the page load time: this parameter greatly affects the ranking of the site, as well as the behavioral metrics of the audience, especially the “Refusals” and “Time on the site”. You can compress the image manually using any image editor. For example, in Paint.NET, the image is compressed as follows:
It’s easy to compress an image in Photoshop. You need to open the necessary file and select the “Export” section, then the “Save for Web” item. Set the settings so that the final image does not contain artifacts and is easy to read, taking into account the limits of the maximum size. When I need to compress a picture manually, I usually set the following parameters:
- Format: JPEG (most often, if you do not need transparency);
- Minimum compression level – 85%, maximum – 65%;
After compression (open preview), the image should remain clear even at full size. For example, I took an image measuring 2,000 by 2,000 pixels, which weighed 3 megabytes. After manual compression, its weight decreased to 1 megabyte, and the size remained the same.
You can compress images on the site using plugins. When the site is on popular CMS, for example, WordPress, it will not be difficult to find the appropriate plugin. For the same WordPress, there is a cool WP Smush – this is a one-button plugin that allows you to make the compression for all the images that are on the site in automatic mode. If there are a lot of pictures, this process may take several days.
Caching
The easiest way to speed up page loading is by using caching – saving images and other site files to the visitor’s hard drive. Allows you to reduce the amount of data transferred when you visit the site again and reduce the load on the server.
Another way to reduce the speed of page loading is to display only previews on the main page instead of full-size images. This solution looks like this:
Online Tools:
Graphic editors can be replaced by online services. Many of them have long been equal in their functionality with full-fledged graphic packages. Let’s analyze these services in a little more detail. Compress jpeg – the tool allows you to quickly and efficiently compress several pictures at once. The limit is 20 pieces.
Hope you guys like this article, please share it on social media. Do visit Ventsabout for more interesting articles.
