Image optimization for the site: batch processing using jpegtran | optipng | pngout

1. Prerequisites
2. We use recommendations for images
3. Archive structure
4. Brief instructions for work
5. Additions
6. x64 (aka andi)

Site without images - an anachronism. So many people think, and it is not devoid of common sense. Remember, how long have you been to the site for the last time and how long have you been on it?

Text data is much smaller than the image. But people are known to love their eyes. Therefore, the pictures will be an undoubted advantage of the story.

In general, speaking about the text, we mean both its content and a convenient visual presentation, including paragraphs, lists, quotes, tables. However, this is not enough, and even news sites are trying to provide images of journalists.

Let's start from the assumption that images are needed. These can be photos, diagrams, simply explaining pictures.

Long ago, when Putin did not seem eternal, I made my first medical web portal. It was necessary to place pictures to the atlas. It is obvious that it is rather difficult to imagine the anatomical structure of the body without pictures, and all the more so to describe with words. And without further ado, I uploaded pictures to bmp (uncompressed format). Do I have to say that they weighed dough? Moreover, some browsers did not know how to show such pictures.

So why optimize images? A simple example is a photo. Modern phones have cameras in 8, 12 and even more megapixels. 12 MP corresponds to an image of 4000 × 3000 pixels. Depending on the complexity of the scene, this corresponds to a size of 2-5 megabytes, and even more. A dozen photos - and the page size swells up a lot. The image fits into the content area, which means the browser must first download everything, scale it and only then display it. For the weak processors or with a small amount of RAM - a disaster.

Now imagine that the user is watching the site from the phone. In this case, the page loading can simply not wait. So, the pictures need to be pre-reduced.

Someone will argue that there is no point in this; modern CMS automatically makes thumbnails when downloading images. But does everyone have their sites on VPS or VIP-rates? Download one 12 MP image may come out, but to process it, PHP will need to allocate 35+ megabytes (in theory, in fact more) for storage, and then still knows how much to create a smaller copy. Cheap tariffs immediately plunge into the excess of resources. A good hoster will ask the user to not do this anymore, a bad one will ignore it, because only money is important to him, and not the performance of services.

And so, we decided to act correctly. We preliminarily reduce the images, and then upload them to the site. So the engine is easier, and people. Everything? Not really.

Many editors retain the original chunks (meta-information, non-image parts of the file) containing additional information. For example, if you take a picture of something on the phone, transfer the file to the computer, click on it with the right key and select “Properties → Details”, you will see the data on the device: which camera you photographed, shutter speed, ISO and so on. For the user, this information is useless, so you can get rid of it.

Well, think about it, one chunk. What is there, a bunch of information that is contained? Imagine. Sometimes you get images in which hundreds of kilobytes of such data. Just today, they sent a logo of 584 KB in size to accommodate. At the same time, useful information was only 14 KB! As for me, it is not entirely correct to force the visitor to download 570 KB from above.

Let's summarize the subtotals. In order for users of the site to do well, you need to:

1. Reduce the size of the image. To help any graphic editor.
2. Throw out of the file parts are unnecessary. In fact, the user only needs a picture.
3. Try to further reduce the size of the image.

The first paragraph involves individual work on each file. It is time consuming, but it brings the best result. We open each file, cut, reduce, then save with acceptable quality.

But paragraphs 2 and 3 can be given at the mercy of special programs. Software for working with images set. Google recommends the following programs:

• jpegtran for jpg image format.
• optipng and pngout for PNG images.

A little bit about p. 3. Graphic editors usually do not bother with it. They simply save the image, choosing ahead of time laid compression algorithms with the same settings, quantization coefficients and other things. In addition, many honestly transfer the available meta-information and add their own, further increasing the file size.

Prerequisites

A year ago, they started talking en masse about the service. PageSpeed ​​Insights from google. In fact, these are recommendations of the search giant on “how to do well”. Just type in the address of the site and get a list of suggestions for optimization. There you can also download already optimized resources, including images, for your site. True, this is relevant only for the checked page.

If you have a website, be sure to look this article . Particularly useful for those using WordPress.

We use recommendations for images

It seems simple: download the programs specified by Google and run all the files on the server through them. The problem is that these utilities are console. They take only 1 file at a time. But we are not in vain in last article took the time to batch files, right?

Information from the article is quite enough to create your own file handler en masse, so I will not paint where that is. I just propose to download the ready assembly, which I use myself.

Download archive (212 KB)

Archive structure

The archive contains a folder [ OptimizeImg ]. To get started, unpack it somewhere. I have it located in c: \ temp \ but it doesn’t matter. The main thing is that the path does not contain exclamation marks.

Further. This folder contains the [ uploads ] subdirectory. Here you need to put files that require processing. The best part is that you can push at least the folder / file structure.

There are 3 more programs: jpegtran.exe | optipng.exe | pngout.exe is the very utility recommended by Google. Downloaded from the corresponding official sites / repositories. If in doubt, or just want to upgrade, download from a trusted source and replace existing ones.

And finally, the heart of tulza. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

The first file, 1.bat, recreates the structure from [uploads]. 3 additional folders are created: [jpg_jpegtran] [png_optipng] [png_pngout] with processed minimized files of their type (jpg - only * .jpg-files, the same with png).

3.bat sequentially launches three batch files for execution:

• 3-go.bat is almost the same as 1.bat. Skip jpg / png files through minimizers. The result of the work will be 3 folders (see above) with the corresponding images.
• 3-opti-to-out.bat creates the [png_optipng-to-pngout] folder, into which the files processed by optipng + pngout are written (in exactly this sequence).
• 3-out-to-opti.bat creates a [png_pngout-to-optipng] folder into which files processed by pngout + optipng are written. Similar to the previous one, only in a different sequence.

In principle, only 1.bat is enough for our needs. 3x bags appeared as a result of research and errors in the previous version of the batch file. It so happened that during the error the files for pngout were taken from the optipng directory. And what was my surprise when the launch of the old version gave 1.5 times smaller size than in the updated batch file. As a result, it turned out that double processing can “catch up” pictures well. But it takes almost 2 times more time. So decide yourself if it is needed.

Brief instructions for work

1. Download archive .
2. Unpack it.
3. Go to the newly opened [OptimizeImg] folder.
4. All files that require stinging, copy the folder [upload].
5. Run 1.bat and wait. If there are many files and they are png, wait a long time.
6. When a message appears in the black window about the need to press a key to continue, everything is ready. It remains to take the contents of the created folders and copy to the hosting via FTP, overwriting old files.

For example. Let you have a blog on WordPress. All images are stored in [ / wp-content / uploads / ]. Go to the site folder (via ftp), go to [ wp-content ] and simply copy [ uploads ] to the folder OptimizeImg of the same name. Run 1.bat and wait. After the work is finished, the content [jpg_jpegtran] (we go there!) Is uploaded to the server. Requests for existing files are answered by overwriting. A similar trick for png, but first we look at which folder - [png_optipng] or [png_pngout] - takes up less space, fill it up with its contents.

Do not be afraid to damage other files. Batniki work only with jpg / png, and only the images of these types are written to the newly created folders.

I hope someone will be useful. Successes!

Additions

1. The path to [OptimizeImg] should not contain exclamation marks ! and percent %
2. Run scripts as administrator is not necessary. Moreover, in this case, they may not work!
3. ...

Publisher

not online 13 hours

x64 (aka andi)

Comments: 2846 Publications: 395 Registration: 02-04-2009