Overview of Image Files for Web Use

Images in websites serve many purposes.  They identify you via your logo.  They showcase samples of your work.  They express the tone and feeling of your company.  To optimally use image files on your site, you should be familiar with the different types. 

There are different kinds of image file which are suitable for use on the web, the three main ones being GIF, JPEG and PNG.  Other file types such as BMP, PDF, and TIFF are also available, but their use is diminishing to the better suited GIF, JPEG, and PNG formats.  When you’re putting images on your website, which file type you decide to use will depend the image’s purpose and intent.  Below is a quick summary of the merits and drawbacks if each.

The Big Three

A Graphics Interchange Format (GIF) file is an 8-bit, 256 color file format.  Because they are supported by virtually all web browsers, GIFs are extremely popular on the web.  The compression used in GIF images is lossless, meaning that sharp edges are retained.  GIF images have a comparatively limited palette so they are quite suitable for simple images, such as logos or text.  They are not, however, appropriate for color photographs because of the limited palette.

JPEG stands for Joint Photographic Experts Group.  It is an image which uses a form of compression in which the user can adjust the file size and definition loss during the saving process. This format is most often used for storing digital photos since the format supports up to 24-bit color.  JPEG images are not limited to a certain amount of color, like GIF images are.  This means  the JPEG format is best for compressing photographic images.  Today most digital cameras save their image files as a JPG by default.  This format is also common for publishing web graphics since the JPEG compression significantly reduces the file size of images.

The  Portable Network Graphics (PNG) format was developed as an alternative to GIF.  It continues to gain popularity for web applications, and although GIF is still widespread on the internet.  The benefit of using PNG, as opposed to GIF, is that PNGs support 24-bit color.  PNG images use a compression method which keeps the images crisp.  PNG file sizes are about the same as GIFs, but  larger file sizes are possible since they use so many more colors meaning there is more information to store.

The rest of the pack

BMP, or Bitmap, is an image file format primarily used to store digital images.  The simplicity of the BMP file format, and the amount of associated documentation available, make it a very common format that image processing programs from many operating systems can read and write.  The downside is the relatively large file size due to lack of any compression.  This is causing the BMP to fall out of favor.

The Portable Document Format is a unique file type.  PDF files may contain not only images, but also text, forms, outlines, and other data.  The PDF preserves fonts and formatting across multiple platforms which makes them appear the same on the screen as they will on  printed paper.  Although not the ideal for web image use, PDFs are quite valuable for other applications on your site. 

TIFF stands for “Tagged Image File Format.”  It was originally created in the 80’s to be the standard image format across multiple computer platforms.  The TIFF format can handle color up to 24-bit.  It is often used for storing images with many colors, such as digital photos, but the file size tends to be larger.   Recently, JPEG has become the most popular universal format, because of its small file size and Internet compatibility.

Nearly all websites use GIF and JPG formats for their web images. The PNG format, supported by most of the latest generation browsers, is causing PNG to gain favor.  The PNG does everything GIF does, but much better.  It is inevitable that PNG will replace GIF over time, but PNG, will always play second to JPG since JPG has better photographic compression. The TIFF format should be avoided for web use as it is not widely supported by web browsers.

More information that you needed?  I think so, which is why so many people leave these details to the web developers.  Rest assured that web developers relish this geeky information so they know exactly which format to use on a site.