What is it ?
 Top Next
Radical Image Optimization Tool (RIOT for short) is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize.

It uses with a side by side (dual view) or single view interface to compare the original with the optimized image in real time and instantly see the resulting file size.

It is lightweight, fast and simple to use, yet powerful for advanced users. You will be able to control compression, number of colors, metadata settings and much more, and select image format (JPG, GIF or PNG) for your output file.

Flavours

Available as stand-alone executable (portable application) or dynamic link library for developers.

RIOT as plugin for other applications

RIOT for IrfanView: Access RIOT plugin from IrfanView by selecting File->Save for web.
Download the latest version of the IrfanView plugin
RIOT for GIMP: A plugin for GIMP is available in the GIMP registry
RIOT for XnView: An addon to use RIOT in XnView was created by Pierre-e Gougelet

License

RIOT license is available in a text file named "license.txt", which is bundled with the program.

This software uses a modified version of FreeImage open source image library. See http://freeimage.sourceforge.net for details. FreeImage is used under the FIPL license version 1.0.

About this help file

The documentation is currently incomplete. Most functions are self-explanatory as there as was no need for a help until now. More pages will be added in the future.


Main features
 Previous Top Next
RIOT main features:

· open many image types including rare/scientific types
(up to 128 bpp, integer and floating point. Ex: hdr, raw, 16 bit grayscale, etc).
· save and optimize JPEG, GIF and PNG with a simple, clean user interface
· works in dual view: (original - optimized image) or single view (optimized image).
Automatic preview of resulting image
· in-place compare function (alternativelly display the original image over the optimized image to notice small pixel changes)
· compress files to desired filesize threshold
· fast processing (all is done in memory); see instant results including resulting filesize
· batch support (process multiple files at once)
· transparency handling options
· decide if you want to keep metadata (comments, IPTC, Adobe XMP, EXIF profiles, ICC profiles).
Unsupported metadata is removed
· transfer metadata between image formats (destination format must support them)
· common tools: pan and zoom, rotate, flip
· basic image adjustments: brightness, contrast, gamma, invert
· visually reduce number of unique colors for PNG and GIF images in order to reduce filesize
(two quantization methods are available: Xiaolin Wu and NeuQuant neural net)
· resize image by using well known resample filters (ex: Lanczos3, Catmull Rom, Bicubic, and others)
· out-of-the-box support for external PNG optimizers (optipng, pngout, etc)
· the compression and the results are comparable to those of commercial products, even higher.
· Adaptive logarithmic tone mapping algorithm (Drago) used for HDR images


Supported image types

Input image types

· common bitmap images as well as Adobe Photoshop PSD files
· popular HDR formats and RAW camera images (some plugins needed)
· rare/scientific types (up to 128 bpp, integer and floating point)

Output image types

· JPEG
· GIF
· PNG


Basic workflow
The basic work-flow of RIOT involves:

1. open the source image by clicking on the Open button and selecting the file.
You can also open by drag & drop or command line.
2. choose the most suitable format (JPEG, GIF or PNG).
Read the optimization tips from the RIOT website
3. adjust the settings according to your needs until the optimized picture preview in the right pane look like you want. Also check the resulting file size displayed in the top.
4. save the image by clicking on the Save button

Also, a batch mode is available if you want to use the same settings for several images.


JPEG Quality (compression)
The quality slider allows you to control the amount of JPEG compression.
A value of 100 means minimum compression, while a value of 1 means maximum compression.

The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality.

JPEG typically achieves 10 to 1 compression with little perceivable loss in image quality.

Recommendations

From my experience, quality values between 65 and 95 are considered acceptable. Lower values can be used in certain situations.

The user needs to experiment with this slider in order to choose the perfect tradeoff between quality loss and file size.

To minimize the color information loss you should adjust also the chroma sub-sampling setting.


Chroma sub-sampling
Chroma sub-sampling overview

The JPEG image format can produce significant reductions in file size through lossy compression. The techniques used to achieve these levels of JPEG compression take advantage of the limitations of the human eye. The compression algorithm saves space by discarding additional image information / detail that may not be as noticeable to the human observer.

The human eye is much more sensitive in changes to luminance (brightness) than we are in chrominance (color information)

Chroma subsampling is a method that stores color information at lower resolution than normal.

Chroma sub-sampling in RIOT

In RIOT you will find 4 settings: none, low, medium and high. Their technical names are showed as well.
The color information is fully kept with the none setting and drastically reduced with the high setting.

Recommendations

You will find that JPEGs with text or certain details need lower chroma sub-sampling settings.

Technical details on the various levels of subsampling:

To facilitate the different compression requirements of the two "channels" of image information, the JPEG file format translates 8-bit RGB data (Red, Green, Blue) into 8-bit YCbCr data (Luminance, Chroma Blue, Chroma Red). Now, with the brightness separated into a separate data channel, it is much easier to change the compression algorithm used for one channel versus the others.

· 4:4:4 - none - The resolution of chrominance information (Cb & Cr) is preserved at the same rate as the luminance (Y) information. Also known as 1x1 (or subsampling disabled).
· 4:2:2 - low - Half of the horizontal resolution in the chrominance is dropped (Cb & Cr), while the full resolution is retained in the vertical direction, with respect to the luminance. This is also known as 2x1 chroma subsampling, and is quite common for digital cameras.
· 4:2:0 - medium - With respect to the information in the luminance channel (Y), the chrominance resolution in both the horizontal and vertical directions is cut in half. This form is also known as 2x2 chroma subsampling.
· 4:1:1 - high - Only a quarter of the chrominance information is preserved in the horizontal direction with respect to the luminance information.

* Some explanations are taken from impulseadventure.com


Grayscale JPEG
To optimize the way a greyscale image is beeing stored as JPEG, you can select
Grayscale from the JPEG settings.

An 8 bit greyscale image will be created.

Recommendations

Always select this option for greyscale images.


JPEG encoding
RIOT offers two encoding modes:
· standard optimized encoding
· progressive encoding

The standard optimized encoding produces basically a baseline (standard) JPEG that includes optimized Huffman tables. These tables are created after statistical analysis of the image's unique content.

Tis encoding mode offers half the speed of progressive mode for similar compression (usually lower, but higher with certain image types - see recommendations).

The resulting image will be rendered from top to bottom.

Technical details on Huffman coding

Huffman coding is a method that takes symbols (e.g. bytes, DCT coefficients, etc.) and encodes them with variable length codes that are assigned according to statistical probabilities. A frequently-used symbol will be encoded with a code that takes up only a couple bits, while symbols that are rarely used are represented by symbols that take more bits to encode.

A JPEG file contains up to 4 huffman tables that define the mapping between these variable-length codes (which take between 1 and 16 bits) and the code values (which is an 8-bit byte). Creating these tables generally involves counting how frequently each symbol (DCT code word) appears in an image, and allocating the bit strings accordingly. A standard JPEG encoder simply use the huffman tables presented in the JPEG standard. RIOT allow one to optimize these tables, which means that an optimal binary tree is created which allows a more efficient huffman table to be generated.

* Some explanations are taken from impulseadventure
http://www.impulseadventure.com/photo/jpeg-huffman-coding.html

Progressive encoding usually produces smaller images.
A progressive encoded image comes into focus while it is being displayed. Instead of rendering the image a line at a time from top to bottom, the whole image is displayed as very low-quality and fuzzy, which becomes sharper as the lines fill in. It gives the illusion that the page has downloaded faster even though it takes the same time to achieve the final sharpness. The progressive JPEG is created in multiple passes (scans) of the image and is similar to interlacing in GIF and PNG.

Recommendations

· when your JPEG image is under 10K, it’s better to be saved as standard optimized JPEG (estimated 75% chance it will be smaller)
· for files over 10K the progressive JPEG will give you a better compression (in 94% of the cases)

So if your aim is to squeeze every byte (and consistency is not an issue), the best thing to do is to try both standard optimized and progressive and pick the smaller one.

The other option is have all images smaller than 10K as baseline and the rest as progressive. Or simply use baseline for thumbs, progressive for everything else.

* taken from a study of Stoyan Stefanov
http://www.yuiblog.com/blog/2008/12/05/imageopt-4/

Technical details on progressive encoding

Progressive encoding divides the file into a series of scans. The first scan shows the image at the equivalent of a very low quality setting, and therefore it takes very little space. Following scans gradually improve the quality. Each scan adds to the data already provided, so that the total storage requirement is roughly the same as for a baseline JPEG image of the same quality as the final scan. (Basically, progressive JPEG is just a rearrangement of the same data into a more complicated order.)

The adv antage of progressive JPEG is that if an image is being viewed on-the-fly as it is transmitted, one can see an approximation to the whole image very quickly, with gradual improvement of quality as one waits longer;
this is much nicer than a slow top-to-bottom display of the image. The disadvantage is that each scan takes about the same amount of computation to display as a whole baseline JPEG file would.
So progressive JPEG only makes sense if one has a decoder that's fast compared to the communication link. (If the data arrives quickly, a progressive-JPEG decoder can adapt by skipping some display passes. Hence, those of you fortunate enough to have T1 or faster net links may not see any difference between progressive and regular JPEG; but on a modem-speed link, progressive JPEG is great.)

Up until recently, there weren't many applications in which progressive JPEG looked attractive, so it hasn't been widely implemented. But with the popularity of World Wide Web browsers running over slow modem links, and with the ever-increasing horsepower of personal computers, progressive JPEG has become a win for WWW use.
It is possible to convert between baseline and progressive
representations of an image without any quality loss. (But specialized software is needed to do this; conversion by decompressing and recompressing is *not* lossless, due to roundoff errors.)

A progressive JPEG file is not readable at all by a baseline-only JPEG decoder, but these programs are very old and rare.

* adapted from JPEG image compression FAQ
http://www.faqs.org/faqs/jpeg-faq/part1/section-11.html


Color reduction
Color reduction is one of the most important optimization tasks for PNG and GIF.

The color reduction is made in RIOT in two ways:
1. automatic reductions (such as bit depth reductions or when using the automatic mode)
2. manual reductions (when using color quantization)

Color quantization is a process that reduces the number of distinct colors used in an image, usually with the intention that the new image should be as visually similar as possible to the original image.

Color quantization can be used in RIOT only with the following color reduction presets:
· Optimal x colors Palette
· Grayscale 256 colors Palette

RIOT implements the following algorithms:
· Xiaolin Wu
· NeuQuant neural-net

Both algorithms have advantages and disadvantages

Xiaolin Wu produces accurate colors, but it is suitable for images with few distinct colors, when you need to keep the exact colors.

NeuQuant is superior in image quality when used with a high color image and a high number of quantized colors.

Optimization Recommendations

· Choose Xiaolin Wu for images with few distinct colors, especially when you need fewer than 64 colors
· Choose NeuQuant for images with many distinct colors, but don"t use it to output less than 64 colors, because it was not designed for this
· Reduce the number of unique colors using the slider until the image starts to look different than the original

Design Recommendations

Use as few colors as possible
Prefer solid colors over gradients when designing PNG graphics


Interlacing
Interlacing --or, more generally, progressive display--has been around a long time. GIF has supported it since 1989, TIFF since around the same time (though not in any standardized way), and JPEG since the early 1990s (though it wasn't widely implemented until 1996). PNG's method is conceptually similar to GIF interlacing and visually similar to progressive JPEG (i.e., two-dimensional).

The purpose of this feature is to allow images to "fade in" when they are being displayed on-the-fly. Interlacing slightly expands the file size on average, but it gives the user a meaningful display much more rapidly.

Recommendations

Interlacing is now deprecated .It was used in the old days with slow internet connections to show a partially loaded image.


Best compression
Activates heuristics and optimized parameter selection to achieve the best internal compression for PNG.

By default a fast compression method is used, which allows to adjust and preview some PNG settings like color reduction or greyscale with no extra waiting on compression.

You can modify this behavior by unchecking "use fastest PNG compression by default" from Tools->Options->PNG performance

Warning: SLOW FUNCTION

Adjusting PNG settings with this option checked is slow. So be sure you use it as the final compression step.

Recommendations

Always check this option before saving a PNG, as it provides maximum compression.


External optimizers


Color reduction
See PNG Color reduction


Interlacing
See PNG Interlacing


Introduction
You can use the Batch optimizer to process multiple images at once.

The same settings used for a single image are used in Batch mode, including format settings, Metadata, Mask and Image Adjustments.

Basic workflow

1. A common scenario when optimizing several pictures is to load one image, play with the settings inside RIOT until you happy with the results, then open the Batch optimizer to use the same settings for all images.
2. Load all images using the drop down menu options from "Add images". You can select there single images (keep Ctrl key pressed to select more than one image) or even add whole folders and sub-folders.
3. If you want to use additional tasks like Resize, Rotate, Flip, Compress to size you can select them from the drop down menu labeled "Additional tasks".
Note: As long as an additional task settings pane is visible, then RIOT considers you want to apply that task to all images. Make sure you select only the needed tasks.
4. Choose the output folder (that is where all optimized images will go !)
5. Adjust the Batch settings by pressing on the Settings button on top and then confirm them with "Apply"
6. Press the Start button, sit back and relax until all images are processed.

Note:
As the batch optimizer cannot work if an open image is already opened in RIOT, you must unload it to use the Batch feature. This will be done automatically.


Batch settings
Batch settings

Currently RIOT let's you choose the following options:

· Overwrite existing files (default)

When checked, all files from the destination folder having the same name with the resulting image will be overwritten. Uncheck to skip saving if a file with that name already exists in the destination folder

· Delete original files when complete

If checked, the source files will be deleted as long as they are not the same as the target. Use with care, as this will destroy originals.

· Keep original date/time

When checked, the target files will have the same date/time as the original files.

Report file size changes

When checked, after a successful execution of the batch job, the status column will contain the percentage of file decrease/increase next to each item (file in the list).


Resize (Resample)
A very common task when optimizing images is decreasing the image size in pixels.

Resizing is done using so called "resample filters" or "interpolation filters" which decide what pixels should be added in the case of enlarging or what pixels should be removed in the case of shrinking.

It has no point in using a bigger image if it is rendered on screen at a smaller size. It is even better to resize it to ensure the display quality is not modified.

When the source image is bigger than the rendered size a similar process is used (usually a plain resize, but if you are lucky, a fast interpolation filter like Bilinear, much inferior to the slower, higher quality filters present in RIOT). So to insure the program (a browser, a viewer, etc) or the device (like a digital photo frame or phone) will not resize the image using it's own filter, you must make sure you resample the image using one of the good RIOT filters.

You will benefit then of:
· smaller filesize
· higher image quality
· faster response time from programs or devices

A common mistake amateur web-designers do is to use a big image and set a smaller size via HTML or CSS. This is wrong, for the reasons explained earlier.

To resample an image using RIOT, you must open first the image then use any of these methods:
· menu-> Edit->Resample
· shortcut: Ctrl + R
· bottom toolbar: the resample button [image] located in the left of "Compress to size"

The resample dialog will pop up like this:

Resampling filters present in RIOT:
1. Box filter (also known as Nearest Neighbor).

This method is the simplest and the fastest: it computes new pixels as the value of the nearest pixel in the source image. This produces a blocky result when upsampling and a grainy effect when downsampling.

 'Box' filtering is only suitable for 'binning' images, that is, reduce images by integer multiples to ensure that every pixel in the result is an average of the same number of neighbouring pixels (the 'bin'). The resulting image will thus remain clean looking.

The box filter works best with illustrations containing non-anti-aliased edges like rectangular shapes.

2. Bilinear (also known as Triangle)

This is a fast filter, with smooth results.
Bilinear interpolation considers the closest 2x2 neighborhood of known pixel values surrounding the unknown pixel. It then takes a weighted average of these 4 pixels to arrive at its final interpolated value. This results in much smoother looking images than nearest neighbor.

Bilinear filtering is rather accurate until the scaling of the image gets below half or above double the original size of the texture - that is, if the image was 256 pixels in each direction, scaling it to below 128 or above 512 pixels can make the image look bad, because of missing pixels or too much smoothness.

This algorithm reduces some of the visual distortion caused by resizing an image to a non-integral zoom factor, as opposed to nearest neighbor interpolation, which will make some pixels appear larger than others in the resized image.

The Bilinear filter is recommended as a fast alternative to the other filters when resizing artificial images such as textures or gradients.

3. Cubic family filters

Bicubic goes one step beyond bilinear by considering the closest 4x4 neighborhood of known pixels — for a total of 16 pixels. Since these are at various distances from the unknown pixel, closer pixels are given a higher weighting in the calculation. Bicubic produces noticeably sharper images than the previous two methods, and is perhaps the ideal combination of processing time and output quality. For this reason it is a standard in many image editing programs (including Adobe Photoshop), printer drivers and in-camera interpolation.

RIOT includes the following cubic filters:

· Mitchel - Netravali bicubic

Mitchell and Netravali’s bicubic filter is an advanced parameterized scaling filter. It produces very smooth output while maintaining dynamic range and sharpness. Bicubic scaling takes approximately twice the processing time as Bilinear.

· Catmull - Rom bicubic

This is a variation of the bicubic filter where the "B" parameter controlling blurring is set to 0, producing sharper images.

The Catmull-Rom filter is generally accepted as the best cubic interpolant filter. Some people preffer it over Lanczos3 because it has reduced ringing effects and a slightly smoother output.

 Intereting thing to know is the fact this filter has an output almost identical to Lanczos2.

· B-Spline 4th order (cubic)

The B-spline filter produces the smoothest output, but tends to smooth over fine details. This function requires the same processing time as Mitchell and Netravali’s Bicubic filter.

B-spline filter is recommended for applications where the smoothest output is required.It has the advantage of dampening noise and JPEG artifacts.

4. Lanczos3

This is the most theoretically correct filter and produces the best output for photographic images that do not have sharp transitions in
them. However, Lanczos will produce ripple artefacts especially for block text, due to aliasing. Lanczos also requires three times the processing time of Bilinear.

This is a slow method but it usually produces the sharpest images. Under certain conditions, it may introduce some ringing patterns and emphasize JPEG artifacts.

 Lanczos uses a filter based on the sinc function

Appendix:

Common interpolation errors:
Common interpolation errors

References:

http://www.cambridgeincolour.com/tutorials/image-interpolation.htm
http://www.imagemagick.org/Usage/resize/


Basic understanding of web formats
There are only three graphic file formats that are used on the web: JPEG, GIF and PNG.

The most important thing to understand is when to use each type. JPEG, GIF and PNG use very different forms of encoding and compression of the data that give them quite different uses.

GIF and PNG files work best on text, text-art, cartoons, drawings, ilustrations, any art which needs transparent backgrounds.
GIF is limited in the total number of colors to 256 or less. PNG is more advanced and can handle true color images, but doing so significantly increases file size.

JPEG on the other hand works best on photographs. JPEG does not handle sharp edges and can produce artifacts due to his lossy compression.

But let’s learn more about each format.

JPEG (Joint Photographic Expert Group Image)

In computing, JPEG (pronounced JAY-peg; IPA: /'d?e?p?g/) is a commonly used method of compression for photographic images. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10 to 1 compression with little perceivable loss in image quality.

JPEG is the most common image format used by digital cameras and other photographic image capture devices, and is the most common format for storing and transmitting photographic images on the World Wide Web.
[read more...]

Portable Network Graphics (PNG)

Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. It is pronounced /'p??/ ping[1] or spelled out as P-N-G

PNG supports palette-based, greyscale or RGB images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
[read more...]

GIF (Graphics Interchange Format)

The Graphics Interchange Format (GIF) is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

The format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for more simple images such as graphics or logos with solid areas of color.

GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality. This compression technique was patented in 1985. Controversy over the licensing agreement between the patent holder, Unisys, and CompuServe in 1994 inspired the development of the Portable Network Graphics (PNG) standard; since then all the relevant patents have expired.
[read more...]

Rules of thumb

Photos

Definetely use JPEG for web or other media that needs the smallest possible filesize while preserving the most of the quality.
Use true color PNG if you want maximum image quality. Unlike standard JPEG images, PNG compression involves no loss of image data, so there is no noise or artifacts.

Charts and diagrams, cartoons, ilustrations

For true color images containing text and sharp color transitions 24 bit PNG could turn out smaller, and will certainly provide the best quality. You can try JPEG, turn off chroma subsampling and play with a quality greater than 75. In some cases these JPEGs will be smaller.

For images with few colors (fewer than 256) try to decrease the number of colors using quantization and save as PNG. In some rare cases GIF is doing better in such situations, so try it sometimes.

For images with less than 64 colors don’t even try to use JPEG because PNG or GIF always works better.

Transparent images

Only GIF and PNG support transparency. For JPEG you can fill the desired region with the background color using a flood-fill tool and your favourite graphics editing program. This is recommended for photos with masked areas.

Don’t use alpha (variable) transparency if you don’t need it. Apply the same optimization techniques explained earlier.
Alpha transparency does not work in Internet Explorer 5.5 and 6. There is a workaround for webdevelopers though.

Animations

The only format understood nativelly by browsers to support animation is GIF.
It is limited though to 256 colors.

Technical notes on animation and supporting formats

PNG format was originally devised at a time when there was no browser support for GIF animation, so animation was not included in the specification. Later, a separate animation format was devised with a whole host of advanced features – Multiple-image Network Graphics, or MNG. As it turned out, however, the arrival of other animation technologies such as Macromedia Flash took attention away from MNG format. More information about MNG can be found here .

The lack of sophistication in GIF animation can be annoying to users. Research into user reactions has shown that some users cover animations with one hand as they read the text on a page.


FAQ