Optimization of PNG and JPEG without loss of quality. Part 2

    Hello Habr!
    So the time has come for the second, and, I hope, the long-awaited part. The abbot recommend reading the first part , because without this it will be difficult to understand what I will write about. In this part, I will move from theory to practice, namely, I will show a small project for complex image optimization.


    image

    Image Catalyst is a collection of programs for the comprehensive optimization / compression of PNG and JPEG images without loss of quality within the same format. It makes sense to use web pages to speed up the loading of graphic elements (in particular, sprites).

    I want to warn you right away, I am not responsible for the operation of this application. You use this application at your own risk. It is strongly recommended that you make a backup copy of the images before optimization to avoid undesirable consequences and carefully study this article.

    You can download Image Catalyst 2.0 from here (windows only).

    PNG optimization tools


    The following applications are used for the comprehensive optimization of PNG images:
    I talked about these applications in detail in the first part.

    JPEG optimization tools


    The following applications are used for comprehensive optimization of JPEG images:
    I also talked about these applications in detail in the first part.

    Additional software


    Today, the application is also used - iniTool 1.20 from 02/07/2010.

    PNG optimization




    PNG optimization options

    Both methods of displaying images in the browser at boot are supported:
    • Non-interlaced - browsers download them sequentially, from top to bottom, as information arrives from the network.
    • Interlaced - until the file is fully downloaded, the image in the browser is displayed in low resolution. Interlaced display reduces subjective download time and shows users that the image is loading, but interlaced display also increases file size.
    PNG optimization algorithms

    Based on PNG optimization parameters, the following optimization algorithms were created:
    • Non-interlaced - uses non-interlaced optimization parameters;
    • Interlaced - uses Interlaced optimization parameters;
    • Default - optimizes the image, but does not change the optimization parameter.
    PNG optimization modes:

    In the last part, we talked about, the more time spent on PNG optimization, the higher the degree of optimization, which is why several optimization modes were developed:
    • Fast - the compression ratio and optimization speed are quite high;
    • Normal - in comparison with the Fast mode, the optimization speed is 3 times lower on average, the compression ratio is 1.5% higher on average;
    • Xtreme - in comparison with the Normal mode, the optimization speed is 4 times lower on average, the compression ratio is 1% higher on average.
    In some cases, the compression ratio may be higher by 10% or more.

    JPEG optimization




    JPEG optimization options

    Two methods of displaying images in a browser at boot are supported:
    • Optimize - creates an improved JPEG file with a slightly smaller file size. Browsers download them sequentially, from top to bottom, as information comes from the network.
    • Progressive - the image is displayed as a sequence of overlays, which allows you to display a low-resolution image until it is fully loaded, i.e. first you will see a low-quality image, then, as graphic information arrives, the image quality will gradually improve. Internet Explorer, including the eighth version, does not support progressive JPEG download, it only shows after a file has been fully downloaded, which is very different from the behavior of the “traditional” JPEG when the image is displayed from top to bottom as it downloads.
    JPEG Optimization Algorithms

    Based on the JPEG optimization parameters, the following optimization algorithms were created:
    • Optimize - uses the Optimize optimization parameter;
    • Progressive - uses the Progressive optimization parameter;
    • Maximum - the image size obtained by Optimize and Progressive by optimization methods is compared by size, and the file with the smallest size is selected, it makes sense to use it if the image size is less than 10 KB, in other cases, the Progressive optimization method almost always exceeds the Optimize method;
    • Default - optimizes the image, but does not change the optimization parameter.

    Optimization tools

    • By default, the number of simultaneous PNG image processing threads is equal to the number of cores in the processor, if you want to change the number of simultaneous threads, open the Tools \ config.ini file with any test editor, and follow the instructions. It is not recommended to set the number of simultaneous threads greater than the number of cores in the processor;
    • By default, PNG and JPEG images are optimized in subfolders of the specified folder. If you want to disable this function, open the Tools \ config.ini file with any test editor and follow the instructions.
    • By default, the Images.cvs file is created, if you do not want to create this file, open the Tools \ config.ini file with any test editor, and follow the instructions.
    • By default, when optimizing JPEG files, all Metadata are deleted, if you do not want to delete certain Metadata, open the Tools \ config.ini file with any test editor, and follow the instructions.
    • By default, when optimizing PNG files, all Chunks are deleted, if you do not want to delete certain Chunks, open the Tools \ config.ini file with any test editor, and follow the instructions.
    • By default, when optimizing PNG files, the optimization of the ColorType and BitDepth parameters is applied, if you do not want to change these parameters, open the Tools \ config.ini file with any test editor and follow the instructions.
    • By default, when optimizing PNG files with an alpha channel, the “Dirty Transparency” function is used. If you do not want to use this system, open the Tools \ config.ini file with any test editor and follow the instructions.
    • It is not recommended that you run more than one copy of Image Catalyst in a single image optimization session.
    • The name and / or address of the images must not contain characters such as & ^%!

    Thank you for your help


    I wanted to separately thank x128 and res2001 (if the article gets +100, then I will send an invite), without these people my project could hardly be realized. I also wanted to thank all the author of the applications that are used in Image Catalyst.

    A few words about competitors


    Here I will tell a few words about competitors, or rather about one of them, because I consider him a worthy competitor. ScriptPNG and ScriptJPG are quite interesting projects, unlike Image Catalyst, the optimization of PNG and JPEG images is divided into two separate projects and there is no support for parallel PNG optimization. I also recommend visiting the project website itself , as Recently there appeared articles on PNG optimization.

    And a bit more...


    There is one rather interesting project - JPGCrush - created specifically for optimizing JPEG without losing quality, which in turn is an add-on over JPEGTran. Creates JPEG exclusively in Progressive format. The only drawback is that it only works on * nix systems. If anyone can help me with this problem, please contact in PM.

    It would be nice to make a GUI for my project, but I don’t have such knowledge, if anyone has the time and desire to implement the GUI, then write in PM.

    Also popular now: