Explaining Different Image Formats: Which Format Should I Be Using to Share My Images?

Image File Formats: What Should I Be Using?

This article is a lesson in understanding different image formats, as well as advantages and disadvantages of image file formats on web. When saving artwork, photographs, graphics, or images that are to be shared in general, there are three main types of files supported by most browsers and operating systems: .PNG, .JPG/.JPEG, and .GIF. Each of these three will react in a different way when saved. The most noticeable differences between the three are:

• how they compress color
• how they handle transparency
• if it can be animated
• how big the files tend to be.

JPG ( or its counterpart: JPEG)

What it stands for: Joint Photographic (Experts) Group

How it handles color: Depending the on the quality setting. The lower the quality the more information it will throw away, making edges blurry and blend different colors into each other, giving your image a “dirty” look. Higher quality numbers will produce clearer, cleaner images.

Transparency: None with JPEGs

Can it be animated: No.

Average image size: As with all images, it depends on the size of the image. A 5px by 5px image is going to be a small file size, while a 5000px by 5000px is going to be rather large. The lower the quality number, the smaller the file. The higher the quality number, the bigger the file.

Its primary use: Photographs hosted on websites, stored on CDs or your computer, or for images/photographs made to be sent across the internet/in email.

Disadvantages: The files do not support transparency, so be prepared to be disappointed if you have to put a light image on a dark background. Also, they tend to blur at lower quality, or be unbearably large at higher quality.

Use it for: Storing images on your computer, uploading photographs to the internet, or sending your baby pictures to Great Aunt Edna.

Avoid using it for: Anything that would require transparency.

GIF

What it stands for: Graphics Interchange Format (listed in Photoshop as Compuserve GIF)

How it handles color: To be brutally honest, not well. At any given time, a GIF image can only support 256 colors. This means that it will reduce colors, and often will add patterns to your picture.

How it handles transparency: Okay-ish. It will make the edges hard, because it cannot make partially transparent pixels. This often leads to a grainy-messy look.

Can it be animated: YES! And this is the beauty of GIFs. They work by the same principle of flip book animation, using different images to show the progression of animation.

Average image size: As with all images, it depends on the size of the image. A large image has a large file size, while small images are consistently small. Animated GIFs depend on number of colors, number of frames and image size. GIF images tend to save fairly well in size, though.

Its primary use: images that are very small and have few colors, or animated images.

Disadvantages: The fact that the GIF only supports 256 colors at any given time is hardly ideal. Also, they tend to look “grainy.”

Use it for: Icons, emoticons, basic graphics, and pixel art

Avoid using it for: Photographs, complex graphics, things that are to be printed, and most types of artwork.

PNG

What it stands for: Portable Network Graphic

How it handles color: Very well. Little or no loss of colors, no loss of quality that you can get with JPEGs, and supports thousands of colors, unlike GIFs that only support 256.

How it handles transparency: Very well. Little or no loss of edge softness or hardness. PNG is also the only widely accepted file format that allows for partially transparent pixels.

Can it be animated: While this answer used to be a resounding “No,” there are actually animated PNG images out there, now. Here’s a website that talks about them.

Average image size: As with all images, it depends on the size of the image. A 5px by 5px image is going to be a small file size, while a 5000px by 5000px is going to be rather large. If the image has transparency, it will be relatively low (for the size). If the image does not have transparency, it will save the same or a little more as a high quality .JPEG of the same size.

Its primary usage**:** Artwork, graphics, graphics with transparency.

Disadvantages: In recent years, the support for PNG images has exploded, and while they’re not as widely supported as GIFs and JPEGs just yet, all newer major browsers (such as Safari, IE 7+, Firefox, and Chrome) and OSs will display PNG images with no problems.

Use it for: Artwork, work that is to be printed, and graphics that use transparency.

Avoid using it for: Photographs, the files just end up being much too large.

Other File Formats You’ve Probably Run Across:

.PSD

What it stands for: Photoshop Document

What it’s used for: Default Photoshop file. Supports layers as well as image effects, grid overlays, and all sorts of Photoshop specific abilities. These files generally tend to be very large as they are uncompressed. You’ll generally use this to save works in progress, and when finished, you’ll save as a JPEG, GIF, or PNG file. Several programs such as GIMP, Open Canvas, and Corel Painter can open PSD files in some capacity.

.BMP (or its counterparts: .RLE, .DIB)

What it tands for: Bitmap

What it’s used for: You’ve probably run across when you played around with Microsoft Paint, as Paint saves all the images as .bmp files. Often used as a texture file. Files tend to be rather large, because the image stays fairly uncompressed. Also, a lot of scanners will scan images in as .bmp files.

.TGA (or its counterparts: .VDA, .ICB, .VST)

What it stands for: Targa

What it’s used for: Texturizing. It works in the same way that a .PNG file does. The popular online game Second Life uses this file type to texturize clothing for custom characters. Programs such as Maya, 3D Studio Max, and Poser also utilize this file type as well.

.TIFF (or its counterpart: .TIF)

What it stands For: Tagged Image File Format.

What it’s used For: Scanners often scan in .TIFF format, as it is simply a high-quality Bitmap file. Some programs (such as Photoshop) can take advantage of the fact that TIFF files actually do support layers.

Image Credits

Images within this article were created by Amber Neely.