Posts Tagged ‘exchange’

What image format should you use on your website?

There is nothing more complex about publishing on the web than the concept of images, they’re quite possibly the hardest part of HTML for the general public to get their minds around so let’s take a quic look at what makes an image complicated and how we as web designers and publishers can approach them in a simpler way.

Image Format

The first step to web graphics is to appreciate that images come in dozens (or hundreds) of file formats from BMP’s to TIFF’s and everything in between but when it comes to the web, there are really only three formats for you to think about:
  • The CompuServe Graphics Interchange Format (GIF) format (pronounced giff)
  • The Joint Photographic Experts Group format, JPG (pronounced jaypeg)
  • the Portable Network Graphic file format, PNG (pronounced ping)
Close up of the GIF file format

Close up of the GIF file format

These three file formats encompass the entire spectrum of Internet based graphics. The first format, GIF was introduced way back in the very first days of computer graphics (1987) and allowed people to exchange graphic files via an online community similar to America Online (AOL). The GIF format was limited to 8 bits of color (255) with some reserved for core data. It was a loss-less graphic format ideal for the graphics of 1987 but could hardly produce quality photos.
The GIF format stores each pixel of an image as one of 255 possible colors resulting in a crisp image. The GIF format however also had a number of unique benefits such as the ability to have invisible (alpha) transparent  pixels which when place overtop of other colors would allow the backgrounds to remain visible and the capacity to store multiple GIF images in a single file as pages. When displayed in a web browser or other image viewing tool these pages would appear as animations similar to old ‘flip book’ style animations.
In 1992 the  Joint Photographic Experts Group created and issued the JPEG standard to the world. These days we tend to call the file format JPG since old Microsoft based computers could only hand three characters as a file extension but the format is also known as .jpg, .jpeg, .jpe, .jif, .jfif  and .jfi. The .jpg format was an instant success, it quickly addressed the primary failings of the GIF format by allowing 24 bit graphics (16.7 million colors) and smooth transitions between the these colors using a lossy compression method … which is a fancy way of saying the graphics blended together.
Lossy file saved as both 20% and 80%

Lossy file saved as both 20% and 80%

In effect, how the JPG standard worked was to rapidly reduce file sizes by averaging the color values of a pixel with those around it. This caused massive reductions in file sizes allowing photographers to post 500kb images in extremely small (20-100kb) files while controlling the loss of quality. To the right you’ll see an image saved at 20% quality to the left and 80% to the right, both the difference in quality and the method JPG uses to reach the results should be evident.

Before I go on, I want to pause and take note of a statement I made in the above description because I’m sure most people missed it or brushed past without much thought … the JPG file format was introduced to the world in 1992. This phrase is critical because it reinforces how much the world has changed in just 17 years. For those of you who are under 20 years old, you’ll most likely have never known a world without Facebook or YouTube but for the rest of us, we sometimes forget the Internet is for all purposes a fairly recent addition to the world. I’m 35 years old and I remember the first JPG photo that I saw, the introduction of this format changed the way we shared images over computers.  Notice that I said it changed the way we shared images over computers? There was no Internet, or at least not what you see today.

In 1996, Unisys became uppity and started threatening to sue over the LZW compression found in the GIF format so the world invented the Portable Network Graphic format (PNG), along the way the format improved upon most of the qualities of the GIF and lost the capacity for animation. The PNG format has 8 bit graphics similar to the GIF but also has 24 bit like the JPG and introduced a new level with 32 bit graphics. While it lacks support for animation, it includes transparant pixels like a GIF. Unlike a GIF, where those pixels can be on or off the PNG allows for alpha transparency making the format extremely flexible and also capable of compressing images. The problem with the PNG format, is that it produces large files.

export dialog What image format should you use on your website? image

So which is best? Actually that depends entirely on what you want to accomplish with the graphics. As you’ll see from the image above the file size of the graphic can range from ~25k to ~430k depending on the quality you’d like to achieve.  Photographers for example should use the JPG compression most often to ensure their images are strong, crisp and colorful while illustrators and others who work with line art will benefit from the GIF format. In the end, practicing and experimenting are the best ways to determine what you should be using.

A quick thank you to the Old Shoe Woman for posting the a wonderful photo Sunlight Under a Live Oak Tree on Flickr for me to use as part of this tutorial.