An easy way to optimize images for publishing online. Lossy and lossless data compression. Deleting and replacing images

Image optimization – an important part website promotion. Properly optimized images contribute to the highest ranking of the resource in search results and speed up content loading speed. What is image optimization and how is it done?

Image optimization is the process of reducing the size of images used in website design and articles without losing quality.

Before we begin the process of “compressing” images, we evaluate the loading speed of web pages and understand what indicators prevent us from improving the results. The PageSpeed ​​Insights service will help with this. If a page scores more than 85 out of 100 points, this is a good result and this is the number you should strive for.

For example, now the result is like this:

And after optimization:

This result was made possible thanks to the use of Google recommendations:

PNG format

How to optimize images if the PNG format is used to save them? To do this, you can use Google's recommendations:

If you plan only basic image optimization, you can use any image editing program: GIMP, Photoshop, etc. But which one is better? A small experiment will help you find out. We take an unoptimized image in PNG format weighing 293 KB:

We create two folders: “GIMP” and “Photoshop” and place the same picture in them.

How is a picture compressed without losing quality using GIMP and Photoshop editors?

The result looks like this:

Bottom line: Photoshop did a better job of optimizing the image than GIMP.

But this does not mean that you can only use these options. There are other, no less effective utilities for compressing images in PNG format. For example, and PNGOUT. The result of their work is as follows:

Despite the fact that OptiPNG lost to Photoshop by 1 KB, the program itself weighs only 96 KB, and this is a big plus. But PNGOUT has surpassed its “competitors” in all respects:

Working with programs

First of all, you need to download the OptiPNG or PNGOUT utility (or maybe both) from the official websites. Then copy the .exe files to the folder: C:\Windows.

To “simplify” the task, just copy these files from the Windows folder and place their shortcuts on the desktop. For convenience, the OptiPNG shortcut can be immediately called opting-o7 (parameter maximum compression which maintains quality). All that remains is to simply transfer the desired images to the shortcut and wait while the program optimizes them.

This method is simple, but not very convenient. Sometimes when trying to optimize a large number of images an error may “pop up”. Also, not everyone will like to constantly drag and drop files.

Therefore, there is another option for working with utilities. We create a test document, open it and write the code there (works correctly only on Windows OS):

We save the file in .reg format and in ANSI encoding, run it, agree with all the actions and you’re done. Utilities are integrated into the Windows shell.

How is image optimization carried out? The process goes like this: right click Click on the folder that contains unoptimized images in PNG format (the utility does not change files of other extensions) and select the program with which we will compress the images. You can do this with two utilities in turn.

Then the command line opens, which demonstrates the optimization process:

JPEG format

To compress a JPEG image, you need the Jpegtran or Jpegoptim tools. Of course you can use GIMP editors and Photoshop. However, Jpegtran or Jpegoptim cope more effectively with the optimization task, so we download and install both programs.

Setting up the Jpegtran utility

Activating the Jpegtran program by injecting it into the Windows shell is not a very suitable option for the utility. It will not function correctly, since the code (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) is designed to compress the weight of only one image, and not all files in the folder.

This means that you need to use a different method to activate the utility. Jpegtran does not have to be placed in the C:\Windows folder, but you can save a copy of it here. Place the jpegtran.exe program in any folder and rename it (for convenience) to!jpegtran.

Then, using Notepad++, we create a file in UTF-8 encoding (without BOM) with the extension .bat and the name!start. We put this code in it:

To optimize images, you need to place both jpegtran.exe and!start.bat files in the same folder and start the compression process using the!start.bat file:

Setting up the Jpegoptim program

The Jpegoptim utility can be integrated into the Windows shell without any problems. To activate it, you need to add the code at the end of the PMGoptim.reg file (it was already created earlier for utilities for PNG images):

The process of optimizing images using this program is simple: left-click on the folder with images and select “Run jpegoptim”.

Result of Jpegtran and Jpegoptim:

Online services

There are many services on the Internet that allow you to effectively optimize images. Sometimes the result of their work is better than the utilities discussed above.

However, online services degrade the quality when compressing images. Sometimes just a few pixels, but the distortion is still noticeable. That is, the size of the images may well suit us, but the quality leaves much to be desired.

The speed of loading web pages is one of the factors in the “attitude” of search engines towards your site. The faster the pages load, the more loyal the users are to the site - no one likes to wait a long time and waste a lot of traffic.

The (apparently) closed Google service PageSpeed ​​Insights is widely known, allowing you to check any published site for loading speed and, based on the results of the check, giving a rating on a hundred-point scale and recommendations. Usually recommendations include optimization and reduction program code, image compression, setting up server and browser caching, etc.

For the average content resource on and free CMS like WordPress (yes, I'm talking about mine and thousands of similar sites), optimization options are limited to installing caching plugins and working with images. “Shortcut” the theme and shorten HTML, CSS and JavaScript code Not everyone can, and such actions, as a rule, lead to various errors and loss of functionality.

To work with images under WordPress, there are a number of plugins that convert and compress images with or without loss, on the fly or on request. The best, in my opinion, of these plugins is EWWW Image Optimizer.

As an alternative, you can connect some kind of CDN service so that static content, namely graphics, is served from third-party servers, slightly relieving the hosting file server and speeding up page loading by distributing sources. In my case, this is done by the Photon module as part of the extremely popular and periodically criticized JetPack plugin.

All this works to varying degrees, but there is universal method optimizing images for any site that doesn't just run on WordPress - all you need is a Google account to get started.

We are talking, oddly enough, about Google Photos - a service that is designed to store photos taken on Android smartphones and backup images and videos of computer users who have installed a special utility.

Recommended by experts in the PageSpeed ​​Insights help Google process image optimization is described as follows:

Optimize your images

This rule is triggered when PageSpeed ​​Insights detects that the size of the images on the page can be reduced without much loss of quality.

general information

Try to keep the size of images to a minimum: this will speed up loading of resources. Correct format and image compression allows you to reduce their size. Thanks to this, users can save time and money.

Basic and advanced optimization should be performed on all images. As part of basic optimization, the unnecessary fields, the color depth is reduced (to the minimum acceptable value), comments are removed and the image is saved in a suitable format. Basic optimization can be done using any image editing program, such as GIMP. Advanced optimization compresses JPEG and PNG files (lossless).

Use image compression tools

There are tools that perform additional compression on JPEG and PNG files without loss or reduction in quality. For JPEG files, it is recommended to use jpegtran or jpegoptim (available only on Linux, run with --strip-all option). For PNG it is better to use OptiPNG or PNGOUT.

The last paragraph appears to describe tools that Google's servers use to automatically optimize user images uploaded to Photos. By the way, video files included in the service are also optimized, but this is completely unimportant given the continued existence of YouTube.

Let's look at an example. Today I photographed a folding knife for the next publication and ran the resulting photos through the FastStone application Image Viewer(“artistic” cropping + resizing up to 1280 pixels in width). The result was a folder with eight files weighing more than 3 (!) megabytes.

Apparently, a freshly installed viewer FastStone Image Viewer by default saves edited photos in close to maximum quality, which leads to an unreasonably large “weight” of files. But such a setting in our case is quite justified, because Google algorithms they compress photos without visible loss of quality with 100% scaling, which means that good quality images will remain so even after uploading to Google Photos.

For convenience, it is better to place the uploaded photos in new album, which can be downloaded in its entirety almost immediately after creation as a ZIP archive:

If you compare photos compressed in Google Photos with the original ones, you get significant savings.

816 KB versus 3.27 MB. At the same time, the quality of the photographs, in my opinion, did not suffer at all. Facebook and VKontakte should learn from Google how to optimize photos. Moreover, GPhotos is equipped with good image editing tools - from applying filters to manual settings contrast, brightness, saturation, etc.

Thus, Google Photos is not only an excellent cloud for storing and publishing photos, but also powerful tool optimizing images for publishing on the web. Only in the case of WordPress, do not forget to disable optimizing plugins and the same Photon jetpack module, otherwise photographs already prepared for publication will undergo additional compression, which will lead to noticeable loss quality (for example, see screenshots passed through Google Photos and then Photon in this post).

What does our module do? The main function is to optimize images as much as possible, with virtually no loss in quality. Why is this needed? There are several reasons: Saving free space on hosting, because as a rule, it is the images that “eat up” most of it. Compliance with the requirements of PageSpeed ​​Insights - requirements for site optimization, for its maximum ranking in the search engine. Increasing page loading speed by reducing downloaded traffic In addition: In July, Google will launch the Speed ​​Update algorithm and will update the mobile-first index. As part of these updates, site loading speed and portability will become a serious ranking factor. You can check if your site has problems with image size: here and here. Our OptiImg module allows you to reduce the size of images on your site by up to 99% without any visible loss of quality. Automatic compression images will save you from long and tedious resaving in third-party applications. No quotas or restrictions, buy a license and convert as many files as you need, without topping up your balance or any additional payments! Dear clients, please note that license key makes it possible to use our service without restrictions; after the license key expires, access to the service will be possible, but you will not be able to receive updates for our module. Also, please note that when purchasing an extension, you do not need to change the club name in the module settings. The module works on the “set it and forget it” principle. Any image uploaded to the information block will be automatically compressed! All images are optimized in 1 click, all images uploaded to information blocks, the media library or when exchanging with 1C will be compressed automatically. this moment JPEG and PNG formats are supported. HTTPS - protocol supported. PHP7 - supported. Demo period allows you to process 1000 images. Every day, using our module for 1C - Bitrix, up to 500 thousand images are processed! You can check the compression level on the module website. Please note that the module is almost entirely written in D7, on versions of 1C - Bitrix younger than 16 - it may not work correctly. How to start using it? To make your life easier, our team is always ready to install a module on your website running 1C - Bitrix and perform optimization yourself, for this, after purchasing, send a request to our e-mail - [email protected] with the subject "Installation", in the body of the letter indicate the coupon code and access to the site on which you want to carry out the work. Dear customers! Do not forget to share your experience of using our products, leave reviews, write in discussions and on our email address - [email protected], we are always happy to help you and receive feedback!

From AlfaGroup

Buy: 2,000 1,800 rub.

Screenshots

Description

Technical data

Published: 10/17/2015 Updated: 03/28/2019 Version: 1.3.6 Installed: More than 1000 times Suitable editions: “First Site”, “Start”, “Standard”, “Small Business”, “Expert”, “Business”, “ Corporate portal ", "Enterprise" Adaptability: No Composite support: No

Description

What does our module do?

The main function is to optimize images as much as possible, with virtually no loss in quality.

What is it for?

There are several reasons:

1. Saving free space on hosting, because As a rule, it is the images that “eat up” most of it.
2. Compliance with the requirements PageSpeed ​​Insights - requirements for site optimization for its maximum ranking in the search engine.
3. Increasing page loading speed by reducing download traffic

Besides:

You can check if your site has problems with image size:

Our module OptiImg allows you to reduce the size of images on the site up to 99% without any visible loss of quality.

Automatic image compression will save you from long and tedious resaving in third-party applications.

No quotas or restrictions, buy a license and convert as many files as you need, without topping up your balance or any additional payments!

Dear customers, please note that the license key allows you to use our service without restrictions; after the license key expires, access to the service will be possible, but you will not be able to receive updates for our module.

Also, please note that when purchasing an extension, the club name in the module settings does not need to be changed.

The module works on the “set it and forget it” principle. Any image uploaded to the information block will be automatically compressed!

All images are optimized in 1 click, all images uploaded to information blocks, media library or when exchanging with 1C will be compressed automatically.

Currently JPEG and PNG formats are supported.

HTTPS - protocol supported.

PHP7 - supported.

The demo period allows you to process 1000 images.

Every day with the help of our module for 1C - Bitrix, processed up to 500 thousand images!

You can check the compression level on the module's website.

Please note that the module is almost completely written in D7, on versions of 1C - Bitrix younger than 16 - may not work correctly.

How to start using it?

To make your life easier, our team is always ready to install a module on your website running 1C - Bitrix and perform optimization yourself, for this, after purchasing, send a request to our e-mail - [email protected] with the subject "Installation", in the body of the letter indicate the coupon code and access to the site on which you want to perform the work.

Dear Clients!

Don’t forget to share your experience of using our products, leave reviews, write to discussions and to our email address - [email protected], we are always happy to help you and get feedback!

Reviews (10)

Overall rating: Total reviews: 10

A good solution for optimizing images

As of February 25, 2019, the solution is completely not working, even on their website http://www.optiimg.ru/ you cannot directly compress the image, it freezes after loading.

We apologize, the solution is working, but it doesn’t work on our hosting, the problem was not in the solution, but as a person from technical support clarified, “the problem lies at the level of network communications of the hosting centers.” The technical support itself turned out to be very active in solving our problem and personally negotiated with the hosting of our site.

The module is great!!!

As they wrote below, I agree, but this is the only decision that I have not regretted! The module works quickly and does not freeze. I cleaned the site by 3 GB. It was 5 GB and became 2 GB.
Super module, well done!) I recommend)

Excellent technical support and cool module

I was surprised by the immediate help from technical support; they responded immediately on Sunday evening.
The module is very cool, I have been looking for a similar solution for a long time. I recommend!

Hello

Technical support works instantly, within 10 seconds they already responded in the online chat and answered questions! The program is fire, especially when there are a lot of pictures! I recommend to everyone!

Excellent technical support

There were problems with the operation of the module, I contacted technical support. support solved the problem very quickly, thank you.

Good decision

Perfect solution! The guys installed everything themselves and compressed the images by 40%. Thank you!

So far the only purchase decision we have not regretted

So far this is the only purchase decision we have not regretted. Cleared 5 GB.

Very useful module and excellent technical support!

Thanks to the module, it was possible to double the speed of the site, which is very important for an online store with a large number of images. Technical support helped to quickly resolve any issues that arose and patiently explained all the details.

Great module, great support.

We purchased the module, support immediately got involved and set everything up. Thanks to photo optimization, Google PageSpeed gives the site a score of more than 80 on most pages. I recommend this solution to everyone.

Great module

I tested the site on Google and it turned out to have big pictures. I was thinking about how to optimize it. A simple and inexpensive solution was found. The guys from the support team installed it themselves, wrote everything down, now when loading images it works automatically and compresses everything to optimal sizes. I immediately installed it on the second site, I’m very pleased. I recommend.

Discussions (76)

Discussions (76)

I bought, paid, optimized the pictures. Everything is cool, except for one glitch that this module causes. Namely, when I try to edit a product from the front of the site, a fatal error appears

Detail picture:
Access to undeclared static property: Alfa1c\Optiimg\OptiImg::$_1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
#0: OptiImgEvents::CompressOnResize(array, array, NULL, string, string, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
#1: ExecuteModuleEventEx(array, array)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
#2: CAllFile::ResizeImageGet(array, array, integer, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
#3: Bitrix\Main\UI\FileInputUnclouder::getSrcWithResize(array, array)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
#4: Bitrix\Main\UI\FileInput->getFile(string, string, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
#5: Bitrix\Main\UI\FileInput->show(array, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
#6: include(string)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

It doesn’t always come out, but very often. At the same time, sometimes on the same product there is a glitch at first, but the second or third time there is no glitch.

Sergey Zabotin, judging by the fact that the function name is obfuscated, you continue to use the demo version, remove the module completely and install it again, if the error persists, write to us at [email protected] we will help you.

What capabilities does the module have if images are stored in the clouds? For example, what if it's Selectel?
As far as I understand, the module compresses both during loading and resizing, but does not compress if the images are already in the “clouds”?
What are your plans in this direction?

Gavril Scriabin, CMS uploads files directly to third-party clouds; for obvious reasons, our module cannot work on the cloud side; accordingly, only if you first process the files and then move them to the cloud.

It will work with the Bitrix cloud, because... Bitrix files in the cloud are updated from time to time.

Good afternoon
For what period is the license key valid? (updates)

Ivan Prilepin, Updates are available for 1 year, access to the server is not limited in time.

1.2.8 version.

Roman Petrov, Write to us by email, we’ll sort it out.

I bought the optimizer a year ago, then I used it very little, now I wanted to use it again, but I got an authorization error?! Should I buy it again?
Why should I buy it every year for 100 photos?

Roman Petrov, You can buy an extension if you want to update the module; if the module version is older than 1.2.2, then you will have to update, because In this version there was a big refactoring; the server to which our module accesses was changed. If your Current version newer, then write to us by email, [email protected]- let's figure out why the error occurs.

What's new

1.3.6 (28.03.2019)	Fixed minor bugs in events
1.3.5 (15.03.2019)	Added option for safer file replacement Rewritten class to work with events
1.3.4 (20.01.2019)	Added animation to the progressbar Removed deprecated methods
1.3.3 (12.06.2018)	The GPSI test has been moved to the analysis page
1.3.2 (06.06.2018)	Minor fixes
1.3.1 (05.06.2018)	Added the ability to check the page in GPSI ImageJpeg compression option marked as deprecated, option to enable removed
1.3.0 (24.04.2018)	Fixed errors with Cyrillic folders. Minor interface improvements
1.2.9 (22.02.2018)	Added correct handling of the situation when the cURL library is not installed on the server.
1.2.8 (24.01.2017)	Fixed a bug with module access rights
1.2.7 (14.12.2017)	Fixed a bug that caused temporary files to overflow.
1.2.6 (04.12.2017)	Improved stability
1.2.5 (15.11.2017)	Changed the way to get a compressed file
1.2.4 (30.10.2017)	Fixed compression event bug
1.2.3 (25.10.2017)	Fixed errors in language files
1.2.2 (24.10.2017)	Module structure changes Refactoring for D7
1.2.1 (22.10.2017)	Added the ability to set the port Added a filter for errors and the ability to clear the processing log
1.2.0 (20.10.2017)	Methods rewritten Improved performance Added multithreading
1.1.9 (17.10.2017)	Improved stability performance Bugs fixed
1.1.8 (03.10.2017)	Fixed position saving error Fixed error sending statistics
1.1.7 (01.10.2017)	Major module refactoring The module has been rewritten for D7 Class structure changed Improved stability Improved performance Removed legacy file manager mode Added correct error display Minor bugs fixed
1.1.6 (22.04.2017)	Minor code refactoring for D7 Fixed a bug where on-the-fly compression might not work under certain conditions. Added the ability to exclude directories
1.1.5 (13.04.2017)	Bugs fixed It is now possible to enable/disable on-the-fly compression in the module settings. WARNING: if you are using compression events in init.php, before installing this update they need to be removed!.
1.1.4 (21.03.2017)	Removed the need to use allow_fopen
1.1.3 (19.02.2017)	Added the ability to log Added the ability to analyze the site before starting optimization.
1.1.2 (14.02.2017)	Fixed a bug that led to substitution of images when the checkbox in the information block was checked, create an image from a detailed one even if it has been created.
1.1.1 (30.01.2017)	Added the ability to specify specific folder in simplified mode Fixed a bug where statistics were not sent to the server
1.1.0 (30.01.2017)	Fixed a bug where sending files would not stop if the key was missing. Fixed a bug where files located in a folder that included empty non-empty subfolders were not compressed. Added the ability to continue the process from the last processed file. Improved performance. Statistics are now sent when the module page is loaded.
1.0.9 (20.01.2017)	Fixed critical error in file manager mode. Fixed an error with the upload folder being clogged when processing was unsuccessful. Added the ability to not keep statistics.
1.0.8 (15.12.2016)	Added support for the OnAfterResizeImage event to compress images modified using the ResizeImageGet method.
1.0.7 (14.12.2016)	Fixed a bug with the page navigation template
1.0.6 (19.10.2016)	Fixed work with upper case extensions. Added the ability to skip broken files in simplified mode.
1.0.5 (25.04.2016)	New interface
1.0.4 (16.02.2016)	Fixed problems with displaying errors
1.0.3 (14.02.2016)	Redesigned interface Added the ability to compress using the imagejpeg function Bugs fixed Some functions have been improved and new ones have been added.
1.0.2 (02.02.2016)	Added page navigation for sections

Installation

Installation is standard from Marketplace.

The module is accessed through the section

Service -> Image Optimizer or follow the link:
/bitrix/admin/optiimg_admin.php

Module settings:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Please note that for the module to work, you must enter the key received by email after purchase in the “Key” field.

The solution uses the cURL library, as a rule it is enabled by default; if not, contact your hoster or system administrator for help.

We also draw your attention to the fact that the speed of operation directly depends on the speed of the server’s file subsystem and the communication channel.

The module can also compress images on the fly, for example, those added to an information block element. To do this, in the module settings, check the boxes next to And Compress images when resizing.

Support

How to use our module correctly:

1. Install the module from the marketplace.
2. Go to /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
3. Set the compression quality, check the boxes Compress images when uploading And Compress images when resizing, if your site works on https protocol then enter 443 in the port field or leave it blank.
4. Go to file manager and delete the /upload/resize_cache/ folder
5. Go to the interface for working with the module /bitrix/admin/optiimg_admin.php
6. Press the button Optimize

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 throughput hosting. 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 right-clicking on an 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 > Options > View, uncheck Hide extensions of known file types, and select the Show radio button. hidden files, folders and disks." 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 They 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 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 an excellent 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. He did his 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 perfect for tiny ones decorative elements pages that are not designed for scaling.

.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 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 they're truly needed.

• 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 - storage format raster images, 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 you 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 all social networks have their own requirements for the size of published images. By bringing this parameter into line with the required one, you will achieve maximum performance pages.

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 Mac, it's quite easy to recognize images Low quality. Therefore, most designers have a 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. The main drawback is that 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 the new file to your computer.

If it is large enough (more than 350 KB), first reduce the image size, and then turn to TinyPNG. If you are downloading photos from an iPhone, you can send them by mail, having first 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 images 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 a .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 just 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. Best format for screenshots - .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 particular picture quality;
• Picmonkey. The necessary functions are available and the interface is intuitive.

Free desktop tools

• GIMP;
• Paint.net. The best Microsoft version 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 each image has a corresponding Alt tag in the image code:

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

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.

From the author: Every developer knows that every image matters when it comes to web performance and user experience. Images are the low-hanging fruit of performance optimization. Compression without visual loss of quality can benefit organizations by reducing the weight of pages without compromising the user experience, improving productivity and reaching more audiences. There are many techniques for determining which image to upload, but those “right images” still need to be created. The goal of web developers and performance services should be to provide optimal images to all users, on all types of devices and in all browsers. (Another goal should be accessibility, but that's a topic for another article!).

Determining the Images You Need

There are several front-end methods for serving the correct images, among which are media queries for background images and tags with the srcset attribute for foreground images.

By using @ media queries you can set which background image to use for specific resolution screen and screen density. For example, you can send the image lowers.jpg to an old laptop, and hires.jpeg to an iPad Pro:

header ( background-image: url(img/hires_header.jpg); ) @media only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px) ( header ( background-image: url(img /hires_header.jpg);

header( @media only screen and (min - device - pixel - ratio: 2) and (min - width: 1024px) ( header( background - image : url (img / hires_header . jpg ) ;

What about foreground images?

The 2013 clown car technique worked on the fact that SVG in media queries used the width and height of the container as window dimensions, rather than the browser. Fortunately, current browser support for the picture tag and the srcset attribute makes this trick and the picturefill polyfill obsolete.

The main problem with foreground images is that the browser has access to the window dimensions and screen density, but until the page itself loads, the browser does not know the image dimensions relative to the window or dimensions source files. However, the developer knows them and can enable them.

Working with picture, source and the srcset attribute is similar to media queries. You specify which foreground image to use for a specific window size and screen density:

< picture > < source srcset = "small_lowres.jpg, small_highres.jpg 2x" media = "(max-width: 768px)" > < source srcset = "default.jpg, default_highres.jpg 2x"> < source srcset = "large_lowres.jpg, large_highres.jpg 2x" media = "(min-width: 1024px)" > < img src = "default.jpg" alt = "image descriptor" > < / picture >

Please note: Always insert standard img tag in picture, including the alt attribute with a description of the image.

You can make it so that a simple tag picked up best picture without the parent picture tag and the adjacent source tag. To do this, you need to use the srcset and sizes attributes.

< img src = "default.jpg" srcset = "large.jpg 1024w, Medium.jpg 768w, Default.jpg 420w" sizes = "(min-width: 1024px) 1024px, (min-width: 768px) 90vw, 100vw" alt = "image descriptor" / > !}

Using the type attribute, you can upload images of different formats:

< picture > < source srcset = "photo.jxr" type = "image/vnd.ms-photo" > < source srcset = "photo.jp2" type = "image/jp2" > < source srcset = "photo.webp" type = "image/webp" > < img srcset = "photo.jpg" alt = "My beautiful face" > < / picture >

If the code above is something new to you, then JPEG-XR and the old MIME type image/vnd.ms-photo are used for Windows Media Photo, Microsoft's proprietary image format. Supported in IE8+ and Microsoft Edge. JPEG 2000 is jp2, will be displayed in Safari browsers when using the markup above. WebP is an image format with compression without loss of quality, works in Opera and Chrome. Firefox will choose the default format, PNG-A, SVG, GIF or JPEG.

In Firefox and IE8, you must specify a JPEG or PNG fallback. Firefox and Safari are experimenting with support for WebP images, but according to CanIUse.com there is no hint of immediate support.

If you want to understand these new but well-supported features and learn how to use them, there are some great tutorials on media queries, picture and srcset.

Almost limitless customization

One of the main problems with the code in the section above is that we only included a small portion of the possible images that fit the media type, size, and pixel density. It is possible, but difficult, to register all breakpoints, resolutions and media types for all images. I wouldn't like to write everything by hand. Fortunately, the task of creating all required images can be automated for all possible cases.

The best option– write on the server side a request for the most optimal image based on three of four criteria: window size, pixel density on the device, supported media type in the browser and image size relative to the window. Why based on three out of four? Because you can use the fact that the browser already understands the sources, you don’t need to include all possible combinations, just a couple.

If the DOM is written to the browser solely through client-side JS, as is the case in most React applications, the browser can be sent a request for one valid image, but while the code is being parsed, the user may see a partially loaded non-interactive screen (screenshot). In a more general scenario, when the site has a server side, rewriting the image request in JS is not an optimal option: the browser will first load the original when parsing the DOM, then load the second, already optimized image after updating the DOM.

If you use the progressive enhancement technique, and you should, you need to clearly understand that as soon as the HTML code of the image is parsed, the original will be loaded.

Unfortunately, the Client Hints specification, which adds information about device pixel ratio and window width to title fields HTTP requests, implemented only in Blink browsers (Chrome and Opera). By knowing the user's browser, resolution, and window size, updating all image requests can be automated, thereby leveraging progressive enhancement techniques for server-side requests. Using Client Hints, you can confirm support for the webP format (Chrome and Opera support both client hints and webP), resolution, and window size. There is a Nanovisor script on the Instart Logic website that does the same thing for Client Hints. It allows you to send optimized images in optimized formats even when Client Hints are not supported.

Browser detection techniques are not that smart, so you can take the browser string from the HTTP headers and lookup table and use them to determine the returned media type based on those headers. You can rewrite image extensions, or you can return the “correct” image type for all browsers, but with the “wrong” extension, for each image call. For example, if the image requested is foo.jpg, return the best media type for the browser, but call foo.jpg, the media type is not important. On the Instart Logic website we return webP format for Chrome and Opera browsers, JPEG-XR for Edge, etc…. we don't rewrite the image path. We simply use the original extension in the file name, for us it is jpg. We take advantage of the fact that browsers render images of the media types they recognize and don't look at the extensions (or lack thereof) in the file name. In this case, you can not change the markup and DOM in JS, and also load only one image per request.

If you are going to return different media types based on browser support but with the same resolution in the filename, you will have to store the correct image server side in the database as you will need to process different versions images with the same name. On the client side it would be necessary to request correct extension(if you know a better way or just a different one, let me know).

Automation of the file creation process

It's best to provide users with customized images for customized image ads that are supported by the browser. In the previous section, we learned how to tell the browser to use a certain size and type of image based on its functionality. However, we still need to create images of all sizes for all media types with best level compression for each individual image. The question is how to create all the images?

We need to automate image compression and resizing into multiple supported formats different browsers, devices and operating systems. It is best that the best degree and level of compression be determined for each image individually.

Optimizing images can take a long time on non-static sites, where there may be thousands, tens of thousands, or even millions of images, all of different sizes, resolutions, and media types. ImageMagick can convert images to PNG, JPEG, JPEG-2000, GIF, WebP and almost any format via command line:

Internet-wide to determine best quality All images require an army of people. Most converters and services reduce file size by reducing the quality of images at the same compression ratio or level. For example, when my sites had few images, I could manually compress them. Quality ranged from low 35% to high 88%. For galleries and other image-heavy projects, I used Adobe Fireworks to automate compression and export, saving everything as JPEG at 78% quality. Like me, most compression automation tools use the same quality settings, usually around 80%. I chose 78% purely by chance (based a little on experience). There is no magic quality value that will suit all images. There is no magic compression level that compresses all images without loss of quality.

The "correct" amount of compression depends on the content and how the image will be used. The quality level of the export usually depends on the details in the image. Depending on the content, a different level is selected for each image. Often, the more detail in an image, the lower the quality: a landscape requires High Quality below 90, and an image with a lot of detail will look good even at a level below 50.

It is still possible to automate quality settings for each image. The Instart Logic site uses computer vision, machine learning and a converter to optimize images based on content, automate the process of creating images optimized for device, browser and web resolution, and calculate the optimal compression ratio without compromising the user experience. SmartVision is an algorithmic approach that uses machine learning to automate adaptive adjustments for each image, compressing the image as much as possible without losing quality (with the exception of the first few images, on which the machine learning algorithm is calibrated). Advanced computer vision algorithms peer into image content and maximize compression levels without compromising the user's intelligence. Parviz Ahammad explained his algorithms for SmartVision much better than I did back in 2014.

Browsers have come a long way over the past 6 years, and the average weight of websites has also increased. Images are the main culprit. slow loading, and modern images are only part of the solution. Time spent optimizing images is well spent.