Content
SEO

How to optimize images: a detailed manual

  1. Home
  2. Blog
  3. SEO
  4. Detailed manual about images optimization
Reading time: 11 minutes
No time to read?
Leave a request
 

For 99.9% of internet users, website loading speed is very important. And in search engines, it is one of the ranking factors. The weight of pictures and photographs significantly affects the loading time of web pages individually and the resource itself as a whole. If the user has to wait a long time, he suddenly leaves the site.

To speed up loading speed, you first need to optimize all images, be it an online store or a one-page website.

What is Image Optimization?

Image optimization (resize) is the process of compressing pictures or photographs to reduce their weight and download speed. Optimization is performed by removing some information from the image file, thereby reducing its size.

What does image SEO include?

  • creating unique pictures (drawing by a designer or buying on photo stocks);

  • spelling out the appropriate name/title (for example, optimizaciya-izobrazhenij.jpg);

  • reduction in size and weight;

  • using Alt and Title attributes;

  • selection of basic parameters for correct display on the page (indents, alignment, etc.).

Image formats

Peculiarities of image optimization of different formats

We are all familiar with image formats such as PNG, JPEG (.jpg, .jpeg .jpeg or .jfif), SVG, TIFF, GIF. There is also WebP. Each of these is for a different type, purpose and size of picture.

GIF image formatThe difference of GIF format is the animation support (several frames replacing each other with some frequency). GIFs are suitable when you want to:

  • not a multicolor picture;

  • simple binary transparency;

  • animation.

JPG image formatThe JPEG format supports 16 million colors and shades. Frequently the quality of the picture is noticeably lost when compressing images in this format. JPEG is good for:

  • photos and full color pictures;

  • contrast images;

  • pictures with lots of small details in different colors.

 

PNGformat for compression is optimal because images are optimized with no loss of quality. PNG8 supports 256 colors, and PNG24 is the same as JPEG with 16 million colors. A distinguishing feature for this format is the ability to set a certain degree of transparency (alpha). PNG is suitable for:PNG image format

  • drawings and images with text;

  • pictures with sharp transitions from color to color;

  • full-color drawings with high precision.

     

WebP image format

 

WebP — this is a relatively new format. Its main features:

  • compression without loss of quality — 25-26% better compared to PNG format (Google data);

  • compression with lossy quality — on average 30% better than JPEG (Google data);

  • map transparency support.

 

PSD image format

PSD — a graphic image storage format created specifically for Photoshop. Files of this type are compressed without loss of quality.

It's suitable for those who work with Photoshop. It allows you to save all layers, effects, and other features in the editor.

 

TIFF image format

 

TIFF — optimal for:

  • images with great color depth;

  • electronically scanned documents.

 

SVG image formatSVG (Scalable Vector Graphics), unlike previous formats, is not a bitmap. It is a scalable vector graphic. SVG is best used when you want to:

animating part of the image.

  • scale the picture without loss of quality;

  • changing the colors of the image elements;

SVG is generally used for icons, logos, and low-color schemes.

 

In the table below we summarized the most important things about the optimization of images in different formats.

Table of images optimization
 

What is the best image format to upload to the site?

  1. Recommendations from search engines — GIF, PNG or JPEG.

  2. If your image is large and has animations — choose GIF.

  3. If you want high-quality images — PNG. But it's important to check that there are no loading issues and that the picture displays correctly on the page.

  4. BMP and TIFF formats are not recommended, this is search engine advice.

How to optimize images on the site for SEO?

When optimizing images, keep in mind that content is primarily for users. Therefore, it is important not only to choose the optimal quality-to-size ratio, but also to look at the appropriateness of using the pictures. For example, an image that does not match its description or is located near text that has nothing to do with it is considered low-quality and unoptimized.

When ranking, search engines take into account the location of the image next to the text. Therefore, it is worth adding visual elements in accordance with the subject of the content and not placing important text information on the picture itself (search robots cannot read it).

To provide search engines with up-to-date information about the content of the image, you need:

  • make a short but succinct description;

  • use latin letters and a hyphen in the name (the search bot cannot read powerful Russian, and does not perceive other punctuation marks well);

  • use keywords in title.

For example: optimizaciya-izobrazhenij.jpg

Web design development

How to register the "Alt" and "Title" attributes? (H3)

Setting title and alt tags "Alt" - An alternative description that is used to indicate what is shown in the picture. The optimal variant of "viola" for an image named optimizaciya-izobrazhenij.jpg might be:

  • "Image Search Engine Optimization" - "Optimizarea imaginilor";

  • "How to properly optimize images for the site" - "Cum să optimizați corect imaginile pentru site-ul".

"Title" is an attribute that also helps describe the image. The text written in the "title" is displayed to the user when he hovers over the picture.

Google search engine

Question: can “Alt” and " Title" be the same ?

Yes, that's okay. Especially if you have a lot of the same type of pictures or photos on your site. Better when descriptions are similar or the same than none at all.

Why is it important to write the "Alt" attribute correctly?

  • In case the picture has not loaded, this alternative text indicates its content.

  • Search engine robots use Alt to index images correctly.

  • Using keywords in attributes has a positive effect on promotion.

Please note ! Keywords can and should be written in Alt , but this attribute should not be a source of spam.

Examples

Correct:

alt = ”How to drink whiskey properly”;

alt = ”What to eat with whiskey, pic.1” (if there are many similar pictures).

Incorrect:

alt = ””;

alt = ”whiskey”;

alt = ”figure 1”.

Important! Alt-a must not exceed 125 characters, including spaces.

How do I reduce the weight of images without losing quality? Optimization Services

is Now a huge number of tools which help to optimize pictures and to convert them from one format into another. Many of them allow to perform optimization, without losing at the same time quality.

1 ) Image Compressor (imagecompressor.com) & mdash; for JPEG and PNG files, it is possible to download up to 20 images for 1 time.

Service for Compression of Files

2) of Iloveimg (iloveimg.com) & mdash; JPG, PNG, GIF. 15 pictures for not authorized users for 1 time. At authorization & mdash; 30. It is possible to load a photo from Google Drive and Dropbox.

Service for Compression of Files

3) Compressjpeg (compressjpeg.com) — до 20 изображений .jpg или .jpeg за 1 раз.

Service for Compression of Files

4 ) JPG Zipper ( of zip.yutex.ru ) & nbsp; & mdash; service for compression of the JPEG files. The coefficient of optimization varies: big images from 500 KB can be squeezed without loss of quality to ~ 100 KB.

Service for Compression of Files

5 ) Tinypng ( of tinypng.com ) & mdash; for 1 time up to 20 images of PNG and JPG. Pro the account will cost $25 a year.

Service for Compression of Files

6 ) Kraken ( of kraken.io ) & mdash; it is possible to squeeze as one, and several files. Function of optimization of pictures from a web resource is available: for this purpose it is necessary to specify website URL, then it is simple to keep archive with already optimized images.

Service for Compression of Files

7) of Pich of old ( of pichold.ru ) & mdash; in fact, this tool reduces the picture size, but not her weight (for example, there were 600х600 pixels, and there was also mdash; 400х400).

Service for Compression of Files

8 ) I of mageOptim ( of imageoptim.com ) & mdash; for JPEG, SVG, GIF and PNG. Allows to optimize several images at once. The decision in a look ON for Mac.

Service for Compression of Files

9 ) of IMG of online (imgonline.com.ua) & mdash; one more service reducing the weight of pictures. Works with such formats as BMP, GIF, JPEG, PNG, TIFF.

Service for Compression of Files

10) Compressor (compressor.io) & mdash; works with the JPEG, PNG, GIF, SVG formats. Without loss of quality it is possible to squeeze only images of JPG and PNG. But the efficiency of reduction of weight leaves much to be desired: in any other service you receive + 4-10 more % to compression.

Service for Compression of Files

11) Webresizer ( of webresizer.com ) & mdash; the service intended for optimization of images of JPEG, PNG, GIF with a possibility of change of their sizes. Width by default & mdash; 400px.

Service for Optimization of Pictures

 

How to check the quality of image compression?

For this you can use any service to check the loading speed of the site. For example, gtmetrix.com shows you which images on the site are «heavy» and how much more they can be compressed.

By the way, it's better to do compression before uploading images to the site. This minimizes the amount of image manipulations for optimization later on.

Image compression quality check

Resume

Services for optimizing images are indeed many. Among those we have used and can recommend, we should mention Optimizilla (Image Compressor), Iloveimg, Titypng (for screenshot compression package — perfect solution), JPG Zipper, Kraken.

When uploading images to your site, give adequate and valid descriptions, provide an «Alt» attribute, use keywords, but avoid spam. To get the most out of optimizing images for SEO, images should not only be good quality, but also unique, because quality, relevance, and value — these are fundamental criteria for search engines when evaluating content.

Date of publication : 29.11.2019
Assessments: 0 ranking 0.00
Kapanji Igor
Author
Igor Kapanji
Email-correspondence and push-notifications specialist. In Studio Webmaster I work since 2017. I can't live without basket and hokey. I dream about fishing in Norway, sit in the Trolltunga (cliff that rises above the lake Ringedalsvatnet, situated above 1000 meters above sea level). Without 4 liters honorary blood donor in Moldova :)
Comments (0)
To leave a comment, you need to come in
rating rating rating rating rating
(0.00 out of 5 based 0 grades)