Biomedical Engineering
Design Projects

Picture Formats

Skip navigation (Access key: S)
Contact information

By: Bern Jordan.


 

There are three major graphics formats on the web: GIF, JPEG, and PNG. Of these, PNG has the spottiest support, so that generally leaves one to chose between GIF or JPEG format. There are many other available formats in which to save image files; it is likely that many of your web site visitors will not be able to view your files.

JPEG

JPEG is a lossy compression technology, so some information is lost when converting a picture to JPEG. Use this format for most photographs because the images will be smaller and look better than a GIF format picture.

JPEG Photo GIF Photo
A JPEG-format photograph of a circuit board. A GIF-format photograph of a circuit board.
JPEG image, 60 quality
16.9 KB
GIF image, web-safe palette*
18.6 KB
* I cheated a little. To make the difference between JPEG and GIF readily visible with such a small photo, I used the web-safe palette on the GIF image. This causes the easy-to-see graininess of the second photo. One could use an adaptive palette to improve the picture, but the GIF photo would still have a larger file size without the quality of the JPEG image.

It is not good to edit and re-edit a JPEG image because more detail is lost with each subsequent save. If you want to edit the picture multiple times, save it in a different format (like TIFF) on your machine, but post it to the web as a JPEG. Edit the TIFF image each time.


GIF

GIF files are better for figures with sharp contrast (such as line drawings, Gantt charts, logos, and buttons). One can also create transparent areas and animations with GIF images. A GIF image has a maximum of 256 colors however, so images with gradations of color will not look very good.

JPEG Screen Capture GIF Screen Capture
A JPEG-format screen capture. A GIF-format screen capture.
JPEG image, 30 quality*
6.2 KB
GIF image, adaptive palette
5.1 KB
* To make the picture quality difference more noticable, I saved the JPEG image at 30 quality. Notice the blurry portions around areas of high contrast (such as text).

PNG

GIF is a patented file format technology. PNG is an open-source standard that can be used for many of the applications of GIF images. PNG is better than GIF in most respects, providing more possible colors, alpha-channel transparency, and color matching features. The PNG format is not as widely supported as GIF, although it is supported (to differing degrees) on the version 4 and later browsers.

If you are interested in PNG images, visit the official PNG home site or the W3C PNG web page where you can find some browser tests.


Other picture formats

BMP

BMP or bitmap files are pictures from the Windows operating system. Using these on a web page can cause problems because they cannot be viewed by most browser. Stay away from using BMP files on the web.

TIFF

TIFF images have great picture quality but also a very large file size. Most browsers cannot display TIFF images. Use TIFF on your machine to save images for printing or editing; do not use TIFFs on the web.


Valid XHTML 1.0!
Valid CSS!
Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0
Bobby WorldWide Approved!
Owner: Willis Tompkins, Ph.D.
Author: Bern Jordan
Created: 7 February 2002
Content updated: 7 May 2002

Back to navigation bar (Access Key: N)
Back to top.