Home

Hello. My name is Noemi Millman, and Triopter is my web development agency. We handcraft beautiful, dynamic websites.

See what I can do for you.

Noemi Millman: Triopter: Understand Image Formats, Part 2: JPEG, GIF, TIFF, PNG, and BMP -- the Raster Formats

Understand Image Formats, Part 2: JPEG, GIF, TIFF, PNG, and BMP — the Raster Formats

As we learned in Part 1, there are two major types of image formats, vector and raster. A raster image is made up of a grid of pixels.

But there are several different raster formats. What’s the difference between them?

BMP

Let’s start with BMP, which is the most straightforward format. BMP stands for “bitmap”, and it is literally a list of pixels, with a color specified for each. Although Microsoft Office seems to like them a lot, BMP’s are not especially desirable for designers. They have large file sizes and often low color depth (meaning they can store only a few distinct colors and not subtle gradations of color). They are usually appropriate only for clip art

TIFF

TIFF is a little like BMP with some improvements. A TIFF is also a list of pixels with a color specified for each, but it can handle a lot more colors, so it is appropriate for photos. TIFFs can also have multiple layers (like data for multiple images in a single file) or parts of an image that are transparent; however, not all software recognizes those features, and most TIFFs do not use them.

TIFFs are a preferred format for saving high quality photos, and they can be compressed (the file size reduced) to a certain degree without losing any quality.

They also display graphics without loss in quality, although they are not as flexible as vector images in that the graphic cannot be separated from the background and the size can only be decreased, not increased, without losing quality. If you must send a graphic, such as a logo, in a raster format, a high-resolution TIFF can be a good choice.

However, file sizes are larger than for other formats (other than BMP), and not all browsers can display TIFF files, so while your designer may request a TIFF to work with, he or she likely will use another format for the final product.

JPEG

JPEG is the best-known image format out there today; but it is often abused. JPEGs are a “lossy” compressed format. That means that file sizes are made smaller by discarding some data; the software that displays the image then approximates the data that is missing.

JPEGs are good for photos, and a high quality JPEG can be many times smaller than a TIFF of the same photo at the same size. The trouble with JPEGs is overcompression, which results in what are called “compression artifacts”:

compression1

If you look closely at a JPEG on a good monitor, you can see little blips around the edges of things. Those are the compression artifacts. An overcompressed JPEG like the one above will have visible compression artifacts clearly visible even to the untrained eye.

Worse, even a high quality JPEG loses additional data each time you open and re-save it. So a good image that is edited several times may end up with ugly artifacts like in the image below, even if it’s saved at high quality each time (before, then after; compare her teeth):

lowcompression
compression2

For photos, a moderate amount of compression is barely visible, but because compression artifacts can make what should be even colors look uneven, JPEG is a very poor choice for graphics like logos (first image is a GIF, second is a JPG):

giflogo jpeglogo

Nearly all web browsers can display JPEGs, and they have the smallest file sizes for photos, so JPEG is easily the best format for displaying photos on the web, but is not a good format for graphics, and is not quite as good as TIFF for storing photos that are going to be edited. And be careful of how much compression you use!

GIF

GIF is also a “lossy” format, but instead of discarding detail, GIFs discard color information. The fewer colors a GIF has to display, the smaller the file size can be without losing any information. But GIF also has a maximum of 256 colors.

That means that GIFs are great for displaying things like logos, but horrible at displaying photos:

giflogo
gifphoto

GIF has another feature, transparency, which gives it an advantage over JPEG for certain uses:

transparency

GIF is also recognized by nearly every web browser, and is often used for graphics on the web. It is another format that is not usually good for sending images to your designer, but that your designer may produce for the finished product.

PNG

PNG comes in two varieties, 8-bit and 24-bit. The numbers refer to the amount of data stored for each color. An 8-bit PNG can store up to 256 colors and is functionally equivalent to a GIF.

24-bit PNGs are interesting. You can store a photo in a 24-bit PNG, although it will result in a very large file. However, because it does not suffer from compression artifacts, 24-bit PNG is a great format for displaying images that contain both graphics and photos, such as a screenshot of a website (click for full size):

Picture 125

What’s especially interesting about 24-bit PNGs is the potential for partial transparency:

trans

Sadly, older versions of some browsers (particularly Internet Explorer) don’t support partial PNG transparency without messy workarounds that have other drawbacks. Soon, however, PNG may replace GIF as the dominant format for non-photo web graphics.

  1. COMMENT: by Noemi Millman | Triopter» Blog Archive » Understanding Image Formats, Part 1: Vector vs. Raster, April 6th, 2010

    [...] Next Entry [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

Comments may be held for moderation to prevent spam: your comment may not appear immediately.