Notice that for the most part, it looks OK. However, as you can see, the crosshair has noticeable artifacts surrounding it. This is because of the sharp color changes and the fact that the crosshair is a very sharp, well-defined image. Let's zoom in on that. (Note, for the zoomed-in pictures, I am saving in a lossless format so that artifacts from lossy compression such as JPEG don't affect the zoom):
This is the original image. The crosshair is well defined and sharp.
This is the result of JPEG compression. Notice how the sharpness has all but disappeared and the color "leaks" into the surrounding area. This effect is called a compression artifact. Wherever there are sharp details or color changes like in the above image, you will notice artifacts.
This isn't to put you off JPEGs. For photos and other "realistic" images, the color differences and artifacts are hardly noticeable since this is what the JPEG algorithm is designed to operate on. However, for text, line art, defined "comic strip" style drawings, screenshots of common applications, etc JPEG will give you noticeable artifacts. Take for example, a Windows screenshot. The Windows user interface typically consists of sharp text, straight lines on windows, and sharp, defined icons. Here is what happens if you use JPEG on a typical Windows screenshot:
It isn't hard to spot which one is the original version. Notice how in the JPEG, the sharp lines have become fuzzy and blurred with artifacts. Now here's something else to notice: The JPEG version of the image on the right is 6.76 KB (6,929 bytes). However, using the proper image format (PNG, see below), the original version on the left is 1.45 KB (1,491 bytes). Yup, that's right. A perfect quality version of the original with no loss of information is many times smaller than a highly compressed JPEG. "But JPEG is supposed to be good for compression!" I hear you cry. And it is, when used for the right application. Take the two images below:
They look rather similar wouldn't you say? The one on the left is the compressed, lossy JPEG format and the one on the right is the lossless PNG version. The JPEG lossy compression has taken away detail, but not enough to visually notice a drop in quality since there aren't any sharp contrast or color changes. This is why the JPEG on the left is 31.8 KB (32,651 bytes) and the lossless PNG on the right is 106 KB (109,475 bytes). Although you probably can't tell the difference between them, the PNG version has preserved every detail of the original image perfectly, whereas the JPEG version has sacrificed detail to achieve a smaller file size. Only by zooming in very closely on sharp objects or sudden color changes can the difference be spotted:
Notice how the very small spattering of green pixels have all but disappeared in the JPEG version, and that the red/pink light appears much dimmer since it has artifacts of the grey surroundings mixed in.
The images above are difference maps of the JPEG overlayed onto the original image. The darker the color, the bigger the difference. You can easily see that wherever there are sharp color changes and edges, the JPEG has created a noticeable difference - see the red lasers or the lines on the Windows Explorer screenshot.
The trick to using JPEGs successfully is to set the compression level properly. The compression level is essentially telling the JPEG algorithm how much information to remove. Don't just throw compression to zero to "make it look good" - you will end up with very large files. Many programs allow you to adjust the compression level and have a real-time preview of the final image, allowing you to tune the compression level just right. As the above images demonstrate, it is possible to have lossy JPEG images which look just as good as the original. If there is one thing you want to remember about JPEGs, it is that they are for photo-style images only.
That said, be very careful where you actually use the final JPEG. The JPEG algorithm uses "psychovisual modelling" to reduce detail. What this basically means is it takes advantage of the way your brain and eyes work to reduce detail in such a way that it isn't noticeable. However, the JPEG algorithm is primarily designed for images viewed on a 2D plane. If you have to use a JPEG in a 3D environment such as a computer game, the detail loss caused by the psychovisual modelling will be much more prevalent because in a 3D environment, textures are mapped, stretched, mip-mapped, etc (if you're planning on using any kind of image format in a 3D environment, I would recommend 24 bit PNG). Computer monitors often have a much lower resolution (DPI) than other mediums such as print, so a JPEG which looks good on your screen may show some signs of compression artifacts when used on printed material. For web page use, JPEG is just fine.
PNG (Portable Network Graphics). PNG to most people is a relatively new or unheard of format. This is because only recently has there been any noticeable use of it, particularly in the world of web page images. The reason for this is that historically many mainstream browsers such as Microsoft Internet Explorer had very poor support for PNG images and failed to render them as defined in the PNG specification. Unfortunately many people still think that there are browser compatibility issues with PNG and while that is true to some extent on 32 bit PNG images (discussed below), if you stick to 8 or 24 bit (256 / 16M color) PNG images then every browser that is in use today will be able to display them just fine.
But enough rambling about browsers: PNG is the image format to use for line art, text, screenshots of Windows, general web graphics and "comic strip" style art. Why? Because it is lossless, meaning it won't distort or alter the original image, allowing fine lines and other details to be reproduced accurately. PNG works in several bit depths: 8 bit (256 colors) or 24/32bit (16M colors and 16M colors with variable opacity). For typical use, it will be the 8 bit (256 color) version you are interested in as 24 bit is really quite large for web use, and files with need for such high color depths (photos, computer game screenshots, etc) are probably better suited by JPEG when you are concerned with file size. Let's start with some examples. Here is a typical web graphic:
It's only 3.51 KB (3,603 bytes). However, the source image was 24 bit (16M colors) and I've just saved it as a 256 (8 bit) PNG file. My application (in this case, Paintshop Pro) has to decide which parts of the image to scale down to somehow get the 1629 colors in the original down to 256. Note, that this is NOT the same thing as lossy compression. Lossy compression removes detail from the images, saving at 256 colors is essentially reducing the image first, then saving it lossless. Closer inspection reveals the missing colors from going from 1629 colors to 256:
Of course, you're only going to spot the difference if you have the actual source image :). So for most general web graphics, PNG is fine, not to mention Windows screenshots, line drawings, comic-strip style drawings, etc. If you need to remember one thing about PNG: "If it's not a photo/'realistic' image, PNG will work".
For images with gradients (as the above image has) or other areas with a high number of distinct colors, 24 bit PNG can be used to accurately preserve every detail. This will result in a file size often larger than a JPEG of the same image, but the image will be an accurate reproduction of the original.
I think I'll briefly touch on 24/32 bit PNGs. 24 bit means that each color (Red, Green and Blue) has 256 possible values. This is where "16M Colors" comes from (256*256*256). 32 bit refers to the image having an "alpha channel". An alpha channel is like an extra color, although instead of displaying it as a color, it is rendered translucently (see-through) with the background. This is a very powerful feature, and combined with the excellent compression (zlib) used for PNG, it makes for some very useful features. Say for example, you have a nice, smoothed (anti-aliased) edge to an image on a white background, like this:
The edges are smoothed off from black with grey pixels to make the image appear smoother, as shown here:
Now what happens if suddenly you have to use that image on a website with a black background:
Doesn't look so good, does it. Now if instead of the grey pixels, you essentially said "blend this pixel with whatever color would be here by x%", then you have an alpha channel:
As nice as this feature is, regrettably non-standards compliant browsers such as Internet Explorer do not support alpha channels in PNGs, which is preventing widespread uptake by webmasters who do not wish to have images appear broken for their visitors that use IE. Mozilla on the other hand has complete support for PNGs, as well as actually being standards-compliant and secure. If you want to test whether your browser supports PNG alpha channels properly, visit this quick test page.
A word of warning about PNG however. Many image editing programs such as Adobe Photoshop, Paintshop Pro and others have quite inefficient methods of saving PNG. They will correctly write a PNG file, but they often use poor zlib compression settings, resulting in a PNG file that is needlessly large. There are several ways to "fix" this. First, Adobe Photoshop users will want to get SuperPNG, a plugin that provides much better compression than the built-in PNG writing feature. Users of other image editing programs will need to use a lossless re-compressor, a program that reads in the original image and writes it out again using a better compression algorithm. Note that this is simply altering the compression of the internal file format data PNG uses, it is not altering the actual image quality in any way. Windows users may wish to use PNGGauntlet to re-compress PNG files, and finally I have made available a web interface to the command line "pngcrush" program, so that you can upload a PNG and have it optimized.
GIF (Graphic Interchange Format). Where to begin. In almost all instances, GIF is obsolete and should not be used. Where you have a GIF file, a PNG would do just the same and be noticably smaller due to superior compression algorithms. Unisys used to hold patents on the compression algorithms used in GIFs, which essentially made them illegal to use without a license although as of 2006 all remaining patents on GIF files have expired. GIF also has some other fairly substantial limitations in that only one color can be transparent (ie, no alpha channel) and most software only allows 8 bit (256 colors) in a GIF. The actual format can support more colors with the use of multiple image blocks, however, there is little software support for this and multiple image blocks tend to create much larger files. See an example of a 32K color GIF.
Let's take a quick example of Windows Task Manger:
Since this is a Windows screenshot, there aren't many colors so the 256 color depth means both images are pretty much identical (I say almost since the gradient in the title bar uses up a lot of colors). However, take a look at those file sizes: The .GIF on the left is 13.8 KB (14,163 bytes), whereas the .PNG on the right is only 6.11 KB (6,259 bytes). That's more than half the size for the same image or for web purposes, twice as fast at being downloaded. Not bad really.
The only real exception to the use of GIF is for animations. The GIF format is widely integrated into every popular web browser, and animated GIFs, although considered annoying by many, are featured on a large number of sites. No other image format has the combined animation abilities and widespread browser integration. An animated version of PNG, MNG exists but browser support is next to nonexistent and these are rarely ever used.