SEO optimization of images on a website affects both the improvement of the entire page's output and the likelihood of getting to the top of image search results.
The content part of SEO image optimization - affects the results in image search
To evaluate the content of images, search engines rely on 3 tools: studying the text next to the images, analyzing the objects in the images using algorithms, and reading the SEO attributes of the images and the file name.
To get to the top of image search results: you need to correctly specify the Alt text, assign a suitable name to the files and add images to those places on the page that they illustrate. Also, the images must be unique.
Technical part of SEO image optimization – affects SEO positions of the entire page
The faster the page loads as a whole, the more likely it is to be in the top of the search results. The loading speed is affected by both the quality of the site code and the organization of its technical platform, as well as the amount of content required to load. Accordingly, if the images on the page are small in size, the page will load faster.
To do this, you need to optimize images technically: choose the right format, select the optimal resolution and achieve the appropriate quality using image compression in special services.
Step 1: Place images in appropriate places on the page
High-quality and relevant images are not just an aspect of image SEO optimization. They are the essence of the content itself on your website pages.
Choose images that illustrate the content of the page or add mood to the design. For SEO optimization of images, it is important that the text next to the images is related to the picture.
Step 2: Make sure the images for your website are original
Search engines prioritize unique images. If you take your own photos or hire a digital artist to create illustrations, there will be no problems with SEO.
To check the originality of your images, you need to use the Google Images service . Then select “image search” and upload your image. In the search results, you will see similar images. If there are many similar images found, your images have no SEO potential.
Google Image Search
But you can further modify your stock images. Although the effect of such actions is minimal, you will still achieve a better result than without any changes at all.
The easiest ways to change pictures are:
Changing Images for SEO Optimization
Crop and mirror. Crop the image and additionally flip the image horizontally. Be sure to preserve the composition and plot of the image when cropping the image and make sure that individual elements (for example, the text of the inscriptions in the background) are not read as inverted. Users will notice this immediately.
Changing Images for SEO Optimization
Color correction, mood filters and artistic filters. Such photo editing will give a result if the image is radically different from the original. One of the options is a complete change of individual colors of the image to other colors. To do this, in your graphic editor, you need to select a color area and change its hue.
Changing Images for SEO Optimization
Adding or removing objects from images. For optimization purposes, it's best not to do this - the result is unlikely to be ideal, and the naturalness of the photo will suffer. Such changes usually occur when you, for example, add product photos to stock images or mockups.
Step 3: Assign SEO attributes and name to images for your site
Alt text is a text description of an image on a website. Search engines use it to evaluate the content of images. When a user searches for images on Google, it is the alternative text description that indicates whether the search engine should show the image.
Display Alt text
Users will also see a text description from the alt text if there are problems loading images on the page.
In short, the requirements for alternative image descriptions are as follows:
The length is no more than 100-150 characters. The description itself can be longer, but search engines analyze exactly this first number of characters.
Accurately display the meaning of the picture. You must describe in simple words what exactly is shown in the picture. For example, “Interior design with peach-colored walls and white furniture.”
Without repeating the text from the page title. In this case, search engine bots will consider the image useless and ignore it.
Uniqueness of each description on the page. Search engines will evaluate graphic content as diverse, and therefore useful.
No keyword spamming. Don't repeat the main topic word of the page in the description of the image on the site several times. For example, "interior with peach walls, stylish interior, interior with white furniture."
You can use the same images on different language versions of one page, but you need to prepare different alt text for them. It should be in the language used for the text content of the page.
The Title attribute of an image does not affect SEO. It is useful in a practical sense and affects the user experience of the site. When a user hovers over an image, an additional explanatory caption, Title, appears.
Image Title Attribute
The name of the image file. The name of the file itself also carries useful information for search engines. Google recommends changing the file names to readable ones that reflect the meaning of the content before uploading images to the site. The text should be written in Latin with hyphens instead of spaces. For example, instead of “img02879791.jpg” you can use the text “interer-s-persikovymi-stenami.jpg”.
Let's look at real examples of how to correctly assign names and Alt text to images on a website.
Correct image description for SEO
Name: zavarivanie-chaya-puer.
Alt-text : Proper brewing of green pu-erh tea at home.
Correct Alt Text for Image
Name: posadka-pri-igre-na-gitare.
Alt text: Sitting position when playing classical guitar using a bridge.
Example of an alternative description
Name: tattoo-cvetok-na-pleche.
Alt text: Flower tattoo on the shoulder in a minimalist style.
You may have noticed that the optimal title format is a simple 3-5 word title of the image object.
For Alt text, the best word order is: name of the object + its unique quality + conditions of circumstances.
Step 4: Choose the best image format for your website
An image format is a type of data storage in an image file. Each format has a separate file extension type. For example, *.png, *.jpg, *.webp, *.svg. Different formats have their own advantages.
PNG format provides better image quality. Bu namibia phone number material the size of this type of images is much larger than other file types.
The JPG format uses compression algorithms, so the size of the resulting files is smaller. At the same time, the image quality remains acceptable.
WebP format offers modern compression algorithms, with them images can be extremely small in size with acceptable quality. WebP is not yet supported by all browsers (especially the WebP v2 format).
Difference in image formats
Depending on your tasks, choose the appropriate image format. You can also combine several formats on one page.
PNG – if it is important to demonstrate the content in maximum quality. For example, on the website of a photographer or interior designer.
JPG – if you just need to show the content in normal quality. This will not affect browser compatibility.
WebP – if you want to achieve maximum loading speed. You need to additionally convert images to this format, since usually content, for example, on stocks is distributed in PNG and JPG formats. To convert images of other formats to WebP, use online converters: Convertio or CloudConvert .
The SVG format needs to be discussed separately. It is used for illustrations, icons, logos, simple geometric graphics on the site. This is a vector format - the image in them is built using geometric figures. All previous image formats are raster. That is, the image in them is formed from separate dots of different colors. Therefore, raster images have a resolution characteristic.
Using SVG images will help to show illustrations in the best quality. Keep in mind that sometimes browsers may not display SVG correctly. On the other hand, vector images can be very small in size, and this will have a positive effect on the speed of loading content.
Proper SEO optimization of SVG images requires additional knowledge and can be difficult on some platforms.
Step 5: Choose the optimal resolution
Resolution is the number of horizontal and vertical dots that form an image.
Horizontal image resolution
Most traffic comes from mobile devices. For Android devices, the most common horizontal screen resolution is 1080 pixels. 1170 pixels is for Apple phones. Therefore, images with a horizontal resolution of more than 1200 pixels are redundant for mobile devices. If you are making a site primarily for mobile devices, focus on this width as the maximum.
A horizontal resolution of 2000 pixels is enough to view content on a computer (even if the image takes up the entire visible area of the screen). This size is dictated by the most common computer screen resolutions - Full HD with 1920 pixels horizontally and 1080 pixels vertically.
Vertical image resolution
To select a vertical resolution, you need to start from the amount of screen space that the image occupies. If the image is entirely located on one screen, then the maximum vertical resolution should be no more than 1000 pixels.
These ~1000 pixels are formed by subtracting the area of the browser window controls and the computer taskbar from the 1080 pixels of Full HD resolution.
Rules for choosing image resolution
In your website layout, when working on the design, you will see what area the image will approximately occupy in the desktop version. By determining the image area, you will understand the necessary resolution parameters.
For example, you have three hover cards on your site. They take up half the screen vertically and the entire area horizontally. This means:
the horizontal resolution of images should be no more than ~670 pixels (the entire area of 2000 pixels should be divided into three objects).
The vertical resolution of images should be no more than ~500 pixels (half of the entire 1000 pixel area).
Next, depending on the desired result (the beauty of the site or its loading speed), finally select the resolution.
100% for the best image quality (in our case it is 670x500 pixels).
85% for balance between speed and quality (in our case it is 570x425 pixels, i.e. 670x500 * 85%).
70% for the fastest website loading (in our case it is 470x350 pixels, i.e. 670x500 * 70%).
If your site will be viewed primarily on mobile devices, you need to multiply the image resolution approximately twice for maximum image quality on the site. This is due to the fact that in the mobile version of the site, the cards will be located one above the other.
The calculation looks like this.
The horizontal size is 1200 pixels. Vertically, 500 pixels should be multiplied by the ratio of the old and new resolution (1200/670 * 500 = 895 pixels). The final
