using a modem, or just want to change this site's design? try these...
website design tips » September 2004: “ ‘Vector & Raster’ Are Not A Type Of Dinosaur”
most recent project
CORE BT Application Graphical User Interface (GUI) and Advanced CSS Design. Requirements included outstanding design and flexible advanced XHTML/CSS
web site design tips
This month’s website design tip is on the topic of vector vs. raster graphics.
web site design techniques
This month’s website design technique demonstrates a wacky way to fake a resizable background image in a DIV.
“ ‘Vector & Raster’ Are Not A Type Of Dinosaur”
by John Barrick
I still run into lots of folks who don’t really understand graphic image formats and image resolution. It can make a big difference in how images appear in their final form. It sure was confusing for me when I was starting out. Here’s the lowdown.
There are 2 main categories of electronic images:
- vector
- raster
Vini, Vidi, Vector
Vector images are fomats that use mathematical equations to represent the lines, curves, etc of your image and therefore are much lower in size on your hard drive than a raster image. As long as you keep the image as a vector format you can resize it with no loss of clarity, over and over again.
Adobe Illustrator is one example of an application that produces vector images. Vector images are great for images that have more areas of flat colour. Passing your logo around as a vector image is good because people can resize them and it will remain crisp when printed or exported. Vector images are not good formats for images like photographs, which don't often have areas of flat colour. Common vector image file types end with these file extensions:
- .EPS
- .AI
Rast, Raster, Rastest
Raster images use dots (ink dots when on paper, pixels on your screen) to represent your image. Raster images describe every dot of your image as a colour and a bit depth and where it is in relation to other dots in the image, so it is therefore much larger than a vector image. Raster images get "fuzzy" when you make them larger than the original because your computer has to guess (interpolate) what dots should come between the other dots to make the new dots it needs for the larger size. Raster images are generally OK to shrink down, though if you have an application that allows it you should "sharpen" the image after shrinking to make it crisper. Adobe Photoshop is one example of an application that produces raster images, though it also now incorporates some vector formatting. On a PC, Paint is a raster application but it doesn't have many tools because it's free. Raster images are great formats for photographs. Common raster image file types end with these file extensions:
- .PSD
- .TIF (or .TIFF)
- .BMP