This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
69
How-to 14 min read November 26, 2019

Full guide for optimizing images on the site

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.

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 :)
#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.
Image quality
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.
Image size
#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.
Google image search

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.
1
Compressor is a free service, but there is a limit on the size of the downloaded file at 10MB. Compression options are possible with loss and without loss of quality. In the latter case, the function is available only for JPG and PNG formats. Using this service, up to 90% compression is possible.
work principle of image Compressor
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.
Image compression via Kraken
Similar services TinyPNG, JPEGMini make files smaller, but mainly using lossy compression, which reduces image quality.
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 image compression
There are analogues for Windows: FileOptimizer, Online interface, pngquant.
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.
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.
Google PageSpeed Insights image optimization

How to optimize images on the page?

#1

File name

Go pro hero 5 black front
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"
#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.
#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.
Image placing example
#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>
#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:


  • 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.


I recommend using key queries in the description and do not forget about the information content. Give a capacious and well-describing image-picture (usually alt consists of 125 characters).


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.
Image alt text example
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:
Image sitemap example sitemap-image.xml
#7

Microdata markup

Add microdata ImageObject. By adding custom tags to your images, you help search engines distinguish between content and display it in an appropriate and useful way.

Microdata Embedding Example.
#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:
Image indexing in Google
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:
Google search by images
#2

Look for pictures in free photobanks and improve them with photo editors.

Another way to create a unique picture is to find the image in any photobank (for example, Unsplash) and change it a little in any photo editor (for example, Canva). Canva contains many layouts and elements, some of which are free. Just combine several images with these elements.
How to create a picture in Canva
#3

Reddit

Reddit users consent to the public access to their content, which they publish on the site. Moreover, it is unlikely to see these pictures on similar blogs and social networks.

Reddit categories
For example, if you need a picture with a cake, open the DessertPorn section.
Dessertporn subreddit
  • We put sorting by popularity. The default is "Top for all time", I advise you to leave it that way.
Top popular posts on Reddit
  • Select a picture.

If you installed Reddit Enhancement Suite, you can easily view full-size images without opening it in a new tab. Here's how it works:
How to open full-size picture using Reddit Enhancement Suit

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!

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits