Image Compression Experiments
This is a reduced-size version of the image used in
the PNG, JPEG, GIF experiments below --- experiments in
image-COMPRESSION versus image-QUALITY-preservation.
Text, images, file-size-data, or links may be added
or improved --- if/when I revisit this page.
INTRODUCTION to the IMAGE EXPERIMENTS :
This is a page of experiments in image compression-versus-quality. Images are shown, and text under each image explains how the image was processed.
Before the images, a summary of file sizes is listed, at the bottom of this introduction --- along with some discussion of how one may be able to get relatively small GIF or JPEG or PNG image files while preserving (for the most part) the quality of the original, captured image.
The summary of file sizes is followed by the images, along with some information about each image, underneath each image.
If you want to examine the images --- for example, by magnifying them --- you can 'right-click' on each image to do a 'Save As ...' of the image file to your local computer. Then you can use image-viewing software on your computer to examine any of these images in detail.
This page is a link on the 'parent' web page JPEG vs. PNG vs. GIF - image-quality vs. file-size. The 'Introduction' on that page describes some of the considerations in compressing GIF/JPEG/PNG files while preserving the quality of the original image (in terms of what the eye can see, without magnifying the image).
See 'The bottom line' section of that page. It contains a summary of GIF/JPEG/PNG compression-versus-quality guidelines that were deduced from the image compression experiments in these web pages.
The making of the images on this page :
The images on this page were made from an 'original' image in a PNG file.
That 'original' image-file was created by doing an 'entire-screen' capture (to a PNG file) when the GUI image was displayed on the screen. The capture was done with the 'gnome-screenshot' utility. I then used the 'mtpaint' image-editor program to read the PNG file and crop the GUI image from the image of the entire screen. I saved the cropped image to a PNG file, from the 'mtpaint' program.
So the 'original' PNG file was made using the 'gnome-screenshot' and 'mtpaint' programs.
Other, compressed image files (PNG, GIF, and JPEG) were made from this 'original' PNG file by using either
In a little more detail, the steps in making these images were as follows.
Here is a list of the sizes (in bytes) and names of the image files shown below --- sorted by size, largest files first. The filenames indicate the kind of conversion/compression that was done.
File size results from various compression tests are listed below --- in file size order --- largest to smallest.
The descriptive file names are quite long and have been 'folded'
onto a second line.
See quality of these images in the 'images section' below.
The file-sizes versus image-quality is discussed there.
PNG vs. GIF vs. JPEG :
Note that we achieved the maximum LOSS-LESS compression of the PNG file (to another PNG file) in the '_pngcrushBRUTE.png' file --- created with the 'pngcrush' command with the '-brute' option.
We also created a PNG file more than 10 times smaller than the 'original' by using the ImageMagick 'convert' command with a '-quality' compression parameter of '00'.
For the PNG '-quality' parameter of 'convert':
** 00 is recommended for images with mostly AREAS OF SOLID COLORS.
The first digit (tens) is the zlib compression level, 1-9. However if a setting of '0' is used you will get Huffman compression rather than 'zlib' compression, which is often better!
The second digit is the PNG data encoding filtering type (before the data is compressed): 0 is none, 1 is 'sub', 2 is 'up', 3 is 'average', 4 is 'Paeth', and 5 is 'adaptive'.
However, we can get still smaller files, than these PNG files, by allowing some 'lossiness' --- by going to GIF files (with a max of 256 colors) or by using the 'lossy' compression inherent in creating JPEG files.
On GIF :
Since this GUI image is composed primarily of several basic colors (mostly black and white and gray and green and pink), we can expect to preserve most of the original image if we convert the 'original' PNG file to a GIF file of less than 256 colors. In fact, it turned out that for this image, we could even go down to 16 colors and still get a GIF file that was quite close in appearance to the 'original' PNG file from which it came.
(We could try converting the 'original' PNG file to PNG files with a restricted number of colors --- such as 256 or 16 --- but if we are going to do that, I would rather use GIF --- since it has been supported by web browsers for about 10 more years than PNG --- and there may be some cases of software not reading certain types of PNG files.)
On JPEG :
Note that when small text fonts are in an image, the 'lossy' compression of JPEG typically introduces 'mosquito noise' around the small text characters --- especially when we use a 'quality' value lower than the range of 100 to 92.
In this GUI image, there are many 'fine', small text characters --- so we DO have to be concerned about introducing 'mosquito noise' when converting the 'original' PNG file to a JPEG file of 'quality' less than 92.
The less-than-92-quality JPEG files DO show some 'mosquito noise' --- which, on close examination, is seen in the '-quality 70' JPEG file.
On choosing a file-type :
For this particular image, IF file size was my main concern (for example, if I were posting the image on a web page along with a lot of other images), I would be tempted to use a 16-color GIF file rather than use the loss-less, maximally-crushed PNG file.
The 16-color GIF file is about 40 percent of the size of the loss-less, maximally crushed PNG file.
Alternatively, if I did not want to use a GIF file, I would use the maximally crushed PNG file, because it is somewhat smaller than the quality-70 JPEG file and it has no 'mosquito noise' and no loss of colors.
To me, to minimize file size while keeping essentially all of the image quality, it would be quite desirable to use a GIF-colors-16 image file of this GUI. If I wanted to keep some more colors while not increasing the file size very much, I might go with a GIF-colors-32 image file of this GUI.
Below are the images. Judge for yourself.
The 'original' cropped PNG file from 'gnome-screenshot' and 'mtpaint'.
File size: 1,123,015 bytes
('mtpaint' saves to a rather large PNG file.)
JPEG from 'convert -quality 92 -sampling-factor 2x2 -filter Mitchell'
File size: 104,757 bytes
(NOTE: There is NO apparent 'mosquito noise' around the text items.
This image is quite usable, BUT it is about 40 percent larger than
the maximally crushed PNG file, below.)
PNG from 'convert -quality 00'
File size: 64,838 bytes
(NOTE: Nice quality and more than 10 times smaller than the 'original' PNG file.)
JPEG from 'convert -quality 70 -sampling-factor 2x2 -filter Mitchell'
File size: 61,569 bytes
(NOTE: If you look closely at this 'quality-70' JPEG image, a
little bit of 'mosquito noise' is detectable around some of the text items.
Since the maximally crushed PNG file, below, is smaller --- and since the
PNG file has no 'mosquito noise' and no loss of colors, the maximally
crushed PNG file would be preferable to this image file.)
PNG from the 'pngcrush' command with the '-brute' option.
File size: 58,082 bytes
(NOTE: Nice quality and almost 20 times smaller than the 'original' PNG file.
This is the smallest PNG we can get without sacrificing some colors.)
GIF from 'convert -colors 256 +dither' (no dithering).
File size: 39,617 bytes
(NOTE: There is no 'mosquito noise' generated in GIF files,
so none in this one. And if there were some colors lost in
generating this 256-color GIF file, it is not readily apparent
anywhere on this GUI image. This image looks quite usable, and
it is about 25 percent smaller than the smallest PNG file, above.)
GIF from 'convert -colors 64 +dither' (no dithering).
File size: 32,072 bytes
(NOTE: This 64-color GIF image looks as good as the 256-color GIF,
and the file is about 20 percent smaller. Quite usable.)
GIF from 'convert -colors 32 +dither' (no dithering).
File size: 29,117 bytes
(NOTE: This 32-color GIF image looks almost as good as the 64-color GIF,
and the file is about 10 percent smaller. Quite usable.)
GIF from 'convert -colors 16 +dither' (no dithering).
File size: 25,413 bytes
(NOTE: This 16-color GIF image looks almost as good as the 32-color GIF,
and the file is about 10 percent smaller. Usable.)
GIF from 'convert -colors 8 +dither (no dithering).
File size: 22,227 bytes
(NOTE: Here you can see a definite degradation of the image.
It appears that we need more than 8 colors to get an image
whose quality is near that of the 'original' PNG file.)
GIF from 'convert -colors 4 +dither (no dithering).
File size: 18,469 bytes
(NOTE: This just shows that 4-colors is totally insufficient to
handle the five black, white, gray, green, and pink colors ---
and various shades of them --- in this GUI image.)
MORE IMAGE EXPERIMENTS :
Some other PNG-JPEG-GIF compression-versus-quality experiments (using different image types) are available from the 'parent' page of this page --- the JPEG vs. PNG vs. GIF - image-quality vs. file-size page.
'External' WEB LINKS to other JPEG/PNG/GIF info :
For more information on image file quality and compression issues, for JPEG and PNG and GIF files, you can try the following Google searches on the indicated keywords.
You may wish to change or add keywords to these queries in order to hone in on answers to your particular questions.
Bottom of page of
To return to a previously visited web page, click on the
Back button of your web browser a sufficient number of times.
OR, use the History-list option of your web browser.
Page was created 2015 Feb 03.