First of all, happy memorial day to everyone, especially to any veterans who might be reading this blog. Sincerely, thank you for your service.

Anyway, I’ve saved a very special post for this holiday edition of web design weekly. An especially boring post. Here’s the deal. We have been talking about photos for your website. I started with where to find pictures, then I gave you a suggestion for how to organize and enhance your photos, but before I can move on to some great full-bore photo editing posts, I need to lay the groundwork. In digital images, that is the file format.

A simple google search of the form “what is —” will uncover many very well written pieces which chronicle the entire history of every image format that I will write about here, but for the sake of brevity I will cut to the bottom line – what they can do for you.

There are several incredibly common file formats for images on the internet that you absolutely need to know about.

Chief among in my opinion is the .jpeg, pronounced (jay-peg). The .jpep (normally shortened to .jpg) offers nicely detailed images at an amazingly small size and is supported by any browser. The key to any jpg is the compression level, nearly any image editor will allow the user to adjust the compression rate at which the file is saved, this usually appears as a sliding scale right before the file is saved. However, this compression is also a barn burner. The more compressed an image, the more actual data from the picture is irrevocably lost… that’s right, forever. So be very careful to only save final copies in jpg. Jpg is good for detailed rectangular images large or small.

The number two most popular image format is the .gif (pronounced gif or jif). This format allows for two powerful features over jpg: transparency and motion. This makes gif a common format for banner ads, where both transparency and motion are popular. The major downside for gifs is that their color is indexed using only a certain few colors. Never mind what indexed means, just know that gif doesn’t allow for a full range of colors, so it is not the best choice for all contents.

Another important file format is the .png. Png is an attempt at reconciling the quality of a jpg with the versatility of the gif. Thus, although png is indexed like gif, it supports a wider variety of colors and provides a nicer final image in most cases than gifs while still retaining the transparency of the image. Therefore it often is a nice alternative for the web designer. The drawback to png files at this point is that not all browsers handle them the same way. Thus you can sometimes have unsupported images or weird distortions. (NOTE all current versions of browsers support .png images). Also, I’ve read that the new version of Mozilla Firefox will support animated pngs.

The above are all varieties of bitmap images. That is to say that the computer produces the image based on pixel data, basically what color is this dot on the screen, and what is the color of the next dot on the screen. Therefore, stretching and and skewing can cause pixelation and the like. The most basic form of a bitmap image is the .bmp file. This is the file format of choice for ultra-top end image manipulators like microsoft paint (or not so top end). Although any web browser will support this file, the size makes it unuseful on the web even though you’ll see it every blue moon.

The other school of graphic is the vector graphic. This image is not created using pixel data, but rather is constructed (in the geometrical sense) from the underlying mathematical properties that created the original image. Therefore, no matter what size you stretch it to a shape stays perfectly in tact because the underlying mathematical structure remains rigid while the size changes. This file type for the web is the .svg (scalable vector graphic). These are really nice, and the format of choice for programs like adobe illustrator and corel draw. However, web support for this file type is currently sketchy so most web developers steer clear for now, or at least convert to another file type before putting on the web.

Pros and cons illustrated

bmp

gif

jpg

png

One thing to keep in mind. Any choice you make to save an image loses data, so make sure to keep as much of your data as long as you can. For example if you are making a jpg in photoshop, makes sure to save the original .psd file (the one with the most data) even after you make the jpg because the last thing you want to do is to have to make another jpg from a similarly sized jpg. Believe me you will not like the result.