Vector or Raster Images - Website Design Overview

website design graphics UFO 1So, you're hanging out on your back porch, minding your own business, eating your surstromming and drinking a sarsaparilla when all of a sudden out of the blue this UFO goes wizzen' over your head. So, being the quick-thinking entrepreneur that you are you whip out your cell phone camera, snap a few pictures and say to yourself 'I'm gonna be rich! All I need to do is pull these pictures into my computer, blow them up like they do on CSI, put them on my website and the world will beat a path to my door!'. (To all of you outside of the US this might seem a little strange, but believe me this is a fairly common occurrence here in the states).

website design graphics UFO 2So you fire up your copy of Photoshop, open the picture and enlarge it 1600%. 'Hey, what the?!!? Where did the UFO go? All I've got is a bunch of square blotches, I can't make anything out'. Well, let's take a look and see what happened, but first you had better go cancel your order for that new Porsche.

First a disclaimer. This is a high level, generalized, incomplete overview of computer graphics. There is a reason why there are thousands of books written on this subject, it's because it is a complex and difficult one to understand. It is simply not possible to cover it adequately in a single article. I'm going to hit the highlights, and try to give the average computer user some useful information to work with.

Let's start with the fundamentals. There are two basic types of graphics for use on your computer:

  • Vector - made up of mathematically defined lines, curves, shapes, etc.
    Some common vector graphics types are:
    • .ai (Adobe Illustrator)
    • .eps (Encapsulated PostScript)
    • .wmf (Windows Metafile)
    • .emf (Enhanced Metafile)

Because these graphic types are calculated they are called resolution independent. Basically what that means is that you can take an image that was created as a vector graphic and enlarge it to the size of a large building and the lines will be as clean and crisp as was the smaller version. When it is enlarged the computer simply recalculates and redraws the image.

  • Raster (or bitmap) - made up of a grid, or raster, of small squares called pixels. Some common raster graphic types are:
    • .jpg or .jpeg or .jpe (Joint Photographic Experts Group)
    • .bmp (Bitmap)
    • .gif (Graphic Interchange Format)
    • .png (Portable Network Graphics)

This is your typical photograph shot with a digital camera or scanned into your computer. These images are resolution dependent, which means they are only as good as when they were created. If you try to enlarge them you get the blurry mess we saw above.

Since we're talking about website design let's focus on the image types that you are most likely to be working with. The vast majority of the time, if not all the time, you will be working with raster images. The primary reason for this is that as of this date (Feb 2006) the browsers that will be rendering your webpages are only capable of dealing with raster images. Now before I get flamed I know that Firefox and others will render the SVG file format, but let's face it this is hardly mainstream material. I promise to re-write this in a couple of years when all we are dealing with are lightweight XML-based images created on-the-fly out of databases. OK, maybe more than a couple of years from now. The second reason for focusing on raster images is that most of the images that most websites deal with were originally created as raster images by a camera or a scanner.

Let's start by looking at a pixel. A pixel is a square block of color the size of which will vary depending on the resolution of the image. At a resolution of 72 pixels per inch (ppi) you are fitting 72 of these blocks into a square inch. At 300 ppi you are fitting 300 of these blocks into that same square inch. Obviously, the individual pixels in the 300 ppi image will be smaller than the pixels in the 72 ppi image. It is said to have a higher resolution, and will be a better quality image because you are fitting more colored blocks into every square inch.

The reason I use 72 ppi and 300 ppi for examples is that those are typical standards for electronic and printed media. When you view an image in your browser you are most likely looking at a 72 or 96 ppi rendering of that image. This means that there is not much point in putting 300 ppi images on your website, because your users will get no added value when viewing them on their screens. All it's going to do is make the images heavier (meaning they are larger in kilobytes or megabytes) and will make your screens load more slowly.

On the other hand you will probably be disappointed when you try to print a 72 ppi image on your new printer. This is because printers are capable of printing at a much higher resolution than your computer screen is capable of showing. Printer resolution is usually measured in dots per inch, which is not the same as pixels per inch. In depth discussions of the differences between dpi and ppi make me want to go sit on the back porch and look for UFOs, so I'm not going to go into that here. If you feel so inclined you're welcome to do a Google search for those terms, happy hunting.

The main thing to get from this is that you can not increase the resolution of the image by just increasing the dimensions of it using a high-power graphics program. If you have an image that is 5" x 7" at 72 ppi, and you increase the resolution of that image to 300 ppi, all you're doing is decreasing the size of the image to 1.2" x 1.68". This is because when you change it from 72 ppi to 300 ppi what you're really doing is decreasing the size of the pixels that make up that image.

Here's another way to look at it. Let's say you have an image that is 5" x 7" at 72 ppi. You then use a graphics program to enlarge that image to 15" x 21". In order to achieve this your graphics program either has to make those pixels 3 times larger (making the image now somewhere around 24 ppi), or it must add pixels to the image and 'guess' what color they should be. In either case you're going to end up with an image that looks blurry, as was demonstrated in the original example.

So here are some basic rules to keep in mind when you are working with raster images:

  1. Always try to start with as high a resolution as possible. If you are taking images with a digital camera use one that has a higher megapixel rating. Here again, megapixels are beyond what we're going to talk about here, suffice it to say that the higher the megapixels of your camera the higher the resolution your image will be. If you are scanning an image use a higher resolution setting. You can always make your image smaller, you can never make it bigger.
  2. Never try to increase the dimensions of a raster image. All you're going to do is to pull it apart and make it look lousy.
  3. Always save images to be used on your website at 72 ppi. Anything over that is just a waste of perfectly good bandwidth

Oh, and don't believe everything you see on TV. I don't care who you are, you're not going to be able to read the license plate of the vehicle that was used to murder your friend when it was created as a low resolution image by an orbiting satellite. Oh, wait a second, I think that was NCIS, not CSI, and after all that is a US government agency, maybe they can do that. I'll bet they can read my mind, too [putting on tin foil hat]....

Additional resources

 
  • The UFO image used here was shamelessly taken from Alien-UFOs.com, where they have all kinds of neat pictures of this sort.
Bytes: