JPEG vs. PNG vs. GIF File Compression versus Artifacts (maintaining image-quality while reducing file-size)

Example of 'mosquito noise' around text in a highly compressed JPEG image file. Poke this image to see this image magnified --- in a separate browser window or tab.

FE Home page > FE Screenshots page >

This 'JPEG vs PNG vs GIF' page

! Note !
Notes, images, data, or links may be added
--- if/when I revisit this page.

< Go to Table of Image Experiments, below >
(SKIP THIS LONG INTRO)

INTRODUCTION : I often need to make images of GUI's (or portions of GUI's) --- for web pages on my own web sites (such as this freedomenv.com site) or for web pages at other sites to which I contribute (such as the Tclers' Wiki at wiki.tcl.tk). In capturing images of GUI's, I typically need to reach a compromise between image file size and image quality. File size becomes an issue, because I like to make web pages that load very quickly. Furthermore, if I am uploading images to a web site other than my own, the considerate thing to do is to make the images relatively small, so that I do not use much disk space on someone else's web site. Some of my web pages contain many images (say, 20 or more). In those cases, it becomes important to reduce the size of the images, so that the web page loads relatively quickly. On the other hand, I would like to preserve the quality of the original, captured images as much as possible. This goal is typically at odds with compressing the image files to reduce their file size. This page is intended to provide guidance in achieving relatively small file sizes while preserving the quality of the images (to the human eye) as much as possible. Three main image file formats : The image file formats that are most commonly used in web pages (and that are supported by most web browsers) are GIF JPEG PNG Historically speaking, that is basically the order in which these image formats started being used on web sites. GIF was relatively compact because it reduced any image it contained to a table of no more than 256 colors --- and the contents of the file were compressed using LZW compression. JPEG became popular as computers became more powerful, internet data transmission became speedier, digital cameras replaced film cameras, and more and more photos were posted on web sites. JPEG offers the option of using around 16 million different colors, and JPEG offers variable compression amounts (at a trade-off of lesser quality for smaller file sizes). However, GIF offers some features that JPEG does not support, such as transparent pixels and animated images. PNG was a late-comer --- and in the 1995-2005 decade, some web browsers, such as Microsoft's Internet Explorer through version 6, were known to have problems showing PNG files --- or, at least, some sub-types of PNG files. Nowadays (circa 2014) PNG (in most, if not all, of its many 'sub-formats' --- PNG8, PNG24, PNG32, PNG48, PNG64) is well-supported by most of the popular web browsers --- and PNG offers some features that neither GIF nor JPEG can match. For example, PNG offers something better than the transparent pixels of GIF files. PNG offers an 'alpha' channel --- in addition to the RGB (red-green-blue) 'channels' of data. The alpha channel allows PNG files to allow for transluscency of pixels --- a 'foggy', semi-transparent effect. PNG also offers an advantage over JPEG files. The JPEG format is typically used for photos, BUT the most-used compression technique of JPEG files (DCT = Discrete Cosine Transform) results in the 'mosquito noise' effect that you see in the image at the top of this page. In image captures of GUI's, the 'mosquito noise' effect is especially noticeable around text characters of one color (say, black) on a background of a different, contrasting color (say, white). The 'mosquito noise' shows up when you compress a JPEG file too much by using a too-low 'quality' parameter. With PNG files, you can typically employ compression techniques that allow for quite good compression without introducing the 'mosquito noise' effect that is essentially unavoidable when you try to compress JPEG files significantly. Briefly, PNG offers 'loss-less' compression whereas JPEG compression is 'lossy'. For more info on GIF-versus-JPEG-versus-PNG, see the ImageMagick page on image file formats --- specifically, the section on GIF, the section on JPEG, and the section on PNG. This page (the web page you are reading now) is intended to provide links to other pages that offer many examples of images that are saved as JPEG, PNG, and/or GIF files --- with various levels of compression and quality. The intent is to give some relatively clear guidelines on how to create image files with quality almost as good as the 'original' image, while creating files of relatively small size. My image file processing tools : With respect to putting GUI (and other) images into image files, the typical steps (and tools) involved are capture the image, say with a 'screen snapshot' utility --- or from a digital camera --- or from the scanner of a PSC (Printer-Scanner-Copier) crop the image, if needed --- and, perhaps, do some other processing such as brightening the image via 'gamma correction' or adding line segments, curves, or text to the image --- say, with an interactive 'image editor' utility compress the resultant image file (and/or convert the image file to a different format) --- say, with an image conversion/compression program. In preparing GUI (and other) images for my web sites, I use the following utilities (on Linux): 'gnome-screenshot' to capture screen images (as PNG files) --- or drag-and-drop of JPEG files from the memory chip of a digital camera --- or 'iscan' software with an Epson PSC (Printer, Scanner, Copier). 'mtpaint' interactive image editor, for cropping and otherwise processing the captured PNG file --- to a PNG file. ImageMagick 'convert', for compressing and/or converting the PNG (or JPEG) image file saved from 'mtpaint' --- to a PNG or JPEG or GIF file. Alternatively, I use ' pngcrush' for compressing PNG files. You can substitute your favorite image capture and processing utilities to achieve similar results to the results reported herein --- provided your utilities have 'quality' control options. NOTE: To be able to conduct similar image compression experiments, your utilities should be able to provide the following functions: To get GIF files, I used the ImageMagick 'convert' command with the '-colors' option, to specify the maximum size of the GIF color table. To get JPEG files, I used the ImageMagick 'convert' command with the '-quality' option, to specify a quality-level for the output JPEG file. To get compressed PNG files, I used the ImageMagick 'convert' command with the '-quality 00' option, to specify a quality-level for the output PNG file. Alternatively, I used the 'pngcrush -brute' command to get a 'maximally compressed' PNG file. Seeking excellent quality along with minimum file size : In the 2009 to mid-2014 time frame, I used to edit captured PNG image files with 'mtpaint', and saved the cropped/processed image as a JPEG file with 'quality=100' (a minimum of compression). I used JPEG mainly to avoid any possible problems with people not being able to see the image if their web browser did not support PNG files. And I used 'quality=100' because I did not want to lose quality (as far as the human eye could tell) from the original captured image. In mid-2014, I spent some time experimenting, and I found that (with the ImageMagick 'convert' program) I could significantly improve upon the compression of a 'quality 100' JPEG file that I saved from 'mtpaint'. If I used 'convert -quality 80', I could achieve file compression down to only 10 to 15% the size of a 'quality 100' JPEG file. However, if I tried lower values such as '-quality 70' or '-quality 40', the 'mosquito noise' became just too obnoxious to bear --- typically in areas where there are small, 'fine' text fonts on a different-colored background. But I found that I typically did not have to use '-quality 70' or '-quality 40'. I could already achieve a majority of the compression that is possible by using '-quality 80'. And, if I was getting some obnoxious 'mosquito noise' when using '-quality 80', I could use '-quality 92' and still get significant file compression while avoiding the introduction of 'mosquito noise'. On some further experimentation, I found that by staying with the PNG file format through my image processing steps ('gnome-screenshot', 'mtpaint' crop/process, further compression), I could avoid the 'mosquito noise' effect that I was getting with highly-compressed JPEG files --- while getting PNG files that were often 'competitive' in size to the '-quality 80-or-above' JPEG files. In particular, by using 'pngcrush -brute' on the PNG files that I saved from 'mtpaint', I could get GUI image files about the same size as with 'quality 85' JPEG image files --- while completely avoiding the 'mosquito noise' effects. However, I often could get greater compression by converting a captured-and-cropped PNG file to a GIF file --- while using '-colors 256' with the 'convert' command, to minimize loss of colors. The quality of the GIF file --- even with '-colors 32' or '-colors 16' --- is often as good as the original PNG file (to the human eye) --- as long as there are not color gradients and not lots of colors in the image. Otherwise, color gradients become 'color bands' in the resulting GIF image file. The bottom line : The bottom-line is that I can get quite compact GUI image files by using PNG and the 'pngcrush' program with the '-brute' option. Alternatively, you can get almost as good PNG compression with 'convert -quality 00' on PNG files, where the 2 digits '00' control compression level-or-type and filter type. This can be helpful when a person has the ImageMagick 'convert' program available, but does not have a program like 'pngcrush' installed. If I want to get further compression --- more than the maximum that I can get from 'pngcrush' --- I can go to JPEG files with 'quality 92' or lower. But if I go below 'quality 80', I start seeing noticeable 'mosquito noise' effects on the typical GUI images --- which typically contain areas with small, fine text fonts, where mosquito noise is typically generated. Using a GIF file is fine for black-and-white and for many grays-only images. But, if you have any 'smooth color gradient areas' in a GUI image, using a GIF file will typically result in 'color bands' in the image, as a many-colored image is reduced to an image containing no more than 256 colors. On the other hand, since many GUI's do not contain any large areas with color gradients consisting of hundreds of colors, you can often get good images of GUI's, at very small file sizes, by using GIF files with 256 colors --- or even 128, 64, 32, or 16 colors. So typically I would choose to use GIF files --- provided that the image is pure black-and-white -OR- is only shades of gray (with no more than 256 shades of gray) -OR- (if it is a color image) the color image has no areas with color gradients involving many hundreds of color shades. use JPEG files --- typically with 'quality' no less than 70 --- provided that the image does not show noticeable 'mosquito noise' (or other) artifacts when I use '-quality' less than 92. (92-to-100 does not seem to show visible 'mosquito noise'.) use PNG files --- after 'loss-less' compression with 'pngcrush -brute' or 'convert -quality 00' --- if the image contains color gradient 'patches' and/or more than 256 colors --- and if I do not want to lose any color information. These guidelines imply that I have found that I CANNOT say "use just one of these file types for all of your image needs". I find that, for each of these file types, there exist situations that would justify using that file type. The 'Table of Image Experiments' below provides sample images that demonstrate the comments that I have made in this section.

TABLE of PNG-JPEG-GIF IMAGE EXPERIMENTS : (links to child-pages of this page) Below are links to some pages of image experiments. The intent is to seek significant image-file-compression while preserving image-file-quality (as seen by the un-aided human eye). See a summary of these results in the 'Summary' section below. Experiments with Images of the upper-left of the Seamonkey web browser GUI (For small file-size with good image-quality, I would use a 32-color GIF file of this image --- about 4 KiloBytes in size.) Experiments with Images of an Editorial Cartoon (For small file-size with good image-quality, I would use a 16-color GIF file of this image --- about 32 KiloBytes in size.) Experiments with Images of a 3D Model Examiner GUI (For small file-size with good image-quality, I would use either a 256-color GIF file of this image --- about 65 KB in size --- OR I would use a maximally-compressed PNG file --- about 100 KB in size.) Experiments with Images of a GUI with a color-shaded 'SuperFormula Shape' on a 'canvas' (For small file-size with good image-quality, I would use either a 'quality-92' JPEG file --- about 86 KB in size --- OR I would use a maximally-compressed PNG file --- about 95 KB in size.) Experiments with Images of a GUI used to 'morph' between 2 images. (the 'tkWheeeMorph' utility) (For small file-size with good image-quality, I would use either a 'quality-80' JPEG file --- about 185 KB in size --- OR I would use a maximally-compressed PNG file --- about 376 KB in size.) Experiments with Images of a GUI that implements a 'ScriptApplicator' utility (For small file-size with good image-quality, I would use either a '16-color' GIF file --- about 25 KB in size --- OR I would use a maximally-compressed PNG file --- about 58 KB in size.) SUMMARY of preferred file formats : Note that in the images that did not contain a large color gradient image or a photo image with many hundreds of colors, a GIF file would give a good quality image with a relatively small file size. In images with large color gradient areas or with many hundreds of colors, a JPEG file of quality 92 or 80 will typically give a good quality image with a relatively small file size. But if you are concerned about losing some colors in the 'lossy' process of creating a JPEG file or a 256-color-max GIF file, then you might want to use a compressed PNG file. And if you are concerned about generating 'mosquito noise' around the text in images of GUI's, then you might want to use GIF or PNG for GUI images --- not JPEG. Summary of File sizes : Note that for GUI images --- even large GUI's (around 800x600 pixels or larger) with many hundreds of color shades in the image --- we can generally get good quality image files that are less than 300 KB in size. And when there is a very limited set of colors in the image, we can get good quality image files that are about one-tenth that size --- about 30KB --- or much smaller for much smaller images.

Some Additional Image Compression Experiments : Besides these experiments in determining when it is best to use JPEG, GIF, or PNG versions (compressions) of an image, I needed to determine, given a JPEG file of given 'quality' compression, how to 'quality-compress' the JPEG to a new, smaller JPEG while retaining good image quality. To that end, I produced this page of JPEG 'multi-compression' experiments. Furthermore, I realized that it would be helpful to do some experiments to determine when it would be beneficial to make GIF files of 256-colors, down through 128 colors to 64 colors to ... to 2-colors --- for various types of images. To that end, I produced this page of GIF 'color-compression' experiments.

The SCRIPTS THAT WERE USED to make these image files : To make the many JPEG, GIF, and PNG files from the PNG screenshot-image-capture files used as an 'original' image in these tests, I used scripts from the feNautilusScripts subsystem of the software systems available at this freedomenv.com web site. Here is an image of the 'IMAGEtools' menu that I used.

The 'IMAGEtools' menu of the
'feNautilusScripts' FE system.

See notes below.

The four scripts that I used repeatedly to make the PNG, JPEG, and GIF files are marked in this image by a red-filled ellipse. I used the 01_multi-img-files_CONVERT-TOgif_convert-colors-upto256.sh script, to make GIF files with different sized color palettes --- typically 256, 64, 32, 16, or 4 colors --- from a captured-and-cropped PNG file --- using the 'convert -colors' ImageMagick command. I used the 01_multi-img-files_CONVERT-TOjpg_convert-quality-strip-samplingfactor-filter.sh script, to make JPEG files of different qualities --- typically 100, 92, 85, 80, 70, and 40 --- from a captured-and-cropped PNG file --- using the 'convert -quality' command --- along with a little experimentation with the '-sampling-factor' and '-filter' options of the 'convert' command. I used the 01_multi-img-files_CONVERT-TOpng_convert-quality-prompt.sh script, to make a compressed PNG from a captured-and-cropped PNG file --- using the 'convert -quality 00' command. I used the 01b_multi-png-files_COMPRESSpng_pngcrush-brute.sh script, to make a 'maximally compressed' PNG file from a captured-and-cropped PNG file --- using the 'pngcrush -brute' command. And here is a reduced-size image of the full 'feNautilusScripts' menu cascade that appears after 'right-clicking' on an image file to process.

These 'feNautilusScripts' scripts automatically provided filename suffixes that made it easy for me to keep track of the processing that I had performed to create each file.

'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. jpeg versus png quality compression jpeg versus gif png versus gif jpeg png imagemagick quality You may wish to change or add keywords to these queries in order to hone in on answers to your particular questions. Guidelines on the internet I would like to add here that, in 2014, I did a lot of searching with keywords like these. I found some pages that gave some guidelines on when to choose GIF/JPEG/PNG --- but some people gave different guidelines than others. And most of the guidelines were 'rules of thumb' that would have led me to use a different file format from the ones I chose in the experiments above. In fact, most of the guidelines I found made a 'blanket' recommendation for using just one image format --- such as all-JPEG or all-PNG. But it is not as simple as that when you want to optimize or balance image quality versus file size. The choice depends on factors such as the number of colors in the image and the distribution of those colors. For example, in an image with only 8 colors (like a cartoon), a GIF file may yield the smallest file size while resulting in NO degradation of the image quality. Furthermore, none of the pages that I found presented a lot of images that could be used to justify their guidelines. And I did not find any pages that discussed how to choose the 'quality' or 'max-number-of-colors' parameters in a wide variety of cases. My purpose in these pages is to provide that copious set of images --- and thus provide the answers to the questions that I had.

Bottom of this JPEG vs. PNG vs. GIF page. 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 2014 Dec 16. Page was changed 2015 Mar 09. Page was changed 2015 Nov 06. (Minor changes in a few sentences.) Page was changed 2018 Aug 09. (Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.) Page was changed 2019 Jun 30. (Specified image widths in percents to size the images according to width of the browser window. Also some reformatting of text for improved readability.)