Images affect user perception, behavioral factors, and search engine rankings. High-quality images increase the relevance of the page and make it more attractive to both search robots and people.

Image optimization allows us to reduce page weight and increase loading speed — which is important for both users and search engines.

What happens when pages load slowly?

• Users leave the site. Nobody likes to wait!
• Search engines may not index all content. This reduces the relevance of the page and its position in search results.
• User data may not load into analytics systems. This distorts your statistics.

Evaluating the Number and Necessity of Images

Before we start optimizing images, let’s evaluate their number and necessity.

Rules of good manners:

• Images must be relevant to the page’s content.
• Pictures should answer the intention of users.
• Images should complement the text, not duplicate it.

Sometimes there are too many images on the pages that do not help users. In such cases, it is better to remove unnecessary pictures than to waste time optimizing them.

For some elements of the web page, we can use vector images in SVG format.

SVG is ideal for:

• Icons.
• Logos.
• Other graphic elements that make the page more interesting (for example, benefits or stages of work).

Benefits of SVG:

• Responsiveness: SVG graphics remain sharp at any scale.
• Flexibility: SVG images can be created in a text editor and edited using the <svg> tag.

You can optimize and reduce the weight of svg graphics using the SVGO solution.

SVGO (SVG Optimizer) is a console application for optimizing svg vector graphics, which cleans svg files from unnecessary code without affecting the rendering of graphics.

Raster images are images that consist of a grid of pixels (colored dots).

Raster images have the following characteristics:

• Size in pixels.
• The number of colors and shades (color depth).
• Color space (color model, for example RGB, XYZ, etc.).
• Resolution (the number of dots in the image).

Each pixel of a raster image contains information about color and transparency (hue).

Such pictures are used when it is necessary to place a more detailed image for which vector graphics are not suitable.

How is the weight of raster images calculated?

The browser has 256 shades for each color channel. One channel takes up 8 bits. A pixel consists of 4 channels and weighs 32 bits or 4 bytes. This way you can easily calculate the weight of the file.

For example, an image with a size of 100 * 100 pixels consists of 100,000 pixels. 1 pixel weighs 4 bytes, respectively, an image of 100,000 pixels will weigh 400,000 bytes or 390 KB (400,000 / 1024).

Detailed images are made up of a large number of pixels. In this regard, such images weigh a lot. Reducing the resolution (reducing the number of pixels) will lead to a decrease in image quality, as the image will break up into pixels and look blurry and fuzzy.

How to reduce the weight of a raster image without losing quality?

Reduce color depth

If the image does not require a wide palette of shades, for example, 256 shades for each channel, reduce the number of colors to 256. This will reduce the weight of the image by 2 times.

Apply delta encoding of pixels

Adjacent pixels in an image can be made up of similar colors. The human eye cannot always see the difference between the colors and shades of pixels. In this regard, you can specify the difference between adjacent pixels. If the pixels have similar values, the delta between the pixels will be zero. This means that the pixel will weigh only one bit.

Reduce the scale of pictures

The size of the original file may differ from the one displayed in the browser. Let’s check if the original file size matches what is displayed in the browser. If the original size is much larger, the image should be replaced.

How to choose a raster image format?

PNG — does not compress with data loss. Images in PNG format always weigh a lot. In this regard, we recommend using images in PNG format in cases where it is necessary to show small details.

If the picture does not contain small details and does not imply enlargement and scaling, we use the JPG or JPEG formats.

The GIF format is usually used for animated images.

WebP is an image format developed by Google. This format uses an image compression algorithm, which allows you to reduce the file size without losing quality.

WebP is considered a more modern and progressive image format than other formats.

The disadvantage of this format is that some browsers and applications do not support this format.

The smaller the weight of the image on the site, the faster it will load. In this regard, it is necessary to strive to compress images as much as possible. At the same time, the pictures should remain in good quality even when the image is scaled.

The optimal image weight is 100-200 KB. Large images in high resolution can weigh 500-1000 KB. In some cases, pictures need to be placed in high resolution, for example, photos of products where image enlargement is required. The optimal weight of such files is up to 3 MB.

It is not recommended to place images weighing more than 3.5 MB on the site. The presence of such images can significantly reduce the page loading speed.

How to find heavy images on the site? You can check the optimization of images and find heavy images on the site using Screaming Frog software.

It is necessary to parse the site through software, go to the Images — All tab in the navigation menu on the right, and sort the images by decreasing size.

Thus, we will get a list of all images from the site and their weight.

Optimize the image file name

Before uploading a file with a picture to the site, we recommend optimizing the image file name.

The name must be written in Latin, and a hyphen must be used as a separator.

The name must be written in transliteration.

The contents of the title attribute are displayed when you hover over the image.

Rules for filling in the title attribute for images:

• The Title attribute must match the image. You should not write in it what has nothing to do with the picture.
• It is better to use a short Title for the convenience of users — no one will want to read a kilometer-long hint to the picture.
• The presence of keywords is desirable. You should not use words such as «photo», «picture», etc., because it is already clear what it is.

The alt attribute for images is an attribute of the html tag <img> that describes the content of the picture. The alt attribute becomes displayed on the site page if the image does not load.

Example of attribute design in html code:

How to fill in the alt attribute in html code

Images in html code are marked with the <img> tag.

After the opening tag, we indicate the link to the image: src="image.png»

Next, you need to specify the alt attribute: alt="Image Description»

To increase the relevance of the page, we recommend specifying the main keywords by which the page is ranked in the alt attributes. The description of the image should reflect the essence of the picture.

There are no exact parameters for the number of characters in the alt attribute. However, it is recommended to use 3-5 words, and the total length of the attribute is 75-80 characters. This is the optimal size for an image description.

When automatically generating the alt attribute for images, you can pull up the h1 heading as a description. However, the content of alt in some cases will not accurately convey the content of the picture. In this regard, we recommend, if possible, to fill in the attribute manually, choosing the most accurate description of the picture.

How the alt attribute is displayed on the page

If the alt attribute is filled in, then in cases where images fail to load, the contents of the alt attribute are displayed as text instead of the image.

If the alt attribute is missing or the field is empty, no text description is displayed.

How the alt attribute affects ranking

Search engines and other services are actively developing image search. Optimizing images and properly filling in the alt attribute can improve a website’s ranking in image search and attract additional traffic.

A sitemap.xml file informs search engines about the structure of a site including which pages and links need to be indexed. Sitemap.xml contains links to current site pages that are available for indexing and return a 200 server response code.

To help search engines index images more effectively and improve a site’s ranking in image search, we can create a separate sitemap.xml file specifically for images.

Recommendations:

• Automatic generation: Configure the automatic addition of new images to the sitemap to ensure they are indexed quickly.
• Regular updates: Update the sitemap weekly to speed up the indexing of new images.
• For more information about the sitemap format, refer to the Google Documentation

Example of xml sitemap code for pictures:

Compressor.io →

The service allows us to reduce the weight of the picture up to 90% without loss of quality. The tool works with all modern formats, including WebP.

Imagecompressor →

A free online service that allows you to change the resolution of the image.

Tinyjpg →

A free image optimizer that allows you to compress images without loss of quality. The service converts PNG images from 24-bit to 8-bit. This method allows you to reduce the weight of the picture without loss of quality.

Compressjpeg →

A simple online editor that allows you to optimize up to 20 files at a time. Using the service, you can compress images in JPEG format and convert PNG documents to JPEG, JPG to PNG and SVG to PNG.

WebP Converter →

Using the tool, you can convert pictures to WebP format. WebP Converter allows you to reduce the file size up to 30% without loss of quality.

Optimizing images will improve the ranking of the site in search engines, participate in image search, display images in snippets and improve behavioral factors.