Full guide for optimizing images on the site
Anastasia Vinogradova
SEO Specialist
Pictures attract additional traffic. They affect page loading speed and behavioral factors. With quality optimization, they can improve the ranking of your site in search engines.
Why is it so important to optimize images?
A person often does not read and does not stop his attention on the text. Usually, he "scans" the page. Often pays attention to graphic elements. Based on this behavior, search engines received a number of criteria by which images are analyzed.
They come down to improving the quality of the content in the search results and satisfying user requests. Therefore, in addition to the availability of images on the site, it is important that the images load quickly, be attractive, informative, and of high quality.
After the extended snippet appeared in SERP Google, it became very easy to get to the first page using pictures. Moreover, there are often situations where the picture is displayed along with the content of a competing site.
There is a chance to increase the visibility and recognition of the site using images. To get into such results, you need to conduct comprehensive image optimization. It is important to help search engines analyze the content of the image correctly.
They come down to improving the quality of the content in the search results and satisfying user requests. Therefore, in addition to the availability of images on the site, it is important that the images load quickly, be attractive, informative, and of high quality.
After the extended snippet appeared in SERP Google, it became very easy to get to the first page using pictures. Moreover, there are often situations where the picture is displayed along with the content of a competing site.
There is a chance to increase the visibility and recognition of the site using images. To get into such results, you need to conduct comprehensive image optimization. It is important to help search engines analyze the content of the image correctly.
What are the basic requirements for creating pictures?
In general, the basic requirements for creating images are reduced to the following options: format, quality, and size of images.
#1
Image format
Google can index image types in BMP, GIF, JPEG, PNG, WebP, and SVG formats.
JPEG — use this format for photos;
PNG — for graphics, in other words, for everything that the designer painted;
SVG — for vector images.
New formats have also appeared, such as WebP and JPEG-XR. Their advantage is that they really weigh less, but, unfortunately, not all browsers support these formats yet. For example, JPEG-XR only supports IE, and WebP supports Chrome, Opera, Android. In this regard, I do not consider them. But the choice is yours :)
JPEG — use this format for photos;
PNG — for graphics, in other words, for everything that the designer painted;
SVG — for vector images.
New formats have also appeared, such as WebP and JPEG-XR. Their advantage is that they really weigh less, but, unfortunately, not all browsers support these formats yet. For example, JPEG-XR only supports IE, and WebP supports Chrome, Opera, Android. In this regard, I do not consider them. But the choice is yours :)
#2
Quality
When optimizing images for Google, you should find the optimal solution between the size and quality of the graphics, because, first of all, the content is intended for the user. Make sure the graphics are clear and visually appealing.
A poor-quality image is also considered a picture that does not correspond to its description or is located near a text that is unrelated in meaning.
A poor-quality image is also considered a picture that does not correspond to its description or is located near a text that is unrelated in meaning.
This image fell into the search results for "white dogs", which does not match the actual content due to an incorrect description and text content of the article. More details about how to write an image description will be described later in this article.
#3
Size and weight of images
Image size affects the page loading speed, and that, in turn, affects the page ranking. If you use a lot of pictures on the page, this can significantly slow down its loading. There are many tools for compressing a file without losing quality (I will talk about them a bit later). Using them, be careful — check the original image and the compressed one.
Images must be created in the size in which they will be presented on the site.
It will be easier for the browser to crawl the content of the pages if you specify the width and height of the image in CSS. For retina displays, add 2x images and adjust the display of different sizes of the same image for different screens. Otherwise, for users who open the image on the retina display, all the pictures will be displayed with a visual loss of quality.
Images must be created in the size in which they will be presented on the site.
It will be easier for the browser to crawl the content of the pages if you specify the width and height of the image in CSS. For retina displays, add 2x images and adjust the display of different sizes of the same image for different screens. Otherwise, for users who open the image on the retina display, all the pictures will be displayed with a visual loss of quality.
#4
Placing pictures
For the correct binding of images to your site, store them on your domain or one of the subdomains. Otherwise, users, using image search, will not be able to get to your site: they will see the address of the resource on which the found image is stored, even if it is on the page of your site.
How to reduce the weight of images without losing quality?
Make the Internet faster, and Google will say "Thank you!" Catch a few cloud services for compressing pictures.
2
Using the web interface Kraken, it is possible to optimize one or several files. The web resource image optimization function is available: just enter the site url and get an archive with compressed images at the output.
The service also offers a number of useful features for optimizing graphics, such as resizing images, APIs for web resources, and plugins for WordPress and Magento platforms.
The service also offers a number of useful features for optimizing graphics, such as resizing images, APIs for web resources, and plugins for WordPress and Magento platforms.
3
There is a solution in the form of software ImageOptim for Mac, which works without loss and loss of quality.
ImageOptim can apply compression for JPEG, SVG, GIF, and PNG formats. A simple and convenient interface allows you to compress multiple files at once.
The principle of ImageOptim is to delete metadata such as GPS location and camera serial number. So that you can publish images without providing personal information that adds weight to the chart.
ImageOptim can apply compression for JPEG, SVG, GIF, and PNG formats. A simple and convenient interface allows you to compress multiple files at once.
The principle of ImageOptim is to delete metadata such as GPS location and camera serial number. So that you can publish images without providing personal information that adds weight to the chart.
4
Compression on the server
Gzip: Configure the webserver to compress the JPEG files to the Gzip format.
PageSpeed: For Nginx and Apache, the PageSpeed module is available for compressing data at the server level. Installation recommendations here.
For tracking and analyzing image size, I recommend using the online tools Pingdom and PageSpeed Insights. It makes sense to use both options, but if you need to focus on one, it's better to rely on Google Pagespeed Insights.
Because Google is the one who crawls content and rates your site. Consider an example using PageSpeed Insights. By analyzing the page, the tool provides a list of recommendations about resources that are worth reducing and how much.
PageSpeed: For Nginx and Apache, the PageSpeed module is available for compressing data at the server level. Installation recommendations here.
For tracking and analyzing image size, I recommend using the online tools Pingdom and PageSpeed Insights. It makes sense to use both options, but if you need to focus on one, it's better to rely on Google Pagespeed Insights.
Because Google is the one who crawls content and rates your site. Consider an example using PageSpeed Insights. By analyzing the page, the tool provides a list of recommendations about resources that are worth reducing and how much.
In addition to analysis, PageSpeed Insights provides a tool to compress resources based on its recommendations, including images. But in practice, image compression occurs with resizing and quality degradation.
How to optimize images on the page?
#1
File name
In order to convey the content of the image to search engines, give a brief description in the name of the image file.
It is important to use Latin letters and hyphens in the file name instead of spaces. Avoid such names jzbdfjklJ_KSD5667.jpg, and write in words describing — go-pro.jpg
Note that keywords should be as relevant and describe the essence of the picture as possible.
For example, if you work with an online store and you have a page dedicated to GoPro 5, then the name of the picture should contain a phrase that describes this particular model, and not GoPro as a whole.
In this case, the best file name would be "go-pro-hero-5-black-front.jpg"
It is important to use Latin letters and hyphens in the file name instead of spaces. Avoid such names jzbdfjklJ_KSD5667.jpg, and write in words describing — go-pro.jpg
Note that keywords should be as relevant and describe the essence of the picture as possible.
For example, if you work with an online store and you have a page dedicated to GoPro 5, then the name of the picture should contain a phrase that describes this particular model, and not GoPro as a whole.
In this case, the best file name would be "go-pro-hero-5-black-front.jpg"
#2
Storage
Store images that are similar in meaning in the same directory with the corresponding name. If the site has many images of the same category, for example, photos of phones of the same manufacturer, it makes sense to store such files on the server in one folder with the corresponding name.
For example, site.com/images/clothes/blue-jeans.jpg.
For example, site.com/images/clothes/blue-jeans.jpg.
#3
Location
When ranking images, search engines take into account the correspondence of the image to the query based on the text near which it is placed. Therefore, add text that is meaningfully associated with the image.
Also, do not place important information on the image, as the browser does not scan text in pictures, and thus does not understand its essence.
Also, do not place important information on the image, as the browser does not scan text in pictures, and thus does not understand its essence.
#4
Backlinks
In addition to the text on the page, when ranking, search engines take into account links to images from external resources. Therefore, build external anchor links to images.
Anchor text should match the content of the image.
For example, to build a link to a page with photos of interiors, you can do this:
<a href="https://example.com/ interior/office-design.jpg"> Photo of an office interior design </a>
Anchor text should match the content of the image.
For example, to build a link to a page with photos of interiors, you can do this:
<a href="https://example.com/ interior/office-design.jpg"> Photo of an office interior design </a>
#5
Alt meta tag
Alt tag ( alternative text) is used to describe what is in the image. It plays an important role in image SEO-optimization, and this is why:
Let's prepare an example of alt for this picture with a cake (I hope you are not very hungry) ↓
- If, for some reason, the image does not load, an alternative text comes out explaining what the image is.
- Screen readers use the alt tag to explain the contents of images to visually impaired people.
- Search engines use alt text to properly index the image and then, based on this information, determine the best image for the user's request.
Let's prepare an example of alt for this picture with a cake (I hope you are not very hungry) ↓
What do you think is the best option?
<img alt = "cake" src = "https://example.com/cake.jpg" width = "947" height = "591">
or
<img alt = "chocolate cake with cream cheese garnished with berries and chocolate icing" src = "https://example.com/cake.jpg" width = "947" height = "591">
Of course, the second :) He describes the picture as much as possible.
<img alt = "cake" src = "https://example.com/cake.jpg" width = "947" height = "591">
or
<img alt = "chocolate cake with cream cheese garnished with berries and chocolate icing" src = "https://example.com/cake.jpg" width = "947" height = "591">
Of course, the second :) He describes the picture as much as possible.
Don't forget, spamming with keywords is bad for optimization, in particular for alt images. That is, this text will be incorrect: "chocolate cake chocolate dessert cream decoration recipe."
#6
Sitemap
In addition to the main site map, add a sitemap-image.xml image map:
#7
Microdata markup
#8
Uniqueness
To obtain a more significant result when optimizing images, create not only high-quality pictures but also unique ones. The bottom line is that search engines value original and non-copied content to show users more diverse results in the search results.
Or you can see if such a picture was previously indexed in search engines. For example:
Or you can see if such a picture was previously indexed in search engines. For example:
Google image search
If your search results don't have the same image or only similar ones, then you have a unique image.
Where to look for pictures?
#1
Google Search
Despite the limited market size and other difficulties, website promotion for a specific city is a task that everyone can do. And now let's move on to the practical part, and see how to do this.
The easiest way is to use Google search on images. Please note that Google displays images with and without permission to use.
We filter it like this:
The easiest way is to use Google search on images. Please note that Google displays images with and without permission to use.
We filter it like this:
#2
Look for pictures in free photobanks and improve them with photo editors.
#3
Reddit
For example, if you need a picture with a cake, open the DessertPorn section.
- We put sorting by popularity. The default is "Top for all time", I advise you to leave it that way.
- Select a picture.
Conclusion
To effectively optimize images, you should apply all of the above methods in combination:
1
Save image files in the correct format that search engines index.
2
Specify the size of the visible area of the image on the page.
3
Add unique and useful images to the site.
4
Use image compression tools.
5
Optimize images using the alt tag.
6
Add a sitemap for the images.
7
Embed microdata for the images.
8
Download images related in meaning to the text.
9
Do not forget that images are primarily created for the user.
When creating and optimizing images, be guided by the main principle: the quality and value of the content — this is what is important for search engines. Good luck with optimization!
Speed up your search marketing growth with Serpstat!
Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.
A pack of tools for reducing your time on SEO tasks.
Found an error? Select it and press Ctrl + Enter to tell us
Cases, life hacks, researches, and useful articles
Don’t you have time to follow the news? No worries! Our editor will choose articles that will definitely help you with your work. Join our cozy community :)
By clicking the button, you agree to our privacy policy.