RSS

How-To Geek

As we keep building on old image technology, types of file formats keep piling up, each with their own nuances and uses. JPG, PNG, and GIF have become the most common, but what sets them apart from each other?

These formats have become the most popular because of their compatibility with modern browsers, broadband speeds, and the needs of average users. Join us as we take a detailed look at each format, and cover the strengths and weaknesses of each.

JPG (Joint Photographic Experts Group)

JPG was a filetype developed by the Joint Photographic Experts Group (JPEG) to be a standard for professional photographers. Like the method ZIP files use to find redundancies in files to compress data, JPGs compress image data by reducing sections of images to blocks of pixels or “tiles.” JPG compression has the unfortunate side effect of being permanent, however, as the technology for the file was created for storing large photographic image files in surprisingly small spaces, and not for photo editing.

JPGs have become the de facto standard image of the internet because they can be compressed so much. A typical JPG can be compressed at a ratio of anywhere from 2:1 to as high as 100:1, depending on your settings. Particularly back in the days of dial-up internet, JPGs were the only viable way to send image information.

However, because of the lossy nature of JPG, it is not an ideal way to store art files. Even the highest quality setting for JPG is compressed, and will change the look of your image, if only slightly. JPG is also not an ideal medium for typography, crisp lines, or even photographs with sharp edges, as they are often blurred or smeared out by anti-aliasing. What is potentially worse, is that this loss can accumulate—saving multiple versions of artwork can cause degradation with every save. Even so, it is common to see these things saved as JPG, simply because the filetype is so ubiquitous.

Close up of a high quality JPG.

Close up of a very lossy JPG.

The Joint Photographic Experts Group developed lossless JPG technology to combat this serious problem of quality degradation. However, because of dial-up speeds and general lack of interest in high quality non-degrading files, the JPG-LS standard never caught on.

It is possible to download plugins that allow users to open and save the lossless JPG2000, and some programs, like Apple’s Preview application, can read and save JPG2000 directly out of the box.

JPGs support 24-bit RGB and CMYK, as well as 8-bit Grayscale. I personally do not recommend using CMYK color spaces in JPGs. It’s also important to note that Grayscale JPGs do not compress nearly as much as color ones do.

GIF (Graphics Interchange Format)

GIF, like JPG, is an older filetype, and one generally associated with the internet as opposed to photography. GIF stands for “Graphics Interchange Format” and employs the same lossless LZW compression that TIFF images use. This technology was once controversial (for patent enforcement issues) but has become an accepted format since all patents have expired.

Close up of an 8-bit color GIF.

GIF is by nature an 8-bit color file, meaning they are limited to a palette of 256 colors, which can be picked from the RGB color model and saved to a Color Look Up Table (CLUT), or simply “Color Table.” There are, however, standard color palettes, like the “Web Safe” palette. An important note is that Grayscale images are by nature an 8-bit palette, so saving them as GIF is fairly ideal.

Apart from support for transparency, GIF also is supports animations, limiting every frame to 256 preselected colors.

While GIF is not lossy like JPG, conversion to 8-bit color distorts many images, using dither filters to optically blend, or “diffuse,” colors, similar to halftone dots or pointilism. This can radically alter an image for the worse, or, in some cases, be used to create an interesting effect.

Because of this non-lossy format, GIF can be used to keep tight lines on typography and geometric shapes, although these things are better suited to vector graphic files like SVG or the Adobe Illustrator native format, AI.

GIF is not ideal for modern photography, nor image storage. At small sizes with very limited color tables, GIF images can be smaller than JPG files. But at most ordinary sizes, JPG compression will create a smaller image. They are largely out of date, useful only to create dancing babies or to sometimes create rough transparencies.

PNG (Portable Network Graphics)

PNG stands for Portable Network Graphics (or, depending on whom you ask, the recursive “PNG-Not-GIF”). It was developed as an open alternative to GIF, which used the proprietary LZW compression algorithm discussed earlier. PNG is an excellent filetype for internet graphics, as it supports transparency in browsers with an elegance that GIF does not possess. Notice how the transparent color changes and blends with the background. Right-click the image to see. This is actually one image that is on four different background colors.

PNG supports 8-bit color like GIF, but also supports 24-bit color RGB, like JPG does. They are also non-lossy files, compressing photographic images without degrading image quality. PNG tends to be the biggest of the three filetypes and isn’t supported by some (usually older) browsers.

In addition to being an excellent format for transparency, the non-lossy nature of 24-bit PNG is ideal for screenshot software, allowing pixel for pixel reproduction of your desktop environment.

Which to use?

From left to right, these files are: 24-bit JPG Compressed, 8-bit GIF, 8-bit PNG, Full Quality 24-bit JPG, and 24-bit PNG. Note that the file sizes increase in this same direction.

PNG is the largest image type for bigger images, often containing information you may or may not find useful, depending on your needs. 8-bit PNG is an option, but GIF is smaller. Neither are optimal options for photography, as JPG is much smaller than lossless PNG with only minimal loss of quality. And for storage of high resolution files, JPG compresses to tiny proportions, with quality loss only visible on close inspection.

In short:

PNG is good option for transparency and non-lossy, smaller files. Larger files, not so much, unless you demand non-lossy images.

GIF is largely a novelty and only useful for animation, but can produce small 8-bit images.

JPG is still the king for photographs and photo-like images on the internet, but be careful, as your file can degrade with every save.

Eric Z Goodnight is an Illustrator and Graphics Geek who hopes to make Photoshop more accessible to How-To Geek readers. When he’s not headbanging to heavy metal or geeking out over manga, he’s often off screen printing T-Shirts.

One thing you also should mention: due to the fact that JPG creates artifacts when heavily compressed, it’s usually a bad choice for images with lots of geometric objects, sharp lines etc. like screenshots of GUIs or technical drawings. Those usually come out quite blurred. PNG usually is the better choice because it creates better results for those types of images at only slightly worse file sizes.

@Xellpher: I did discuss the “tiling” which creates them, and also that JPG does is not ideal for images with type or crisp edges. What you discuss falls into this category. “Artifact” is an intersting term and not one that I had heard, so thanks! I think you’re right on point here and this is a great comment.

@w m: webP is not a standard format yet. It sounds exciting, but we’ll see how the adoption of it goes.

I disagree with the statement that gifs are largely a novelty. They actually work quite well for line art, text as graphics and simple logos. Their smaller file size and wider acceptance among all browsers make them superior to PNG in some instances.

This is not a bad point, Becky. GIF has its uses but IMHO is not aging as well as JPG has. I think GIF images will not be with us for much longer, simply because PNG does transparency better, JPG does photographs better, and there are superior file formats for line art, text, etc that are not 8-bit color.

However, if you like GIF and it works for you, by all means, use it! There’s a lot to be said for personal comfort.

>>> “PNG is the largest image type for bigger images as it contains unneeded information for transparency in an extra channel.”

is wrong. PNG’s are the largest since they hold the most color information. JPG’s approximate color, and GIF’s compress the image after forcing it into a 2-to-255 color palette. PNG’s, however, include pixel-perfect color. Regarding the transparency layer, the PNG format is efficient enough to compress solid and simple pattern transparency to a few kilobytes and full gradient transparency to ~20% of total size.

JPG approximates the image, sure. And PNG is not lossy therefore does not change colors. It’s still a 24 Bit image and has the same color palette to draw from. I don’t think they can hold more color information as each pixel in each channel has 8 bits in a 24 bit color space.

I’ll go back to my source on that statement you’re pointing out, because looking at it now, it seems like I was shooting from the hip on that one. But can you give me a link to your source on what you’re saying?

Eric — Very informative article, even for a NON-newbie like myself. Your comment about antialiasing causing blurring of sharp lines in JPGs is particularly interesting and useful.

I’m glad to see your replies to early comments here, as some interesting questions have been brought up, particularly in Wesley C’s comment and your reply.
** Both Becky and you make good points RE: GIF, and I tend to agree with both of you after seeing your reply to her.
** Xellpher’s comments and your reply are both right on.

I am pleased to hear that you intend to write a future article that will include details on TIFF and RAW formats. BTW, the more detail supplied on any image format, the better informed we’ll be. Since many of your fans are not as “techie” as myself and some others, maybe these details could be put into a sidebar or on a separate webpage that your article links to.

Finally, I believe you should discuss tradeoffs between picture quality and image size in relation to images on websites. Larger images take longer to load, slowing down the display of a webpage. More people should learn how to create and use thumbnails on their websites to allow optional higher quality displays thru links, javascript, etc.

Why? Not everyone has a high speed connection or a true high speed one (e.g., SBC, now AT&T, has throttled down my DSL in recent years to put a ceiling on how fast it will be. Originally, when Pacific Bell was not owned by SBC, 768kbps was a guaranteed minimum, with my speed being up to 1.4Mbps when traffic was light. Now, 768kbps seems to be my maximum, with an average speed of 625kbps, even though pricing has not changed, and I’m less than 1,000 line feet from the central office.), and some people can still only afford dial-up.

By “most color information,” I just meant that PNG’s use 3-4 bytes per pixel before compression, versus the approximation by JPEG and the 1 byte palette of GIF. Note though that PNG’s can support palettes as well.

I’ve done a little programming with file formats and images and have a rough understanding of how they work, but I did some testing before posting. The raw image data for a given 1024×768 image is 2.25 MB (3 MB if you include the alpha layer). This is also (no coincidence) the size of a BMP saved of that photo. The PNG for the same file is 1.1 MB. This is due to the lossless compression. The reason PNG’s get a better compression ratio than blindly putting BMP’s in a ZIP file (1.5 MB for the test file) is due to the pre-compression filtering, which makes the pixels more compressible.

I do need to correct myself, though. I was wrong about the overhead for changing the alpha channel. After doing some better testing, I was surprised that erasing a pixel increased the file size ~10%; fading a block of the image increased the file size ~15%. It seems Photoshop doesn’t add the alpha channel at all if it isn’t used (despite claiming that the channel is being added); without the channel, the image is just solid color.

@SF Frog: I think, for the most part, this article is more “middle of the road” techie. I’m sure there are engineers and absolutely brilliant people that could talk about these formats in terms way over my head. I try to speak to different audiences with different articles, and this one was intended to have some sophisticated info that people would find interesting but could still easily understand. That was my goal, anyway.

I think your suggestion is valid, too. I’d have to dig in and do some more research to have specific things to say about those topics and roll them into another article.

@Wesley C: That’s extremely interesting. I don’t think we’re disagreeing on anything at this point. I had assumed that the inclusion of the Alpha channel was something intrinsic to PNG, and that it was part of the reason the files were larger. I think looking back at my source and your logic here gives me a better understanding. I changed that line to something that makes more sense and I appreciate you pointing it out.

Great article. However, since you mentioned GIF’s animation capability, I must also bring to the table APNG (Animated PNG). If you are using a modern browser such as the current generation of Firefox 3.6.x you have built in support for it already. More browsers either have a hack add-on you can download or will soon support APNG directly. With PNG’s superior transparency effects and now APNG’s animations, GIF’s days are numbered.

I had read about about the animations with PNG, but personally, I’m not terribly interested. I think it’s good that people are doing these things and pushing the envelope, but I think the times are few and far between when something useful is done in an animated image. Still, I do agree, GIF will probably become largely useless and we’ll start seeing dancing baby PNG files one of these days!

TIFF is not an image format, but a file format. A single tiff file can hold multiple images, use JPEG compression on those images, et al. There is a Wikipedia article – Tagged_Image_File_Format that is a start along the TIFF trail.

From Wikipedia (which leads to another reference) “This gave rise to the image-processing community’s joke that TIFF is an acronym for Thousands of Incompatible File Formats”

The USPTO uses a tif format to compress it’s patent images, but the files aren’t readable with most common tiff compatible applications. The USPTO provides a tif viewer that is compatible.

This article cannot have come at a better time. I have to multiple images for an animation and I cannot choose which of those 3 to pick. JPG looks really good but I need the best quality, so PNG it is :)

I have noticed the word “lossy” used often in the how-to articles. It was driving me crazy what in the world that meant. At first I thought it was a typo of “lousy”–or maybe it was “glossy”. Very perplexing until I Googled it. Wiki says it means that qualities of the original are lost, and that it’s an IT term for the most part. Glad to know it.

The thrust of the article as, a whole, is A-OK. My criticism is very small and doesn’t change the relative advantages of each format for a particular task, though I use 8 bit png files instead of gif because the better palette range. The artifacts in jpg files are not from antialiasing, but essentially the Gibb’s Phenomenon, as seen when reproducing a square wave with a bandwidth limited receiver and the Fourier series is truncated. Any discontinuous level change in adjoining pixels will cause a ringing, or an echo of the edge at regular intervals in the same “block”. Luckily, few photographers attempt to shoehorn the interesting features of their subjects into precise pixel boundaries.

Well, well, at 74 I am still learning new things when I thought I knew it all…. Just explain the differences between the various image file types again please? Maybe I will take it all in this time. But thanks Geek. You have a tanfastic assortment of knowledge. What I need is an easier way to take it all in.

Nice article for any one who wants short and easy introduction to the topic. Now I have a question. In mobile cameras (say 2M, 3M pixel) the image we take is saved automatically as JPEG image, although the quality can be adjusted and size as well. How do we save it in a format that we want (ie, either BMP,PNG,RAW,etc)?. This is because if it automatically saves in JPEG the original pixels are lost and cannot be recovered. I know that latter it can be converted into any format, but the loss is introduced already and no use converting it. I have Samsung S3500 mobile. Do anyone have the answer to this? Regards.Santhosh.

@santhosh: This is a very interesting question. There may be apps to capture mobile pics in formats other than JPG, or at least, it should be possible. While you can always convert one file format to another, this is not really what you’re looking for–I see your problem.

I’m not sure if cameras need more advanced light sensors to shoot some sort of RAW. It may be beyond cellular phone cameras. But it is possible it’s only a software issue, and therefore correctable with a different photoshooting app.

I’m going to go out on a limb and say that it’s not likely these applications exist, though. I mean, try and look for one, but I feel like the developers capable probably don’t think there’s enough of a market for the application to create something like this. They figure most everybody shooting pics with a phone will be happy with JPG.

Hi eric, thanks for your replay. The answer you have given is somewhat correct, but maybe someone who has worked on the mobile software may know the ins and outs of it. But as you said the issue is not so huge in case of simple mobile camera. But I wonder why they have gone great extend to build many inlays, effects, timers, modes, etc in a mobile camera when they didnt give the option to save it in required format. I suppose they might have given it atleast in some cameras or we may not know the proper operations. This is because the manual does not say anything about it. Anyway thanks.Regards.santhosh.