Best program to optimize images
In an earlier article I showed an image optimization guide for web pages but I did not suggest any desktop tools to optimize images, so this topic will be discussed in this article.
I have tried several desktop programs to optimize images, and I have decided to choose the one I liked the most. The best program to optimize images in my opinion is RIOT Radical Image Optimization Tool , since it gives us the opportunity to use different external optimizers for PNG images that are the ones that allow the highest degree of optimization. And if that were not enough it has given me better results than any of the online tools.
JPG, GIF and PNG image formats
Before talking about RIOT, I consider it essential to comment on certain aspects about the different image formats it supports (gif, jpg and png) in order to better optimize our images.
GIF image format.
It is a graphic format that allows simple images and animations . The color palette is limited to 256 colors , so if an image has for example 300 colors when saved as GIF, we will lose some quality because only 256 colors can be used. Nowadays, the main use of GIF images can be seen in animated advertising banners since static (non-animated) images have gained prominence in PNG and JPG formats. It should also be noted that it supports transparency.
JPG image format.
It is one of the most used image formats today, we can see that almost all digital cameras use the JPG format. This format is also recognized by the JPEG file extension, so it must be clear that the JPEG and JPG files are the same type of file and with the same characteristics , only that the original format had a four-letter JPEG extension and for convenience JPG three letter extension is adopted.
The JPG format allows us to compress images with values ??between 1 and 100 (the higher the value, lower compression and more quality), but it is important to know that it is a compression with loss of quality, that is, the more we compress the image the worse quality will have.
This format is used in complex landscape images or images with many colors and textures. It does not sport animations or transparencies .
PNG image format.
It is one of the formats that has grown the most in recent years thanks in large part to web 2.0. The PNG format is a compression format without loss of quality . It allows adjusting the compression value between 0 and 9, with the value 9 being the highest compression.
It is the ideal format for images that have large areas of the same color or that there are few color variations within the image. It does not support animations but it does support transparencies .
The PNG format today is the ideal substitute for the GIF format , which has been somewhat outdated but is the only one that supports animations so it is still used.
GIF, JPG or PNG? What image format should I use?
This is the big question and unfortunately there is no simple answer, but in each case we will need to use one or another type of image file.
When to use GIF files?
GIF files are mandatory when you need an animated image , for example for a banner ad. They are also a good choice for simple images and even icons when we need them to have some transparency. Currently, it is giving me better results to optimize a PNG with RIOT than to use a GIF file , so I hardly use the GIF format.
When to use JPG or JPEG files?
The field of action of the JPG is quite wide, since it is an SUV, one could say that it is the most widely used format. Its use is especially suitable for images of large resolutions or images with many colors and very complex. Remember that this format does not allow you to use transparencies or animations.
When to use PNG file?
The PNG files in my opinion are the replacement of the images in GIF format, so we would use it in all cases in which we would use GIF files. This format has gained special importance within CMS since it is used for so-called emoticons and icons in general. It has the advantage that compression is without loss of quality and supports transparency . It does not support animations , there is a format known as APNG that have been animations with PNG images but at the moment it has not been extended enough and as far as I understand only FireFox and Opera support this type of animations natively.
I should also comment on an important aspect about defects in images compressed with JPG known as compression artifacts , since this format compresses but with loss of quality while PNG compression is without loss of quality (at this term lossless compression it is known as loseless compression). Look at the following image and you will understand what are the compression artifacts:
Interlaced Image Option
This option is used when we want the image to load progressively through several passes, the total area of ??the image that is becoming clear as the different passes are always visible. In the following image we can see the difference between how an interlaced image is loaded and a normal image:
Types of encoding in the JPG format (standard and progressive)
In the JPG format instead of talking about progressive coding type but it is the same as an interlaced image, that is, it is loaded in several passes. RIOT Radical Image Optimization Tool has this option in case we need it.
RIOT is free for personal use and has a clear and very intuitive interface. An installer can be downloaded from its website . When installing RIOT you have to pay attention, because in a moment it asks you to accept the terms to install a third-party application (TuneUp Utilities) that we do not need at all , so do not accept the terms and do not install it (unless you want to try TuneUp Utlities of course).
Optimize images with RIOT Radical Image Optimization Tool.
The JPG format apart from selecting the level of compression and the type of coding (progressive or standard) few other options we have when optimizing images, so I will focus on optimizing PNG files since they are the most complex and the concepts I explain for these files are identical for JPG and GIF.
We will start with a screenshot of RIOT in version 0.5.2:
- Batch work : this option allows us to optimize several images simultaneously, without having to go one by one.
- Original image size : it shows us the size of our original image without any optimization.
- Optimized image size : shows the image size after the optimization process.
- Work mode : allows us to select whether we want RIOT to make optimization decisions for us automatically or not. I recommend using the manual mode as we will adjust the settings to our liking, which is always the best option.
- Compression level : here we set one of the compression levels, I always use the maximum.
- Color reduction palettes : when we optimize an image we can reduce the color palette and thus reduce its size (JPG does not support this option). With this option we adjust the number of colors of the different palettes predefined in RIOT (256, 128, 16 colors or monochrome). RIOT also allows us to manually adjust the number of colors.
- Color quantification algorithm : here we have two options and we must select the one that suits our needs. What this algorithm does is decide which colors of the original image will be added to our palette. Next I show you the differences and what algorithm we should choose in each case:
- Xiaolin Wu color : it is the fastest algorithm and produces very precise colors so it is recommended to use it only when the original image has few colors.
- NeuQuant neural-net : it is an algorithm slower than the previous one and gives a better image quality when the original image has a palette with many colors, in fact, this algorithm only works well with palettes of more than 64 colors .
- Compress until reaching a size : this option allows us to lower the color palette until we reach the desired size (in the case of JPG instead of lowering the colors of the palette what it does is increase the degree of compression). Be careful with this option because the optimized image can be of very poor quality if we use a very low size.
- External optimizer : this is a very interesting section because it allows us to use external optimizers, which are nothing more than programs that work in console mode. By default we have 3 preconfigured optimizers:
- AdvPNG insane : it is part of the AdvanceCOMP package, which we will have to download and copy the advpng.exe file into the RIOT plugins folder.
- OptiPNG o3 : this is included by default in RIOT.
- PNGout Extreme : you must download the executable from the author’s website and copy into the RIOT plugins folder.
This is all, I hope you liked the article and that it helps you improve the loading times of your websites. For questions or queries, as always I encourage you to use the comments.