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.

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.

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

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.

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.

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.

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

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.

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

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

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:

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:

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

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

Install the Reddit Enhancement Suite for the browser.
Open the page and select the desired section.

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.

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!