Image optimization as an important component of the CRO process. Alt and title image attributes. How to compress JPG, JPEG using jpegtran

Ilya is a Developer Advocate and Web Perf Guru

Images are the resources that often take up a lot of space on a page and weigh the most. Thanks to their optimization, we can significantly reduce the amount of downloaded data and improve the performance of the site. The more an image is compressed, the less bandwidth it takes to download and the faster the browser can display the page to the user.

Image optimization is both a science and an art. We can call it an art because no one can give a definite answer as to how best to compress a particular image. However, this is also science, because we have at our disposal developed techniques and algorithms that can significantly reduce the size of the resource. To choose the optimal settings for an image, you need to consider many factors: format capabilities, encoded data, quality, number of pixels, etc.

Deleting and replacing images

TL;DR

Remove unnecessary images.
Use CSS3 effects whenever possible.
Use web fonts instead of encoding text in images.

First of all, ask yourself: is this image really necessary? Good design should be simple and not compromise performance. It's best to simply remove the image you don't need since it weighs a lot more bytes compared to the HTML, CSS, JavaScript, and other resources on the page. However, one image in the right place can replace a long text, so you need to find the balance yourself and make the right decision.

After this, you should check whether the desired result can be achieved in a more efficient way:

Thanks to CSS effects(gradients, shadows, etc.) and CSS animations, you can create assets that look sharp at any resolution and scale, and weigh much less than images.
Web fonts allow you to use beautiful inscriptions, while maintaining the ability to select and search text, as well as change its size. Thanks to this, working with your resource will become even more convenient.

Avoid encoding text in an image. Beautiful inscriptions necessary for quality design, brand promotion and convenient work with the resource, but the text in the image just gets in the way of all this. It cannot be selected, found, enlarged, copied, and also does not look good on high-resolution devices. Of course, web fonts also require optimization, but they will help avoid the above problems. Always select these to display text.

Vector and raster images

TL;DR

The vector format is great for images from geometric shapes.
The quality of vector images does not depend on scale and resolution.
Use raster format for complex images with many non-standard shapes and details.

If you decide that you should use an image to achieve the result, choose the appropriate format for it:

Vector image

Raster image

Vector graphics use lines, points, and polygons to display images.
In raster graphics, the individual values of each pixel in a rectangular grid are encoded and the image is displayed based on them.

Each format has its own advantages and disadvantages. The vector format is ideal for images made from simple geometric shapes (such as logos, text, icons, etc.). They remain sharp at any resolution and scale, so use this format for large screens and resources that should be shown in different sizes.

However, vector formats are not suitable for complex images (such as photographs). There may be too much SVG markup to describe all the shapes, but the resulting image will still look unrealistic. In this case, you should use a raster image format such as GIF, PNG, JPEG, or the newer JPEG-XR and WebP formats.

Quality raster images depends on the resolution and scale: when enlarged, it becomes blurry and breaks up into pixels. As a result, you may need to save multiple versions of the bitmap at different resolutions.

Optimized for high resolution screens

TL;DR

On high-resolution screens, one CSS pixel consists of several screen pixels.
High-resolution images have many more pixels and bytes than regular images.
Optimization techniques can be applied to images of any resolution.

When talking about pixels, we need to differentiate between screen pixels and CSS pixels. A CSS pixel can correspond to one or more screens. This is done so that on devices with a large number of screen pixels the image will be clearer and more detailed.

Of course, graphics look very nice on high DPI (HiDPI) screens. However, to look good in high resolution, our images need to be more detailed. But we have a solution: vector formats are ideal for this task. They maintain clarity in any resolution. Even if the cost of rendering small details increases, we still use one resource independent of screen size.

On the other hand, there are many more complexities with raster images because they encode image data at every pixel. Thus, the higher the number of pixels, the larger the size of such a resource. As an example, consider the difference between photos of 100x100 CSS pixels:

When we double the screen resolution, the total number of pixels immediately quadruples: twice vertically and twice horizontally.

Summarize. On high-resolution screens, graphics look very attractive, so you can create a good impression of your site. However, such screens require high-resolution images. Choose vector formats because they look sharp on any device. If you must use a bitmap image, add some optimized variations of the resource (see below).

Optimizing vector images

TL;DR

SVG is an XML based image format
SVG files need to be minified to reduce their size.
Compress SVG files using GZIP.

All modern browsers support the SVG (Scalable Vector Graphics) format. It is an XML-based image format for 2D graphics. SVG markup can be embedded directly into a page or into an external resource. In turn, the SVG file can be created using any software for vector drawing or manually in a text editor.

The example above draws a simple circular shape with a black border and a red background. It was exported from Adobe Illustrator. As you can imagine, it contains a lot of metadata, such as layer information, comments, and XML namespaces, that most often are not needed to display the resource in the browser. As a result, you should minify SVG files using the svgo tool.

For example, svgo reduces the size of the above SVG file by 58% from 470 to 199 B. Additionally, since SVG is an XML-based format, we can apply GZIP compression to reduce its size during transmission. Make sure your server is configured to compress SVG assets.

Optimizing bitmaps

TL;DR

A raster image is a grid of pixels.
Each pixel contains color and transparency information.
To reduce the image size, compressors use various methods to reduce the number of bits per pixel.

A raster image is simply a two-dimensional grid of individual pixels. For example, a 100x100 pixel image is a sequence of 10,000 pixels. Each pixel contains RGBA values: red (R), green (G), and blue (B) channels, as well as an alpha or transparency channel (A).

The browser sets 256 values (hues) for each channel, which translates to 8 bits per channel (2^8 = 256) and 4 bytes per pixel (4 channels x 8 bits = 32 bits = 4 bytes). Thus, knowing the grid dimensions, we can easily calculate the file size:

Image 100 x 100 pixels. consists of 10,000 pixels
10,000 pixels x 4 B = 40,000 B
40,000 B / 1024 = 39 KB

Note:In addition, regardless of the image format transmitted from the server to the client, when decoding the image, each pixel takes up 4 bytes of memory. Therefore, when displaying large files On devices with limited memory, problems may arise.

It may seem that 39 KB is quite a bit for a 100x100 pixel image. However, if the file size increases, the file will weigh much more, and downloading it will require a lot of time and resources. This image is currently uncompressed. What can be done to reduce its size?

One of simple ways image optimization - reduce the color depth from 8 bits per channel, choosing a smaller palette. By setting the depth to 8 bits per channel, we get 256 values per channel and 16,777,216 (2563) colors. Maybe we should reduce the palette to 256 colors? Then we will need only 8 bits for all RGB channels and only 2 bytes per pixel, not 4 as before. We managed to compress the images in half!

Note:PNG images from left to right: 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors). Complex images with smooth transition colors (gradients, skies, etc.) require larger palettes. However, if the resource consists of a small number of colors, a large palette is a waste of bits.

Having optimized the data in individual pixels, let’s turn our attention to neighboring pixels. It turns out that the color of such pixels in many images, especially photographs, is often similar. This allows the compressor to use delta coding. Instead of storing separate values for each pixel, you can specify only the difference between neighboring pixels. If they are the same, then the delta is zero and we only need to store one bit. But that is not all!

We often don't notice the difference in some shades, so we can optimize the image by reducing or increasing the palette for those colors. Each pixel in a 2D grid has multiple neighbors, so we can improve upon delta coding. Focus not on the immediate neighbors of a pixel, but on entire blocks of similar colors and encode them using different settings.

As you can see, image optimization is becoming more complex and interesting. There is scientific and commercial research on this topic, because images weigh a lot of bytes, and it is profitable to develop new compression techniques. If you want to know more, read or check out the specific examples in .

So how does all this complex material help us optimize images? Let's repeat: we don't need to invent new compression methods. However, we need to know about key aspects question: RGBA pixels, color depth and various optimization techniques. This is necessary to continue the conversation about raster formats.

Lossy and lossless data compression

TL;DR

Taking into account the peculiarities of human vision, lossy data compression can be used for images.
Lossy and lossless data compression is used to optimize the image.
The difference in image formats is the difference in how and what compression algorithms are used to reduce the size of the resource.
There is no best format or quality setting that will suit all images. When combined different compressors and resources we will never get the same result.

For certain types of data, such as page source code or executable file, it is extremely important that the compressor does not delete or change the original information. A missing or incorrect bit of data can completely corrupt or destroy the meaning of a file's content. However, other types of data can be conveyed in approximate form.

Due to the nature of human vision, we may not notice the absence of any information about each pixel, for example we will not see the difference between certain shades of color. Therefore, we can use fewer bits to encode some colors and thereby reduce the size of the resource. Thus, standard image optimization consists of two main stages:

[Lossy] image compression(http://ru.wikipedia.org/wiki/Lossy_data_compression), which removes some pixel data.
[Lossless] image compression(http://en.wikipedia.org/wiki/Lossless_compression) in which pixel data is compressed.

It is not necessary to complete the first step. The exact algorithm depends on the specific image format, but note that every image can be lossily compressed.

In fact, the difference between image formats such as GIF, PNG, JPEG, etc. is precisely the combination of different lossy and lossless data compression algorithms.

What is the best way to combine lossy and lossless compression? This depends on the image itself and other conditions, such as the balance between file size and noise. To get clear, detailed images, you can choose not to apply lossy compression. If file size is more important to you, feel free to use this optimization method. There is no single setting option for all images. You yourself must determine the desired result and make a decision.

Note:When using lossy compression such as JPEG, you'll be able to select quality settings (like the Save for Web slider in Adobe Photoshop). Typically this is a value from 1 to 100, which determines whether lossy or lossless compression algorithms are used. Don't be afraid to lower the quality: often the image will still look good and the file size will be significantly smaller.

Please note that images with the same quality settings, but in different formats, will differ. This occurs due to differences in image compression algorithms. For example, JPEG and WebP with quality settings of 90 look different. In fact, even images in the same format and with the same quality settings can differ depending on the compressor used.

TL;DR

Selecting an image format
Select the appropriate standard format: GIF, PNG or JPEG.
For modern clients, add resources in WebP and JPEG XR scaled images:
Image scaling is one of the simplest and most effective optimization methods.
If you are using images big size, the user can download unnecessary data.
Reduce the number of unnecessary pixels by scaling your images to their display size.

In addition to lossy and lossless compression algorithms, other features such as animation and transparency channel (alpha channel) are supported in image formats. Thus, when choosing a suitable format, you need to consider the desired visual effect and requirements for the site or application.

Format	Transparency	Animation	Browser
GIF	Yes	Yes	All
PNG	Yes	No	All
JPEG	No	No	All
JPEG XR	Yes	Yes	I.E.
WebP	Yes	Yes	Chrome, Opera, Android

There are three standard image formats: GIF, PNG and JPEG. In addition to them, some browsers support new WebP formats and JPEG XR, for which greater compression and additional capabilities are available. So which format should you choose?

Should the image be animated? Then choose GIF format.
The GIF color palette consists of only 256 colors. This is not enough for most images. In addition, the PNG-8 format compresses images with a small palette better. Thus, choose GIF only if you require animation.
We need to save everything small parts in the highest resolution? Use PNG.
The PNG format does not apply lossy compression, other than selecting the palette size. Thanks to this, the image is saved in the highest quality, but weighs much more than other file formats. Use this format only where necessary.
If the image consists of geometric shapes, convert it to vector (SVG) format!
Avoid text in images. It cannot be selected, found, or enlarged. If text is needed to create a design, use web fonts.
Are you optimizing a photo, screenshot, or similar type of image? Use JPEG.
JPEG uses a combination of lossy and lossless compression to reduce file size. To find the best combination of image quality and size, try setting several JPEG quality levels.

Once you have determined the appropriate format and its settings for all resources, add an additional option in WebP and JPEG XR. These are new formats that are not yet supported in all browsers. However, using them can significantly reduce the file size. For example, WebP compresses an image more than JPEG.

Because WebP and JPEG XR are not supported in all browsers, you need to add additional logic to your applications or servers to send the appropriate resource to the user.

Some content delivery networks provide image optimization services, including providing JPEG XR and WebP files.
Some open source tools, such as PageSpeed for Apache and Nginx, automatically optimize, transform, and deliver relevant resources.
You can add additional application logic to determine the client and its supported formats, and then send the best possible resource.

Note that if you are using Webview to render content in a native app, then you can have full client control and only use WebP. IN Facebook applications, Google+, etc., WebP resources are used because they really improve productivity. To learn more about this format, watch the presentation WebP: Deploying Faster, Smaller, and More Beautiful Images from Google I/O 2013.

Tools and Option Selection

There is no one ideal format, tool, or optimization algorithm that will work for all images. To get the best results, you must choose the format and its settings depending on the content, visual and technical requirements.

Tool	Description
gifsicle	creates and optimizes GIF images
jpegtran	optimizes JPEG images
	compresses PNG losslessly
pngquant	compresses PNG lossily

Don't be afraid to experiment with compressor settings. Set different quality settings, select the appropriate option and apply it to other similar images on the site. But remember: not all graphic resources need to be compressed using the same method!

Scaling of transmitted images

TL;DR

Warning:A tag here did NOT convert properly, please fix! ""

The image size is the sum of the pixels multiplied by the number of bytes used to encode each pixel. Image optimization comes down to reducing these two components.

Thus, one of the simplest and most effective optimization techniques is to ensure that the size of the image you submit is no larger than its display size in the browser. Nothing complicated, but many sites make a serious mistake. They host large resources, and the browser itself has to scale and display them at a lower resolution. Among other things, this increases the load on the user's processor.

Note:To see the original and display sizes of an image, hover over it in Chrome Developer Tools. In the example above, we download an image that is 300x260 pixels, but the client scales it down to 245x212 pixels when serving.

By sending extra pixels and leaving the browser to scale the resource itself, we miss the opportunity to optimize the number of bytes needed to render the page. Please note that scaling not only reduces the number of pixels, but also changes the original size of the image.

Original size	Display Size	Unnecessary pixels
110 x 110	100 x 100	110 x 110 - 100 x 100 = 2100
410 x 410	400 x 400	410 x 410 - 400 x 400 = 8100
810 x 810	800 x 800	810 x 810 - 800 x 800 = 16100

Note that in all three cases, the displayed size is only 10 pixels smaller than the original size. However, the larger the original image size, the more unnecessary data has to be encoded and sent. Even if you are unable to establish a complete match between the original and displayed sizes, you should reduce the number of unnecessary pixels as much as possible.

List of optimization methods

Keep in mind some tips and techniques to help you optimize your images:

Choose images in vector formats. Their quality is independent of resolution and scale, so they are suitable for large screens and different types of devices.
Minify and compress SVG assets. Many graphics applications add XML markup, which often contains unnecessary metadata. It can be removed. Make sure your servers have GZIP compression configured for your SVG assets.
Choose the most suitable raster formats. Define necessary requirements to images and select required format for each resource.
Try different quality settings for raster formats. Don't be afraid to lower the quality: often the image will still look good and the file size will be significantly smaller.
Remove unnecessary metadata. Many raster images contain unnecessary information about the resource: geodata, camera information, etc. To delete them, use the appropriate tools.
Scale your images. Reduce files on the server so that the original and displayed sizes are almost the same. Pay special attention to large images. If they are scaled down by the browser, your site's performance will be significantly reduced.
Automate. Use reliable tools and software that will automatically optimize the images on your site.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see ours. Java is a registered trademark of Oracle and/or its affiliates.

Updated August 8, 2018

Every year, search engines are tightening the screws more and more tightly. external optimization. And more and more attention is paid to the internal factors of the site. For example, the loading speed of your website also affects the growth of your rankings in search results.

Of course, there are many ways to speed up your website, but today we will talk about only one of them - optimizing images for the site. No, these are not the notorious meta tags - ALT and TITLE, we will talk about technical issues.

At one time, I didn’t even think about the fact that it was possible to somehow optimize images. And why? After all, broadband, unlimited, images from sites are loaded instantly. What will reducing the image size by 20 kilobytes give? Never mind!

But the mobile traffic trend made us think about optimization. If you look at the growth graph of mobile traffic, then according to statistics, for 2014 the Internet from mobile devices every 3 people entered. This means that more and more people will visit websites and blogs from gadgets.

And as you know, the speed of mobile Internet is a fairy tale. And if your site has heavy images, then the user may not wait for your site to load at all. Therefore, now the topic of image optimization for a website is very relevant.

Before each of my publications, I optimize, and believe me, the total weight of all pictures is reduced by up to 60% without losing their quality. So let's take a look at the tools I use.

Tools for optimizing images on a website.

The most common and most accessible for many is Photoshop. Most likely, if you are a blogger, webmaster, or a person closely associated with publishing articles on your websites, then you have this software installed.

To optimize an image in Photoshop, you need to carry out a number of simple manipulations. Go to the menu File -> Save for Web.

After which we see a window with two image options.

The top one is the original image, the bottom one is what we get after processing.

Now I'll show you a trick. Look at the pictures and the arrows on them.

The first picture is saved at 100% quality. Her weight decreased by 85%.

The second picture is saved at 70% quality. Its weight has been reduced by 95%, while the images look identical.

Now imagine how much time a user would have to spend downloading a 2 megabyte image on a mobile device. What if there are 5–10 such images in an article? This is why it is important to optimize images for your website.

But Photoshop tool not ideal when it comes to bulk image optimization. So let's switch to more specialized software.

PictureBeaver is a friend for Windows users.

I switched to MacOS a long time ago and rarely use Windows. This is mainly for collecting the semantic core using KeyCollector. Therefore, I had to work a little to find a truly worthwhile image optimization program. And so that it works on Windows.

As it turns out, there is a wonderful program called PictureBeaver, which is not fussy about resources and works surprisingly quickly.

The program is very easy to work with. Open the folder with the downloaded script, and drag all the images that you plan to optimize onto the optimize.wsf file

After processing the images, a folder with optimized images and a report file for each of them will appear.

ImageOptim is a friend of apple growers.

There are no problems with this software for MacOS. This is primarily due to the fact that apple technology designers loved and love most of all. And they really love to play with images. Therefore, finding the right software will not be difficult for you.

I chose free utility ImageOptim, since it copes with the main task with a bang. And this is mass optimization of images for the site.

The principle of its operation is different from PictureBeaver. It does not create any new folders with ready-made images. It simply replaces the originals with optimized images.

She looks like this:

The window where you need to drag the image.

Window after optimization.

As you can see, the program managed to reduce the total weight by 24.8%

The first image was already optimized in Photoshop. The second one is not.

P.S. Mobile Internet is growing, so think about the convenience for your users.

Distribution of non-keyword ranking metrics on a scale of 0 to 9, where 0 means the factor has no impact on page ranking and 9 means the factor has a strong impact:

Imagine how your site's search rankings will improve if you reduce the loading time of each page by at least 10%. This can bring you to the first page of the search engine, or even to the top three results - which will significantly increase your income.

Why do hosting costs depend on image size?

Large images also affect hosting bandwidth. Therefore, if you have high traffic, then heavy images will incur extra costs. It's one thing when 50 people a day upload 1 MB photos, but what if there are 5,000 of them?

Therefore, reducing the volume of images will save you money. Use site caching or content delivery network. But installing them will require the help of web developers, which is only possible up to a certain point. Therefore, learn how to reduce the weight of image files yourself - it is useful and beneficial. Read below for information on how to do this.

Basic Image Formats

There are not many image formats used on web resources. Let's consider 5 main ones:

.jpg;
.png;
.gif;
.svg;
.bmp.

Most images on the Internet come in one of these five formats. By going to any page and clicking right click mouse over the image, you can open it in a new tab:

By doing this, you can easily define the format:

Sometimes it's not easy to find out the image format from your computer because operating systems often hide the file extension by default. Then go to your computer settings and turn on the display of file extensions mode.

On a Mac, go to Finder > Preferences > Advanced and then check the box next to “Show all filename extensions”:

On Windows 10, open Start, then File Explorer > View > Settings > Viewing, uncheck “Hide extensions of known file types,” and select the “Show hidden files, folders, and drives” radio button. Then click “OK”:

The file extension display feature will be useful if you plan to optimize a lot of images. In addition, this will reduce the likelihood of error.

For example, if you decide to convert a picture from .jpg to .png, the extension display function will prevent you from confusing files lying next to each other in a folder.

Now let’s talk about how to determine the weight of an image and its overall size. On a Mac, just right-click on the image and select Get Info:

Let's discuss the advantages and disadvantages of each format. Different file types have qualities that are optimal for some projects and not for others.

.JPG

Full name: Joint Photographic Experts Group (based on the name of the developer organization).

Year of release: 1992.

The most common image file type. Most smartphones and digital cameras take pictures in it. Of course, .JPG is better if you need to reduce the file weight while maintaining image quality.

By the way, you can change the ending of the file name from .JPEG to .JPG and nothing catastrophic will happen.

However, if you simply upload a photo from your phone or camera and try to insert it into a website without optimization, you will be in for an unpleasant surprise. Uncompressed JPG image from your phone or digital camera weighs a lot. By “many” we mean a weight from 1 to 10 MB (sometimes more).

Below is an example.JPG:

This is a photograph of Vincent van Gogh's painting "Irises". A good example of when .JPG is the optimal choice. The picture is full of colors, there is no empty space at all, there are no straight lines. Only JPG will help you preserve this splendor in a light-weight file.

if in doubt which format to use, use .JPG;
This is the best format for storing photos;
The size of such a file is reduced without loss of quality.

.PNG

Full name: Portable Network Graphics.

Year of release: 1996.

The .PNG format is both a curse and a blessing. For web designers, it provides a great alternative to .GIF.

This format is good for large-scale images, but not photographs or images with a lot of color and detail (like a Van Gogh painting).

PNG displays simple graphs, drawings and diagrams well. In this format, the image above is only 34 KB. Please note that infographics look better and weigh less when saved in .PNG format.

PNG images scale well. GIF has similar parameters to PNG, but does not scale well: such illustrations are full of artifacts and they spoil the aesthetic appearance of the page.

ideal for simple graphs, drawings and diagrams;
good for infographics;
scales well;
not very suitable for color images with a lot of detail;
Mac computers take screenshots in .PNG by default.

.GIF

Full name: Graphics Interchange Format (format for image exchange).

Year of release: 1987.

GIF - very old format, developed before the advent of the public Internet. It did its job well when the World Wide Web was relatively new.

Today.GIF is ideal for tiny images: icons, button images, background images, decorative illustrations - since it provides an extremely small file size. The count is not in megabytes or kilobytes, but in bytes. It's practically nothing.

On the left is an example of a decorative window border made from tiny .GIF squares. Each square weighs only 54 bytes

The problem with the format is that such images do not scale well. What happens to them is called pixelation. With the advent of .PNG, today there is no point in saving images as .GIF. But what about animated images?

We all love so-called GIF animations. However, as a rule, they weigh a lot - about 2 MB and more. Bloggers tend to use animated images in posts, sacrificing loading time for this. But if it's worth it, then why not!

obsolete format, replaced by .PNG;
use GIF animations as a last resort - they are very heavy;
GIF is ideal for tiny decorative page elements that are not meant to be scaled.

.SVG

Full name: Scalable Vector Graphics.

Year of release: 2001.

The .SVG files are incredible. As the name suggests, these images are great for scaling and can weigh very little.

However, there is a significant drawback - photographs cannot be vector. But any other vector image can be saved in this format (if it was created in Adobe program Illustrator or Corel Draw, then it can be exported to .SVG).

The format is good for simple circuits, charts and graphs. Logos and icons are also often saved as .SVG. Typically, they should be simple and/or have an abstract design.

The NASA logo is saved in .SVG format and weighs only 14 KB. Although, as you can see, the image itself is large and quite clear. That's the beauty of it vector graphics. There will be no pixelation no matter how much you resize the image.

The main problem with this format is that these images are almost always created by experienced artists (unless, of course, you download such a file from some site). But if you're working on a site with a lot of traffic, it's wise to invest resources in creating SVG files if you really need them.

small size;
suitable for responsive websites that require images that can be scaled without losing quality;
not suitable for photographs;
requires developed design skills for correct use.

.BMP

Full name: Windows Bitmap, Bitmap Picture.

Year of release: 1985.

BMP is a raster image storage format developed by Microsoft. This is the oldest of all Internet file formats.

If you have ever used Microsoft program Paint, then created files with the .BMP extension. Majority modern browsers display files of this format without problems, but they are rarely used. These files are heavy and prone to pixelation when scaled.

Conclusion: This format should not be used.

Reducing the weight of images without losing quality

The following tools will help here.

Adobe Photoshop is the industry standard for image editing. This paid program, which costs $19.99 monthly. If you don't want to pay, you can find Adobe CS6 online, latest version program that does not require a subscription fee.

One of the most useful for image optimization Photoshop features— saving the image in one of the web formats (“Save for Web”). Allows you to quickly convert image weight and quality for various types files.

First, open the image you plan to optimize in the program:

If you use images on your blog, resizing them almost always makes sense. Almost everything social media have their own requirements for the size of published images. By aligning this setting as required, you will achieve maximum page performance.

Let's look at an example. Let's say you wanted to insert an image into a blog and started resizing it.

Content field width: 800 pixels

Let's imagine that you want to post a friend's photo on your blog. The image width is 4,000 pixels. Obviously, the size is many times larger than required. And the chances that the file weight will be small are extremely small.

You can change the size to 800 pixels wide - but sometimes, on the contrary, it is worth scaling it to 1000 pixels. On Retina screens installed on a Mac, it's quite easy to recognize low-quality images. That’s why most designers have mandatory rule: The width of the image must be at least twice the width of the content field. This is done to ensure that images look crystal clear even on Apple screens.

The only problem is that the weight of such an image will be gigantic, which will undoubtedly increase loading time and reduce conversion.

In our case, the image width is 8,000 pixels.

In order to change its size, on a Mac you will need to click on the “Image” tab, and then select “Image Size”:

Here you can select the final file format and determine other characteristics of the image, better optimizing it for the network. The first step is to determine which file type is best for your needs.

Try each format, specifying the size of the saved image, to see the final file weight. By selecting JPEG, you can specify the quality of the final image:

After trying all the formats, choose the one with the smallest file size and the same high quality. In the example, this format turned out to be .JPG. It was in it that it was decided to save the image:

Please note that the file size in .PNG format is 731 KB!

Other formats may be preferable. But if you are optimizing graphics and drawings, then .PNG will be the optimal choice.

For those who don't have Photoshop, the free online service TinyPNG is suitable. Of course, perfect optimization will not work, but you can reduce the file weight here. Main disadvantage— the resource does not allow you to change the image size:

To get started, move the image to the center of the main page of the service, to the area outlined by the dotted line - the weight of the image will immediately decrease automatically:

Now - just download new file on computer.

If it is large enough (more than 350 KB), first reduce the image size, and then turn to TinyPNG. If you are uploading photos from an iPhone, you can send them by mail, having previously specified a size different from the original one. Typically large and medium size most preferred.

GIMP

GIMP is an incredible tool. It's a free desktop alternative to the ubiquitous Photoshop. At the same time, GIMP can do everything that Adobe’s brainchild is capable of. So if you are on a budget, pay attention to this program. It is available for Windows, Mac OS and Linux.

What file size is preferable?

The optimal weight of a file depends on where and for what purposes you will use it. But the basic rule is this: strive to reduce the weight of the image as much as possible while maintaining its high quality.

If your pictures are out of focus, grainy, or dull, re-optimize them to improve the quality of your files. If you're using Photoshop and saving images as .JPGs, try moving the Image Quality slider to 80% or more. If you are saving the image as .PNG, try using .PNG-24 instead of .PNG-8.

Let's determine the ideal file volume indicators for the main types of resources.

Online stores

The average online store contains hundreds to thousands of product images on its pages. Therefore, optimizing visual content is extremely important for eCommerce sites.

As a rule, the weight of product images is reduced to 75 KB or less. If the images on the site are scaled, you will need larger sizes. Then the weight can grow to 150 KB.

Blogs

As a rule, the weight of images for blogs does not exceed 100 KB. But your task is to achieve a minimum volume while maintaining quality. Avoid GIF animation if it's not practical.

SaaS portals

There are three main types of images on these resources: home page(hero shot), icons and screenshots. The most important page of the service is the main page, so all optimization work should start from here.

Main image

Usually these are huge images that fill the entire screen. But your target size is 250 KB or less. It won't be easy. But extremely effective. Many people don't give weight special attention, but optimizing only this one will already increase the resource performance.

Icons

On many websites, icons clearly demonstrate the functions or features of a product. The format of such images is usually .PNG, and the weight does not exceed 15 KB.

Screenshots

If the screenshots are as wide as the main image, try to reduce their weight to 250 KB; if not, 100 KB or less. The best format for screenshots is .JPG.

Free Image Editing Tools

Free online services

TinyPNG. The main value of the resource is its simplicity. It is enough to transfer the image to main screen how his weight decreases;
Pixlr. The service interface is similar to Photoshop. It also shows the weight of the file for a given picture quality;
Picmonkey. The necessary functions are available, and the interface is intuitive.

Free desktop tools

GIMP;
Paint.net. The best version of Microsoft Paint. One of useful functions- unlimited history. You can undo as many actions as needed;
Seashore. Application with open source code for Mac. Known for its bugs, but can still be useful.

A few final tips on search engine optimization. File names must be descriptive. For example, you don’t need to give an image in an online store a name like 324q345q345.png. Reflect the product shown in the picture in the file name. Also make sure that each image has a corresponding Alt tag in the image code:

This information will allow the picture to participate in searches by Google images or Yandex.

Secrets to optimizing headlines and images from leading content resources

Conclusion

CRO and SEO specialists often forget to optimize images, underestimating the impact of this process on profits. But by devoting enough time and attention to optimization, you will unlock yet another potential for business growth. We hope our guide will help with this.

In the current age of mobile technology, image optimization in PNG formats and JPG, JPEG became relevant again, as it was relevant in those days when the Internet was just entering our lives and was universally slow and dial-up. Mobile Internet, of course, is not entirely correct to compare with dial-up, but in places where the connection is poor, the access speed is quite low. And even in those days, the user had nowhere to go, and had to wait for the page to load. Now the Internet has grown, there is a large selection of sites. The user became capricious and impatient, and the average page load time decreased greatly. It’s easier for the user to find another faster site.
Yes, and search giants like Google or Yandex began to pay attention to how quickly sites load, giving preference in the search results to those that are faster. The weight of the page also plays an important role in this, which, in turn, strongly depends on the weight of the images located on it. It is quite obvious that having compact compressed pictures benefits everyone. Therefore, here I want to talk about how to prepare your PNG and JPG, JPEG files for uploading to hosting.

Basic image optimization

This involves trimming unnecessary fields, reducing color depth, removing comments and saving the image in a suitable format. To do this, you can use Adobe Photoshop, or, if you don't have it, MS Paint or GIMP.
Even basic cropping of the image will reduce its weight quite well.

How to make an image smaller in MS Paint

Using MS Paint as an example, I’ll show you how to reduce an image to the required size.
Let's take for example the NGINX logo and its nginx.png image measuring 2000x417 pixels, which needs to be cropped to 1024 in width, because This is the width of the page layout, and there is no point in doing more.

The output is an image that has undergone minimal basic optimization. It's time to move on to compressing her weight.

File Optimizer for PNG and JPG,JPEG compression

The easiest and fastest way to achieve optimal image compression without loss of quality is to use the File Optimizer program

Official website and program description :

Download File Optimizer you can with

Description . It is an effective optimizer not only for images, but also for .pdf, .docx, txt and other text, audio and video files, as well as archives. Full list You can find supported extensions on the official project page.
Here are some of the utilities used in the work: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf, TruePNG, tidy-html5, ZLib, zRecompress. I think even this partial list is quite impressive.

Installing and using File Optimizer

First, download the latest version of the program either in the form of an installer or an archive with files. By the way, the archive has a version for 32-bit and 64-bit versions of Windows.

The interface is quite simple and intuitive.
Doesn't need any settings, but you can customize some formats for yourself using the Options button...
Usage . You either drag necessary files and even folders (directories) in the program window, or select the ones you need through the Add files menu...
To optimize files, click Optimize all files

The optimized files will replace the source files, and the category hierarchy will also be preserved. Opposite each file statistics will be shown, as a percentage of original size The optimized version of the file weighs.
After completing the work, statistics on the number of processed files will be displayed below in the status line, as well as how much was saved.

In my opinion, File Optimizer does its job very well.
The only negative is that if the list of files is large, you can wait a long time for results, but it’s worth it.

If you are interested in details of optimization methods that can be configured in your own way, then we will talk about setting up and using utilities for image compression

Compress PNG without losing quality

Let's look at 3 programs for PNG optimization:

Adobe Photoshop
OptiPNG
PNGOUT

Let's compare them in terms of image compression quality. We will compress nginx.png from the previous section. The original weight is 27.5 KB.

Compress PNG using Adobe Photoshop

The first one on the list is Photoshop, which is well known to everyone. A multifunctional processor for a designer that can do almost everything, including compressing images.
Open in Photoshop File-Save for Web or use a combination Alt+Shift+Ctrl+S

As a result, we get 22.7 KB, i.e. shrank by 17.5%

Unfortunately, most graphics programs are unable to unleash the full potential of the algorithms used to compress PNG. The main reason is that to determine the optimal compression strategy, they use heuristic algorithms that allow, without performing compression, to estimate the effectiveness of certain parameters, which, as a result, gives large percentage errors. Therefore, to compress PNG we use utilities specially created for this purpose, namely OptiPNG and PNGOUT.

Using OptiPNG to Compress PNG

How to install and use OptiPNG

We downloaded .exe, uploaded it to C:\Windows, took the desired PNG file, and put it in some folder. Now, using FAR Manager or another file manager with console support, go to this folder and enter the command into the console

Optipng -o7 nginx.png

The command forces you to compress the PNG in the folder. Later we’ll look at a simple option on how to do compression in one click.
But first, let's take a look at the result.

18.8 KB, i.e. shrank by 31.6%, almost a third. Not bad at all, isn't it? Photoshop turned out much worse.

Using PNGOUT to Compress PNG

How to install and use PNGOUT

Everything is exactly the same as for OptiPNG. Download PNGOUT.exe, drop it into C:\Windows, open the folder with PNG in a file manager, for example, Far Manager, and write in the command line

Pngout nginx.png

The result is below

The result is 23.4 KB, i.e. managed to compress by 15%. Very good.

In general, I’ll say right away that I had different results with different files, in some places PNGOUT worked more efficiently, in others OptiPNG, so I advise you to run the images one by one through both utilities.

How to quickly compress PNG in OptiPNG and PNGOUT

Create a png.reg file and write the registry data there

Windows Registry Editor Version 5.00 @="Run OptiPNG on Folder" @="cmd.exe /c \"TITLE Running OptiPNG on %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \ "%%f\" \"" @="Run PNGOUT on Folder" @="cmd.exe /c \"TITLE Running PNGOUT on %1 && FOR /r \"%1\" %%f IN (*. png) DO pngout \"%%f\" \""

Then you run this file and write the data to the Windows registry.
Now, when you click on a folder with PNG files that need to be compressed, select the commands you need, compression will occur automatically for all images at once.

To remove everything from the context menu, write the following code into png.reg and run it

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT] [ -HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

JPG, JPEG compression without quality loss

To optimize JPG, JPEG, by analogy with PNG, there are utilities: jpegtran and jpegoptim. Of course, you can use Photoshop, but for JPG and JPEG compression I highly recommend using them.

How to install, configure and use jpegtran

jpegtran - powerful utility, which allows you to perform both simple JPG compression without loss of quality, as well as compression with a certain level of anti-aliasing, and even conversion to Progressive JPEG.
You can download jpegtran here http://jpegclub.org/jpegtran/ (look for and download jpegtran.exe).

How to compress JPG, JPEG using jpegtran

Upload jpegtran.exe to C:\Windows
Then open the folder with the desired JPEG in Far Manager and enter in the console

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Basic optimization 1.jpg # -copy none removes metadata from JPG # -optimize optimizes the image

Progressive JPG, JPEG

It's such JPG type, which, when the page loads, first shows the general outline, then loads and brings the image quality to maximum. It is very convenient for slow mobile Internet, and therefore it is necessary to use it.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Transforms the 1.jpg format to Progressive

How to check if an image is a Progressive JPEG

Advanced features of jpegtran

Here are all possible options for using jpegtran

Jpegtran --help usage: jpegtran inputfile outputfile Switches (names may be abbreviated): -copy none Copy no extra markers from source file -copy comments Copy only comment markers (default) -copy all Copy all extra markers -optimize Optimize Huffman table ( smaller file, but slow compression) -progressive Create progressive JPEG file Switches for modifying the image: -crop WxH+X+Y Crop to a rectangular subarea -flip Mirror image (left-right or top-bottom) -grayscale Reduce to grayscale ( omit color data) -perfect Fail if there is non-transformable edge blocks -rotate Rotate image (degrees clockwise) -scale M/N Scale output image by fraction M/N, eg, 1/8 -transpose Transpose image -transverse Transverse transpose image -trim Drop non-transformable edge blocks -wipe WxH+X+Y Wipe (gray out) a rectangular subarea Switches for advanced users: -arithmetic Use arithmetic coding -restart N Set restart interval in rows, or in blocks with B -maxmemory N Maximum memory to use (in kbytes) -outfile name Specify name for output file -verbose or -debug Emit debug output Switches for wizards: -scans file Create multi-scan JPEG per script file

How to quickly automatically compress JPEG using jpegtran in Windows

You won't be able to compress via the context menu due to the way the utility works, however, you can set up compression of multiple JPEGs at once automatically.
To do this, we need to create a file with the extension .bat (to help) and write it there

Cd/d. for %%j in (*.jpg) do call:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2 "

How to install, configure and use jpegoptim

How to compress JPG, JPEG using jpegoptim

Upload jpegoptim.exe to C:\Windows. Then open the folder with JPG images using Far Manager and enter into the console

Jpegoptim *.jpg --strip-all --all-progressive

How to optimize several JPGs, JPEGs at once using jpegoptim

Unlike jpegtran, the jpegoptim utility allows you to work with it quite well from the context menu.
Let's create a file jpegoptim.reg, for example, using Far Manager, and write there

Windows Registry Editor Version 5.00 @="Run jpegoptim on Folder" @="cmd.exe /c \"TITLE Running jpegoptim on %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

We launched it and entered the data into the registry. Now you can compress many JPEG files using the context menu, just put the desired images in one folder, RMB and “Run jpegoptim on Folder”.

If you want to remove jpegoptim from the registry and context menu, write jpegoptim.reg

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Save, run, make changes to the registry.

How well do jpegtran and jpegoptim compress jpg, jpeg

Let's move on to the tests. Take, for example, the caching.jpg file. In the original it weighs 29.5 KB

Jpegtran tests for JPG, JPEG compression quality

jpegtran -copy none -optimize -progressive caching.jpg caching.jpg

The output was 29.1 KB, compression saved 1.36%

Jpegoptim tests for JPG, JPEG compression quality

jpegoptim caching.jpg --strip-all

IN Windows Explorer this is not visible; the compression was several hundred bytes.

Well, the original file was pretty well prepared, so the compression didn't have any noticeable effect, but when you process your unoptimized images, you'll sometimes be surprised at how much you can save in size.

How to set up png and jpg, jpeg compression automatically

If you have read to this section, but are still dissatisfied with the options offered, I suggest you assemble a portable harvester yourself - a service for compressing pictures, photos, images that will work as you need right on your desktop.

Must be pre-installed jpegtran, jpegoptim, optipng, pngout Yu
Installation instructions are above.

So, for this we need to properly assemble the folder architecture. Let's say you have an images folder with its own hierarchy of subfolders with PNG and JPG that you need to process.
Create a folder optimus, put the images folder with all subfolders and files into it.
Open , open optimus in it, create a go.bat file there and write it there

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Name of the folder in which the raw images are located set folder=images echo Processing *.JPG files via jpegtran:: Create a folder in which the compressed jpg will be stored. In our case, this is jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: For each .jpg, we optimize using jpegtran. Output.jpg will be written to jpeg_images for /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~dp0 =! %home_path%!fn:%~dp0=!) echo Processing of *.JPG files via jpegtran is completed:: We indicate that the run should now be carried out in a new folder jpeg_images set folder = jpg_%folder% echo Processing of *.JPG files via jpegoptim for /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Processing of *.JPG files via jpegoptim completed echo Processing of *.PNG files via optipng xcopy /y /t /c /i "%folder%" "png_%folder%" for /r %folder% %%a in (*.png) do (set fn=%%a& optipng -o7 %% ~a -out %home_path%png_!fn:%~dp0=!) echo Processing *.PNG files via optipng completed set folder=png_%folder% echo Processing *.PNG files via pngout for /r %folder% %%a in (*.png) do (set fn=%%a& pngout %%~a) echo Processing of *.PNG files via pngout completed pause

The code is commented out in important parts. In fact, nothing complicated, you can figure it out if you need it.

Now save go.bat and run it.

If there are a lot of files, image compression will take some time. Wait until the console notifies you that the process has completed.

Compression takes place by separating JPG files separately, which are now located in jpg_images, and PNG files separately, which are located in png_images.

If you need to change quality or other parameters, see the description of the utilities above and change the code to suit your needs.

How to Optimize and Compress GIF

Finally

In this article, I tried to cover as fully as possible the methods of optimizing PNG and JPG. If you have any questions or additions, write in the comments, we’ll discuss

According to Yandex employees, “pictures are very important part our search. They help users see the transit of Venus across the solar disk, find out what a Yorkshire terrier or a new Tesla sedan looks like, the composition of a lead zeppelin group and how to tie a tie.”

By ranking in search based on images, the site will be able to receive a significant share of traffic. Including by commercial inquiries, when the user wants to see what a particular product looks like. In addition, such positive behavioral factors as the number of transitions, duration and depth of site viewing by visitors who came from image search also influence the site’s ranking in organic search for all queries. And attracting the target audience to a commercial site, even from such a source as image search, with proper presentation of content, can attract a significant number of targeted visitors to the site who will perform conversion actions.

Viewing images in the Yandex.Images service

The material will discuss standard image optimization methods that are applicable to all types of sites and are taken into account by all search engines. Now each of them will be considered in more detail, and an expanded description of each item of recommendations with explanations will also be given.

Image optimization

The presence of high-quality images on a website is one of the components of the success of most Internet projects. Users prefer to receive information in the form of graphic images rather than text. It is perceived faster and better, and is easier to remember. To increase website conversion and improve behavioral factors constant development of graphic content is necessary. You need to try to visualize all aspects and nuances of the available information as much as possible. This way users will want to view more pages site, it will be easier for them to make a choice and perform a conversion action.

The benefits of image optimization are underestimated by many experts. However, thanks to simple steps, you can get an excellent result in the form of loyal users, the number of which will increase from image search, as well as from organic search.

Alt and title image attributes

The most important image attributes that can be specified in the corresponding HTML code tag are the alt and title attributes. Their values are one of the main sources of image information for search engines.

alt attribute — This is an alternative source of information for users who have disabled images in their browser. If the alt attribute is defined, then when it is impossible to show the image, the attribute text will be displayed in its place:

An image with a specified alt attribute

Without the alt attribute set, the image will be shown as blank:

Image without attribute specifiedalt

It is especially important to describe images using the alt attribute for sites whose content consists primarily of images.

The title attribute provides additional information about the image. The text contained in this attribute appears when you hover over the image:

Imagecgiven attributetitle

So, let’s consider the main recommendations of search engines for working with website images, so that based on them, as well as on the basis of website promotion practices, we can determine a list of actions that can help you get maximum effect from image optimization.

Don't embed meaningful text into images. In other words, all important inscriptions must be in text form.

Give image files detailed, descriptive names. It is best to use 1-2 words in the file name that describe the image.

Add detailed text to the tagalt.

Best option:

Provide enough context for images. The text surrounding the image should correspond to what is depicted on it.

Think about how best to protect your images. This can be done in a variety of ways, such as adding a watermark, placing a code to embed the image on another site, or making the images available under a license that requires a link to the source, such as a Creative Commons license.

Posting good quality photographs. High-quality photos not only help users see all the fine details in an image, but they also perform better as thumbnails in search results and are more likely to be clicked by users.

Create a separate one for each image landing page, where all information related to it will be collected.

This is relevant for sites where images are one of the main elements of content, or for online stores. Try to place images at the top of pages where they can be seen at a glance.

This will quickly interest the user in viewing the page to the end. Try to structure your directories in such a way that similar images

were stored together. Specify the width and height of all images.

This will speed up page loading, because... Browsers can render them before images are loaded if they know the amount of space reserved for non-replaceable elements.

Don't forget about the texts describing the picture:
Captions for pictures (alt, title);
Text adjacent to the image;
Texts of links to pictures from other pages and from other sites;
Texts and titles of short documents framing a single picture.

It is from the texts that refer to pictures that Yandex finds images based on user requests.

Yandex indexes only standard images graphic formats(JPEG, GIF and PNG). Before uploading an image to the site, you should make sure that it is saved in one of these formats.

The ranking is also affected by the quality of the image itself.

In the search results, for each image found, a link to the page on which text description The pictures better match the words in the query. Thus, the text content of a page is an important ranking factor in image search. As with Google, it should contain as much information as possible about what is shown in the image, and this should complement the text.

Steps to take to optimize images

1. Images must be stored and accessed on the same server and hosting as the site itself. This is one of the indicators of site quality for search engines. Only serious sites and companies can afford to store images on their hosting or server, because... this requires additional material costs. In addition, such images will load faster.

2. Use original high quality images with maximum resolution. These images, in turn, must be processed by the site management system and displayed on the corresponding pages in a smaller size so that the page loads quickly. When you click on an image, it should open in the largest possible original size that is available.

3. The alt and title attributes of images must be filled in such a way as to accurately describe its content. They must use 1-2 keywords for which the page is optimized. It is best if this is the main keyword that matches the title of the page and the anchor of the link to it from the main menu of the site.

4. Place a caption under the images, which will also appear below when you click on it. The signature can be identical to the alt attribute. The caption must be in the same paragraph “P”, table cell “TD” or “DIV” tag as the image.

5. The page on which the image is placed must contain appropriate text. The text should also include what is presented in the image. It, in turn, complements this text.

6. In the attributes, specify the height and width of the image.

7. Rename image files, writing them in transliteration. In the file name, indicate in 1-2 words what is contained in the image.

8. You can additionally add the LONGDESC attribute to images. More details about it: http://htmlbook.ru/html/img/longdesc.

9. In the properties of jpg files original images fill following fields:

— Title: matches the alt attribute of the image;

— Subject: the name of the section to which the product belongs;

— Rating: 5 stars;

— Key words: keywords from the page of the section to which the product belongs;

— Comments: description of the product from the “About product” field on the product page;

— Dimensions: maximum original size;

— Width: maximum original size;

— Height: maximum original size;

— Horizontal resolution: maximum original value;

— Vertical resolution: maximum original value;

— Color depth: maximum original value;

— Owner: company name;

— Computer: company name.

Conclusion

As you can see, there are enough tips and recommendations for optimizing images from the search engines themselves to have a general idea of what needs to be done so that the site can rank normally in image search. Many of the recommendations overlap, some are unique. To implement most of the recommendations, one-time actions are sufficient, thanks to which a stable positive result will be achieved. Don’t neglect the opportunity to get a significant number of visitors to your resource. You should always post as much graphic content as possible, thanks to which the site can win the trust of regular and new visitors.