Image Formats: What They Mean, And How To Use Them

Jun 27, 2012 by Jennergy    No Comments    Posted under: Design Tips

It can be very confusing when choosing image formats. Which are best for graphics, photographs, what works best with text, etc. Following cryptic descriptions of what they are can make it all the worse. Today, we will break down the most popular and widely used image formats on the web: JPEG, GIF, TIFF and PNG.

JPEG — The Internet Standard:

Most photographs and images you find on the web will come in this widely popular image format. JPEGs are what is referred to as a “lossy” format, meaning that every time the file is saved, it loses some information. This has its advantages and disadvantages, of course.

The lossy format of the JPEG enables you to use large images, without taking up the space that the original would. This is great for the web, and pretty much anything that will be viewed strictly onscreen. JPEGs are best for photographs and graphics with lots of colors and hues, the more variation in color, the better.

On the downside, a JPEG that has been shuffled throughout the internet, sourced and re-sourced, will begin to visibly degrade as a result of the compression process. Also, images with large areas of flat colors such as graphics and type, tend to get “artifacting,” the industry word for the clouds that form around the edges of images.

GIF — The Animation Specialist:

This format is a lossless format, meaning that none of the information is lost when saving. You’ll see this format in graphics on both the web and on-screen, in still images and animations.

Because of the lossless compression, GIF is a great format for graphics with lots of flat color, and minimal gradients. Additionally, this format allows for the individual frames of an animation, making it one of the leading web animation formats.

On the downside, gradients and areas with lots of color can become noisy and pixilated.  This makes GIFs not ideal for photographs, graphics with lots of color, and anything with excessive gradients. GIF does allow for transparency, but only one channel (usually a background color).

TIFF — The Keeper Of Info:

You’ll see this format used in photographs, for the most part. Another lossless format, TIFF allows you to save every bit of information in an image, and never loses it. It’s used in most printed materials that have photographs, and even in some graphics.

Like the JPEG, the TIF format is a bitmap image, meaning it is made of pixels on a grid rather than points, and allows for a wide range of color. This is ideal for photographs that will be used continuously, images that will be used in printed materials, and anything that requires a high resolution image.

Because it’s a lossless bitmap format, files can become oversized and difficult to deal with. This format is not ideal for the web, or any place where space is tight.

PNG — The Invisible Image:

This format uses a similar method of compressing images to the GIF, but allows for smoother gradients. The newest web file format, PNG, allows for transparency in an image, which none of the previous formats are able to offer, and image size can be closely controlled in Photoshop.

Because transparency is possible with this format, it’s great for any graphic that has an irregular shape (basically anything that isn’t a square), and can be laid directly on top of other graphics. Because you can control how many colors are in your graphic, you can fine-tune the way it looks on the web, allowing you greater control when exporting for the web.

PNG, while on the cutting edge of web graphics, does have it’s limits. The maximum amount of colors allowable in a PNG is 256, so full color photographs and highly detailed illustrations can suffer for it.

Now that you know the basic weaknesses and strengths of these common file formats, you have the power to create lean, mean web graphics perform well and look great. Tell us your image format story below. Whether it’s an informative how-to or a nightmare, we’d love to hear it, so feel free to share!

Got anything to say? Go ahead and leave a comment!