Image Compression
Experiments

on a GUI image
that shows a
color-shaded
'Super Formula Shape'
on a 'canvas'
JPEG, PNG, GIF files
- - -
FILE-SIZE
(compression)
-versus-
IMAGE-QUALITY
(preservation)

This is a GUI image used in
PNG, JPEG, GIF experiments
below --- experiments in
image-file-size-COMPRESSION
versus
image-QUALITY-preservation.

FE Home page > FE Screenshots page >

JPEG-vs-PNG-vs-GIF page >

This
Image Compression-versus-Quality Experiments
on-a-SuperFormulaShape-GUI
page

! Note !
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 great 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, and 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 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 --- which creates rather large PNG files that can be compressed using a utility command like pngcrush.

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

  • the ImageMagick 'convert' command

    OR

  • the 'pngcrush' command.

In a little more detail, the steps in making these images were as follows.

  • An image of the entire screen was captured as a PNG file using the 'gnome-screenshot' utility --- on Ubuntu 9.10 Linux, where 9.10 means '2009 October'.

  • The 'mtpaint' image editor program was used to crop the GUI image out of the 'entire-screen' image, and the cropped image was saved as a PNG file.

    That file is the first of the images below.

      (The 'mtpaint' image editor tends to make rather large PNG files --- larger than the PNG file that was read in --- even after some cropping.)

  • Various PNG and JPEG and GIF files are shown below --- in file-size order, largest first. Most of the compressed images were made with the ImageMagick 'convert' command. One image was made with 'pngcrush'.

  • The JPEG files shown below were made, from the 'original' PNG file at the top of these images, by using the ImageMagick 'convert' command, with the '-quality' and '-sampling factor' and '-filter' options.

    The '-strip' option of the 'convert' command was used to assure that the JPEG file would be stripped of text data such as EXIF text data.

    Experiments on some other PNG image captures have indicated that smaller JPEG files are yielded when the '-sampling-factor 2x2' option is used --- rather than '1x1' or '2x1'.

    Some of those JPEG-making experiments also indicated that the choice of '-filter' may not have a great influence on file-size --- at least not as much influence as '-quality' and '-colors' options.

    So '-filter Mitchell' was used to make these JPEG files.

  • Some compressed PNG files were made from the 'original' PNG file at the top of these images, using either

    • the 'convert' command with the '-quality' option

      OR

    • the 'pngcrush' command with the '-brute' option

  • GIF files were made from the 'original' PNG file at the top of these images, by using the 'convert' command with the '-colors' option --- and with '+dither' to turn OFF dithering.

    A range of '-colors' values were used --- from 256 to 4.

  • File-size results are summarized just below.

    See the images further below to examine the image quality.

Below 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.



The 'original' PNG file:
('mtpaint' makes huge PNG files)

   1,384,803   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522.png

to-PNG via ImageMagick 'convert' PNG-compression:

      96,644   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_CompressType00.png

to-PNG via 'pngcrush' compression:
(maximal LOSSLESS PNG compression)

      95,356   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_pngcrushBRUTE.png

to-JPEG quality-92:
(via ImageMagick 'convert')

      86,660   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_Quality92_SampFact2x2_
               FilterMitchell_Stripped.jpg

to-GIF up-to-256-colors:

      58,374   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_PALETTE256.gif

to-JPEG quality-70:

      51,152   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_Quality70_SampFact2x2_
               FilterMitchell_Stripped.jpg

to-JPEG quality-50:

      40,010   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_Quality50_SampFact2x2_
               FilterMitchell_Stripped.jpg

to-GIF up-to-64-colors:

      38,690   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_PALETTE64.gif

to-JPEG quality-30:

      31,569   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_Quality30_SampFact2x2_
               FilterMitchell_Stripped.jpg

to-GIF up-to-32-colors:

      30,758   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_PALETTE32.gif

to-GIF up-to-16-colors:

      27,054   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_PALETTE16.gif

to-GIF up-to-4-colors:

      15,127   superformula_shadedEdge_disk34points_cyanOnblack_
               fromMTpaintCrop_882x522_PALETTE4.gif


See quality of these images in the 'images section' below.

File-size-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 with 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.

    • 05 is recommended for images like NATURAL LANDSCAPES.

    • 00 and 90 seem to give small file sizes with good quality for these images.

    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'
    • 5 is 'adaptive'.

    The filtering type did not seem to affect file-size significantly, so filter-type zero (none) was used.

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 contains a canvas area on which a shaded-image of a 'super formula shape' is displayed --- and that shaded image is composed of hundreds of shades of a cyan color --- we can expect that we are going to lose some image quality if we convert the 'original' PNG file to a GIF file ---- even if we choose to specify the maximum of 256 colors

In fact, it turned out that for this GUI image, when we go down to 32 colors, the GIF file differs quite markedly in appearance from the 'original' PNG file from which it came.

Some 'color banding' is apparent on the 'superformula shape'.

And when we go to a 16-color GIF, the color banding gets worse.

And at 4 colors, the color shading on the 'superformula shape' disappears.

(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 text fonts (in a quite contrasting color to their background) are in an image, the 'lossy' compression of JPEG typically introduces 'mosquito noise' around the text characters --- especially when we use a 'convert' '-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.

These less-than-92-quality JPEG files DO show appreciable 'mosquito noise' --- which, on close examination, is seen in the '-quality 70' JPEG file --- and even more so in the '-quality 50' and '-quality 30' JPEG files.

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 JPEG file of 'quality 92' rather than use the loss-less, maximally-crushed PNG file.

The quality-92 JPEG is about 10 percent smaller than the loss-less, maximally crushed PNG file --- and the quality-92 JPEG shows no apparent difference in quality compared to the maximally crushed PNG file.

Alternatively, if I were not concerned about undetectable color loss, I would use a GIF file with about 64-colors in its color palette --- because it is about half the size of the quality-92 JPEG file.

The quality of the 64-color Gif file compares favorably with the quality of the quality-92 JPEG file.

To me, it would be almost a coin-flip whether to use the JPEG-quality-92 or the GIF-colors-64 image file of this GUI image.

If it proved to be the case that a GIF file would load into a web page faster (or with less CPU processing) than the JPEG file, then I would probably chose the GIF file.


Below are the images. Judge for yourself.

(Click on these images to see the image
in a separate window or tab.)



The 'original' cropped PNG file
from 'gnome-screenshot' and 'mtpaint'.
File size: 1,384,803 bytes
(The 'mtpaint' image-editor saves to
a rather large PNG file.)



PNG from 'convert -quality 00'
File size: 96,644 bytes
NOTE:
Nice quality of this PNG file compressed from
the original --- and more than 10 times smaller
than the 'original' PNG file from 'mtpaint'.



PNG from the
'pngcrush' command with the '-brute' option.
File size: 95,356 bytes
NOTE:
This maximally-compressed PNG is more than
10 times smaller than the 'original' PNG file
from 'mtpaint'. This is the smallest PNG we
can get without sacrificing some colors.



JPEG from
'convert -quality 92 -sampling-factor 2x2 -filter Mitchell'
File size: 86,660 bytes
NOTE:
There is NO apparent 'mosquito noise' around
the text items in this quality-92 JPEG file.
This image is quite usable, and is about 10 percent
smaller than the maximally crushed PNG file. BUT
is the 'lossy' JPEG compression worth that 10 percent
file size reduction.



GIF from
'convert -colors 256 +dither' (no dithering).
File size: 58,374 bytes
NOTE:
There is no 'mosquito noise' generated in non-dithered
GIF files, so none in this one. And if there were
many colors lost in generating this 256-color GIF file,
it is not readily apparent in the color-shaded
'superformula shape'. This image looks quite usable,
and it is about 40% smaller than the smallest PNG file, above.



JPEG from
'convert -quality 70 -sampling-factor 2x2 -filter Mitchell'
File size: 51,152 bytes
NOTE:
If you look closely at this 'quality-70' JPEG image,
some 'mosquito noise' is detectable around the text items.
However, if you wanted a file about 40% smaller than
the smallest loss-free PNG file, above --- and you
did not want to use a GIF file --- you might
tolerate this level of 'mosquito noise' and use
a JPEG file compressed to this extent.



JPEG from
'convert -quality 50 -sampling-factor 2x2 -filter Mitchell'
File size: 40,010 bytes
NOTE:
Even if you could not detect the 'mosquito noise'
in the quality-70 JPEG image above, you should be
able to see considerable 'mosquito noise'
around text in this quality-50 JPEG image.
I would not want to use this.



GIF from
'convert -colors 64 +dither' (no dithering).
File size: 38,690 bytes
NOTE:
'Color-banding' has NOT appeared yet, in this
colors-64 GIF image. And the text is quite clear.
If I wanted a really small file,
I would consider this usable.



JPEG from
'convert -quality 30 -sampling-factor 2x2 -filter Mitchell'.
File size: 31,569 bytes
NOTE:
The 'mosquito noise' in this quality-30 JPEG image
is quite pronounced. I would definitely consider
this image unacceptable for usage.



GIF from 'convert -colors 32 +dither' (no dithering).
File size: 30,758 bytes
NOTE:
'Color-banding' has appeared in this
colors-32 GIF image. Unusable.



GIF from 'convert -colors 16 +dither' (no dithering).
File size: 27,054 bytes
NOTE:
Even more severe 'color-banding' appears
in this colors-16 GIF image. Unusable.



GIF from 'convert -colors 4 +dither' (no dithering).
File size: 15,127 bytes
NOTE:
All color-shading on the 'superformula shape' has
disappeared. This image is definitely unusable.
It looks like about 38,000 bytes is the smallest we can go
and still have a good quality image --- and that is
possibly losing some colors with a 64-color GIF file.

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 WEB 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 this page of
Image Compression Experiments -
on a 'SuperFormulaShape' GUI image
.

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.

OR ...

< Go to Top of Page, above. >

< Go to FE Home page >

Page history:

Page was created 2015 Feb 03.

Page was changed 2018 Aug 18.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jul 12.
(Specified image widths in percents to size the images according to width of the browser window. Also added some web links.)

Page was changed 2024 Jun 19.
(Changed links to other web pages so they load in a separate window or tab so that this page remains available in its window or tab.)