Ways to quickly compress images, tips for filling in meta tags and answers to frequently asked questions: how many images do you need for SEO, minimum size, quality and format.
In terms of impact on users, an image page is better than a canvas of text. Pictures help to better understand the meaning, break text canvases into easy-to-read blocks.
On the search engine side, images are important for SEO. They can bring additional traffic from Google.
In this article, we will analyze how to properly arrange images for SEO in order to make them useful, not slow down the loading of the site and get additional traffic. We advise you not to take all recommendations on faith, but to test and verify on your own experience.
Requirements for pictures: quantity, size, uniqueness
What images to select for placement on site pages.
Quantity: is one image per page enough for SEO?
We have not come across information that the number of images placed on the page somehow affects the position of the site. If you know something about this, share it in the comments.
But the search engine perceives the picture differently – for it it is a combination of factors, which include, among other things, different versions of this image.
According to Demi Murych, based on this understanding of the image, it is desirable to have at least 12 images to reach the top – more precisely, 12 variants of one image. They show the same thing, but have different formats and perform different functions:
- the original and three previews for it for mobile devices – that’s four;
- duplicating these four images with an aspect ratio of 16: 9 – a total of eight images;
- another duplication of these four images with an aspect ratio of 4: 3 – all together it makes 12 options for images.
There are two ways to inform Google about the existence of a preview:
- arrange micro- markup ImageObject ;
- indicate links to these images side by side via the link attribute of the tag.
After that, the search engine will index these previews and use them in search results.
Quality and size: what pictures to place on the site?
When talking about image quality, they focus on its resolution. This is not entirely correct, but it is difficult to define quality in any other way. Usually, higher resolution images look much better and are more popular with search engines.
The image quality should be higher than that of the competition. The minimum bottom border is 1080 px in height. The minimum preview size is 640 px wide. The standard minimum set for the example: a 1920 px wide picture and three previews for mobile platforms – 640, 920 and 1220 px.
On the other hand, if you post a large number of huge, high-quality images, you may find that pages are falling in the SERP. As it happened in the experiment of Demi Murych: he placed images of about 20,000 px on the pages, as a result, all these pages began to sag. The bot indexing pictures took up the entire gigabit channel, and another bot for indexing html could not get through to the project. This situation is more likely to threaten photo stocks, websites with a portfolio of designers or photographers.
Uniqueness: should the pictures be your own or can they be taken from the Internet?
It can be expensive to order photo shoots for each new product, as well as to have a designer on staff to illustrate articles. It remains to use images from Google search results. Could this harm the site?
From an SEO perspective
Reboot Online conducted an experiment with photographs: they suggested that if the originality of images is of great importance to Google, then, other things being equal, sites with unique images will be higher in the search results than similar sites with duplicate images.
The experiment lasted three months, as a result, the positions of sites with unique images were higher than sites with duplicates. Only unique photos appeared in the top of Google Images search results by a fictitious request.
SEO expert Mikhail Shakin believes that non-original photos can be used on product cards, the search engine is loyal to this: “It is not at all necessary for the product cards to be completely unique. Often, cards on many sites are filled with the same content from the manufacturer’s site. In such cases, not uniqueization will help, but competent internal optimization combined with good behavioral factors and quality links.”
If possible, take original photographs, order covers and illustrations from designers. If you cannot photograph each item of the assortment yourself, work on the uniqueness of the product card through the text of descriptions, reviews and reviews.
Fight against theft of your images using the IPTC standard. You need to write meta tags inside the image with attribution. The minimum number of parameters that can be configured for autocomplete:
- By-line, Artist, Creator – any of these tags.
- CopyrightNotice – link to the license and description of the license.
- Source, Credit – Link to your site or image source.
According to Demi Murych’s experience, if such a picture is copied from you and the tags are not removed, in the eyes of the search engine you will remain the source of the image and even get a positive effect. Even if the tags have been removed, you will remain the source, because your tags are registered.
From the point of view of the law on copyright
The answer to the question whether it is possible to use pictures of someone else’s authorship depends on the purpose of use:
- Citation for educational or informational purposes
You can use it without asking permission from the owner, but you need to link to the author. The photo must be originally published in the public domain. - Taking advantage, commerce
By agreement with the author. If the license for the photo stock indicates permission for commercial use, then it is possible without demand. Commercial use will be considered not only the placement of photos of goods, but also other pictures on the site of a commercial project. For example, article covers that are needed to drive sales.
Typically, product photos can be obtained from the supplier. In this case, the owner of the online store and the supplier agree on the use of images on the site and no one has any complaints. But if the supplier does not have photos, you need to do your own photo shoot or buy the rights to use other people’s pictures.
There was such a case: a website developer for a furniture store from Perm downloaded a photo of similar products from a furniture store. The store owners noticed this and sued. The Intellectual Property Court ruled to pay a huge compensation for the use of 82 photographs. Compensation was recovered from the owner of the Perm store and the site’s domain administrator who posted the photo.
If you download a picture from a photo stock to post it on the site, check the list of permissions in the license for use. Sometimes people upload other people’s photos to stocks, and the real author does not suspect that his picture is in the public domain. To check, it is better to do a search by the picture and see if the photo is posted on another stock from another author.
We examined in detail the copyright for images together with Daria Tretyakova, Master of Private Law: “Legal advice : where to get pictures so as not to be sued, and how to protect your copyrights to images.“
If you need a photo of a random person, you can generate a portrait for free in the service using a neural network , they look very natural. Personal photographs of real people can be taken only with their consent, even if they are posted on social networks for everyone to see.
Topic: how does image content affect SEO?
The picture should organically fit into the content of the page and complement it – this is important both for users who look at illustrations in order to better understand the topic, and for search engines who have learned to recognize what is in the image.
For example, in order for an illustration from an article to be included in a snippet of mobile search results, you need to select an image by which you can easily determine the main request of the page. Here is a good photo, sneakers take up most of the picture, are in the center and are easy to read.
Most likely, the search engine has a special attitude to those pictures that it can attribute to prohibited topics: pornography, extremism, and others. It also includes typical medical pictures, such as photographs of organs. The search engine can mark the page as unsafe content, and if the user has Safe Search enabled in the browser, he will not find this page in the search results.
Location: Does it matter where the picture is on the page?
The most important image is best placed at the top of the page, as written in Google Help. Anything at the start of the page carries more weight, including keyword titles and links.
How to optimize images correctly
Quality images weigh a lot. It is necessary to find a balance between fast loading of the image and good quality so that the user sees a clear, beautiful photo, and the site does not slow down due to heavy illustrations.
Optimizing images to speed up loading is not a one-time event. If you order image compression from a third-party freelancer, he can download all the images from your site, run them through optimization services that compress the file, and upload them back. This will work, but as long as you do not upload new unoptimized images, as you did before.
We propose to independently figure out how to optimize images for the site.
How to choose the best picture file format?
The aspect ratio depends on how much you can compress the picture while maintaining its quality.
Some optimizers advise to give preference to vector formats, since vector images do not depend on the resolution and scale and are suitable for display in high resolution. If the image consists of geometric shapes – logo, diagram, icon, text, arrow – use the vector SVG format. For photos and complex illustrations, you need to choose something else.
Commonly used for pictures are generic JPEG, PNG and GIF . According to statistics for 2019, JPEG is used much more often.
In addition to these formats, there are promising, but less common, we will dwell on them in more detail.
JPEG 2000 format
JPEG 2000 or jp2 is an enhanced JPEG. When compressed, the picture is clearer. If we compare images of the same quality, a JPEG file will weigh more than JPEG 2000. Unlike JPEG, the new format does not appear at high compression ratios in the form of a grid of 8×8 px blocks.
However, due to memory requirements, it has not become widespread. According to caniuse.com, JPEG 2000 is currently supported by a small number of browsers:
There are more common formats with good compressibility.
WebP image format
WebP is a graphic image format that appeared in 2010 as an alternative to PNG and JPEG. Supports transparent backgrounds and animations. Compresses Better – Retains the same image quality at a smaller size.
According to a 2019 study, WebP is more promising than PNG and JPEG in terms of quality-preserving compression. But at that time, few sites used the new format, primarily this was due to the fact that not many browsers supported it. I had to adjust the pictures for several options.
You can also read: How to use WebP to optimize images on your website?
In 2020, according to the caniuse.com website, WebP is supported by the following browser versions:
There are more of them, but there are still users on older versions, so the webmaster can configure a script that will check the browser for WebP support and return it if available.
Picture format AVIF
AVIF (AV1 Still Image File) is an image format based on the AV1 frame compression library.
In this example, for acceptable photo quality, the WebP file size is almost half the JPEG size and the AVIF file size is less than half the WebP size.
According to caniuse.com, the format is supported by default in the new Chrome, but other browsers do not work with it yet:
AVIF is a promising format, but for now it’s better to use the same WebP, it is supported by more browsers.
How to customize the choice of picture format by the browser?
It’s up to you to decide whether to create multiple versions of the same picture for the sake of economy. Usually it is advised to customize through the picture tag, for example:
<picture>
<source srcset="img/photo.avif" type="image/avif">
<source srcset="img/photo.webp" type="image/webp">
<img src="img/photo.jpg" alt="Description of Photo">
</picture>In this case, the browser will load the first image it supports. If the browser does not understand picture, then img is specified for it by default.
But according to Demi Murych, you should forget about the picture tag , if you seriously engage in technical optimization of the site. If you start to form with the picture tag the same as with the img tag, this will lead to at least three times the number of nodes in the DOM tree for each image. Each node in the DOM tree is a waste of memory and slowing down scripts, and for many sites the upper bound of the DOM tree is already above the optimal value of 1500 nodes.
How to compress an image?
You can make a picture easier if you optimize it: compress, reduce the size, color palette, remove metadata. But you shouldn’t sacrifice image quality, you need to find a compromise between file size and artifacts arising from compression.
Reduce size
If the page contains a small image that should not be enlarged on click, it makes no sense to download it in a huge resolution.
You can reduce the size using tools, for example:
Reduce palette
You can process the image by reducing the number of colors used. The picture will store fewer bits per pixel and will also weigh less.
With this optimization, shades may not be rendered as clearly, but if the picture is in a small size, it will not be noticeable. How much you can reduce the palette depends on the specific picture. Photos with sky, waves, gradients require more colors to show all the gradients.
One way is to reduce the “bit depth” of the image. This is what a PNG image looks like with a reduced palette:
Convert GIF to Video
If the animation is long, it can weigh a lot. It makes sense to convert such a GIF file into a video.
Usually choose the standard MP4 format. There is a relatively new WebM, in which files weigh less, but not all browsers support this format:
Sometimes this format change is justified: in this example, the GIF file weighed 3.7 MB, converted to MP4 was 551 KB, and the WebM version was only 341 KB.
Examples of tools to convert GIF to video are FFmpeg, Online-convert, Convertio, Videotogiflab.
Remove unnecessary metadata
After saving the picture in graphic editors, for example, Adobe Illustrator, it is left with XML-markup with metadata. They are not needed for work, they can be removed.
You can also remove EXIF from photos- information about geodata, shooting date, camera.
Compress file online
Examples of online image optimization tools: PunyPNG, Compressjpeg, iloveimg, Compress JPEG, TinyPNG, Pngquant, Optipng, Jpegtran.
How to set up responsive images?
Responsive pictures are those that display correctly on different devices with different screen resolutions.
Two more attributes can be specified for the src tag: srcset and sizes.
The srcset attribute contains an array of images with a description of their dimensions in terms of width or pixel density. The browser encounters such an image and chooses which size of the suggested images to show to the user. It depends on the conditions the user is in: type of device, screen resolution, internet speed.
Example:
<img src="/img-1920.jpg" srcset="/img-640.jpg 640w,
/img-920.jpg 920w,
/img-1220.jpg 1220w" alt="">A clear rule that works for Google: The browser always shows what’s in srcset, and the bot always indexes what’s in src.
Therefore, you need to put the largest high-quality picture in the src attribute, and several small previews in the srcset attribute. This will add a good picture of maximum quality to the index. In addition, it gives independence from java scripts.
How to set up lazy loading of images?
The scores in PageSpeed Insights are not influenced by the quality and volume of images, but by how much load they create. It can be smoothed out with the Lazy load implementation.
Delayed or lazy loading of images means that images will not be loaded immediately as soon as the user has entered the page, but as needed – by clicking on the preview or by scrolling to the image, depending on the setting.
At the same time, it is important to make sure that the search engine indexes not a stub or a preview, but the largest and highest quality picture.
The img tag has a decoding attribute. To implement lazy loading, the decoding = async attribute should be specified by default, it signals the browser that the image can be loaded asynchronously and should not affect the main rendering thread of the page.
Example of correct code for Lazy load with decoding = async attribute:
<img decoding="async" src="/img.jpg" alt="">
<img alt="Lazy Tester" src="hiRes.jpg" data-srcset="lowThumb.jpg 100w" srcset="image.svg 100w" sizes="100vw">The img tag on the second line contains the basic markup for proper lazy load:
- The src tag contains the highest resolution picture.
- The data-srcset contains the original preview, in the example it is a 100px wide image. Attributes starting with data are custom ones, they can be entered in any number, and specify whatever we need.
- The srcset contains a preview.
If you are using lazy loading and want to get organic traffic, you need such a layout.
One more thing: at the beginning of the download, until the picture appears on the screen, the browser skips where it should appear and renders the content below. He doesn’t know what size the area should be left for the picture. At the same time, he loads the picture, learns about the size and fits it into the page. This may cause the layout to shift.
Such jumps of the layout during loading are measured by the characteristic CLS- Cumulative Layout Shift . Google is now interested in it because it is part of the relatively new Core Web Vitals metric that measures user experience.
Layout designers should set aside an appropriate area for the image, specifying its exact dimensions or proportions, so that the layout does not jerk when loading asynchronously.
How to optimize CLS?
You can check the page load speed and many more parameters in Site Analysis. The service will audit the site by 70+ parameters, find errors and give hints. In it, you can also check the internal pages of the site, as well as monitor the positions in the search engines.
How to fill in SEO attributes of images?
Search engines treat an image as an img tag with a src attribute containing the image itself and an alt attribute containing a description of the image. The image may also have a title with an additional description.
You shouldn’t use the figure tag for pictures, as figure signals the search engine to perceive this object in isolation from the page content.
Alt attribute
Alt is the description of the image. Alt gives the search engine useful information about the subject matter and relevance of the image. It should contain a textual description of what the picture is about, what is shown on it. Alt should be such that if you remove the image from the page and put the attribute text instead of it, it will organically fit into the context.
How do I fill in the alt for an image?
What should the alt image be:
- Describing the content of the picture.
- Associated with text around.
- Unique for every picture on the page.
- Formulated in the simplest possible Russian language so that Google can interpret it unambiguously. You can check if Google understood the alt text in the tool.
- Not too long, Google only parses the first 100 characters.
- No keyword spam.
- No repetitions of the main key in every alt of all images.
- Not duplicating the page title or article title.
Alt of the image, duplicating the page title, signals to search bots that the image should be ignored, it is needed for decoration. If this is news and there is no goal of getting into Google Images, you can do so. If you want to get traffic from Google Images, it’s better to make the image part of the content, let the bots know that it helps to reveal the meaning.
Unsuccessful options:
No text in alt – img src = “sobaka.jpg” -Perespam – img src = “sobaka.jpg” alt = “dog puppy doggy small dog retriever labrador wolfhound setter pointer dog food cheap dog food dog food”
A good option:
Description of the picture, from which it is clear what is happening on it – img src = “sobaka.jpg” alt = “Labrador dog brings a stick to the owner”
What to do for multilingual sites, advises John Mueller: “We allow using the same picture (from one URL). As for the Alt attribute, it must be localized, that is, translated in accordance with the language of the page where the image will be used. “
Title attribute
Title is also a description of pictures, but for users. It is displayed when you hover over the image. It is better to write a short phrase in the title that explains what is happening in the picture. But in general, filling in this attribute is not necessary – it does not affect SEO, it can only be useful to readers.
File name
The Google Help says that the name of the file is also important, so you need to rename files before downloading . The title can serve the same function as the caption headers, so sobaka.jpg is better than IMG00023.JPG because it conveys the content of the image.
The title should be written in English or in transliteration, use hyphens instead of spaces and underscores.
So, an optimized image that will be useful for your site’s SEO should be of high quality and large, separate previews are needed for mobile viewing. It is better to download images asynchronously, compress the file with maximum quality preservation and select the format for the browser. The alt tag should contain keywords and be relevant to the text fragment that surrounds the picture, the file name is also important.
Add some tips in the comments: how do you optimize images for your projects?
