Image Formats for the Web – Raster Graphics

.jpg, .jpeg, .gif, .png, and .svg are the graphic image formats used as standards on the Internet. What do all these formats do, and what's the difference?

Every time I go looking for what formats does what, and when you should use one, or the other, it's like reading a textbook, and then trying to figure out how that applies to what I'm trying to accomplish. Let's see if we can clear the air a tad.

There are mainly two types of graphic formats used on the Internet, raster and vector. All of the above file formats, with the exception of svg, are raster formats. Vector formats, svg, I will cover in my next post. Let's talk about raster formats in this post, which seems to cause the most confusion.

Think of raster images as a bunch of dots, like you see in a newspaper picture. The dots can be many different colors, and when you get far enough away from the picture, they blend together to form a complete image. This was a popular method of painting during the Impressionist period pioneered by the French painter, Greoges Seuret, called Pointillism.

Georges Seurat - A Sunday Afternoon on the Island of La Grande Jatte - 1884

The dots are called pixels in computer lingo. If you zoom way in to the image on a computer, you'll see little rectangles of color. When you store a raster graphic, it's like storing a blob of bits. There is no internal language, or syntax, you can use to look inside the blob and discern how it's put together, the various formats do what is called bitmap to read the image. As a consequence of this, the larger the picture, or the more dense the dots, the more dots there are, and the bigger the file size.  File size matters, because of the time it takes to load the image in your browser. The bigger the file the longer the load.

To edit a raster image you use a raster editor that can do amazing things to change the color of an individual pixel or groups of pixels.   One thing is has a hard time doing is selecting an object in the picture since there are no objects.   For example, it's difficult to select the dog in the picture, to make a duplicate dog somewhere else in the picture, since every thing in the picture is a bunch of dots.  The dog and everything around it are just little rectangular pixels,  there are no clean boundaries except for changes in the pixel colors.

Editors that specialize in raster graphics are Adobe's Photoshop and the Gimp. Both these editors have a large array of filters and tools to work on the dots. Both of these editor can save the image in a variety of formats and translate from one format to another. The raster formats are .jpeg, .jpg, .gif, and .png. The difference between them is how they store the picture.

First off, .jpeg and .jpg are exactly the same. It use to be it was called .jpeg, but now some browsers will not accept a file with a .jpeg ending. If your browser balks on you, simple, just rename the suffix to .jpg and your all set.

.jpg image

The .jpg format supports an amazing 16.7 million colors. This makes it ideal for storing very fine detailed images, like photographs. It also stores digital camera information called Exif image data with the image. And this is jpg's primary use, because it has two major drawbacks. It does not support transparency, you cannot make areas that see through to the background behind the image. And it's algorithm to compress the file is lossy. It throws out information without significantly altering the visual appearance. That's OK, except each time you edit the file and re-save it, the image gets a little more fuzzier. It doesn't take too many edits and saves before this becomes noticeable. If your designing a front page image, where you may be making a lot of minor changes, before you get it where you want it, steer away from jpg.

Gif files support only up to 256 colors. It compresses other colors to conform to its 256 colors, and because of this you end up with smaller file sizes.  It's benefits include transparency, you can have only a part of the image show with the background behind the image showing in the other areas;  Animation, gif allows you to make an animation, like a cartoon.   It will flip through a series of gif images all in the same file, quickly, to make it seem like the image is moving.

These are called animated gifs, and there are a couple of specialty editors that will help you create animated gifs.  With an animated gif, used with transparency, you could have a cartoon figure, like the road runner run across your desktop.

An Animated .gif

Finally, in .gif images,  there is no loss of image detail with multiple edits. Gif can be used for drawings with large same color areas, icons, and logos. Do not use .gifs with photographs, with gradients, or with anti-aliasing, because they reduce the colors, and curves will appear more broken up.

A more complete .gif image

A more complex .gif image

Png is the newest raster format. It was created as a gif replacement, but did not quite end up that way. It supports, transparency, no loss of data with edits, and 24 bit color. It does better than gif in all of these areas. It offers better transparency, greater color precision, smoother gradients, and no loss of data over multiple saves. It has its drawbacks, because it does not lose data, and has more colors, it's file size is slightly bigger than both gif  and jpg files. It does not support animation, you have to use another format, clones or extensions of  png, either .mng or .apng.  The problem is neither of these animation .png clones are currently widely supported on browsers. Png is widely supported across all browsers. Png is ideal for storing images with lines, clean edges, and text.

A .png image converted from a .jpg

The difference in file sizes are not that great, and Internet speeds are getting faster, so the .png format makes sense. If you start editing a .jpg file convert it to a png file.  If it loads slow, consider returning to your original .jpg and use less compression to speed up your web load time.

To sum up, if you want animation, use gif. If you're just displaying a photograph from a digital camera stay with jpg. For most of your raster graphics use the .png format.

This entry was posted in Web Graphics and tagged . Bookmark the permalink.