NOTE: It’s already taken me forever to get this article posted to the website; I have images I will be incorporating into the article but they’re not ready yet. if you need to see examples and I haven’t already removed this note, keep checking back to this article.
There are two different types of images used by Graphic Design software:
Raster-based images (sometimes called “bitmap”) and Vector-based images
Raster Images
Image Processors / Photo Editing programs use raster-Based Images
A raster image is made of thousands of pixels, tiny little dots. The rich, detailed images you see all around you in print and video are often created or edited with dots. Every dot can be a different color, allowing for a phenomenal range of colors and the ability to render full-color images like photographs. Raster-based images do have some drawbacks:
- Raster images create larger files. All of the zeros and ones that are used to make up each pixel result in large files sizes. Your computer must keep track of the zeros and ones and must change each one when editing. The larger the size and quality a raster image is going to have, the larger the file will be. This is why some high quality print graphics may be too large to send by email.
- Rasters do not resize well. When you resize a raster image, the pixels just multiply, making the image appear muddy and chunky.
- Image Processing/Photo Editing programs like Adobe Photoshop use raster-based images to allow for total freedom and precise control over an image’s appearance.
Raster-based file formats include: .JPEG, .GIF, .PNG, .TIFF, .BMP and etc.
Vector Images
Illustration Programs use Vector-Based Images
Vector-based programs handles images in an entirely different way because it doesn’t render images on a pixel-by-pixel basis. In a raster-based image, a square would be made of thousands of pixels. In a vector-based image, the same square would be made of only four dots, one on each corner. Essentially these “vector points†allow your computer to play Connect the Dots. Each vector point has information in it telling your computer how to connect each point with straight or curved lines, and with what color to fill in the closed shape. In geek-speak, if you were to look inside how each part of a vector image you’d see that it’s made of code and algorithms, much like some of the popular programming languages out there.
Other points of interest regarding Vector images:
- In the printed image, the vector points would be invisible.
- Because the computer only has to keep four points in its memory, it is much easier for the computer to edit vector-based images.
- If you resize a vector-based image, it loses little or no detail. The vector points spread out and the computer just uses the algorithms to recalculate and redraw the image. You can color or recolor a vector-based image very easily using an illustration program.
- Vector images do have some drawbacks, however. They are generally filled with a solid color or a gradient but can’t display the lush color depth of a raster. They also work better with straight lines or sweeping curves.
- Illustration programs, like Adobe Illustrator and Macromedia Freehand, primarily use a vector-based drawing mode to allow for scalability and clean lines.
Vector-based file formats include: .AI, .FH, .EPS, .PS, .SVG and etc.
For these reasons, this is why most professional Graphic Designers (including myself) commonly create their logos as vector-based images. This insures that their client will be able to take that finished design and scale it so that it will fit on a postage stamp, a business card, or on a billboard and the quality is always the same.
Is there any middle ground?
It’s funny you ask that. The answer is “Yes”, there are some next-generation graphics formats that incorporate elements whose traits can be either Raster or Vector. One such example is Adobe Photoshop’s native PSD format. Another is Adobe Acrobat’s PDF format. And still there is Macromedia’s Flash SWF format (also now owned by Adobe). For the sake of this article, PDF and SWF can be considered “container†formats that are meant for distributing content in a platform-independent way that is viewable across the Web.
How can the average person tell the difference?
Simply put, by the file format that the image is saved in.
When submitting graphics to a Graphic Designer, people often think that a graphic is a graphic is a graphic. They often think because it looks “good” on the screen that it will look good in print. That’s not the case, especially when it comes to incorporating a company or organization’s logo into a design.
The Raster Test — If the image file format is a .JPEG, .GIF, .PNG, .TIFF, .BMP, .PCX, then it is a Raster-based image. If it’s a full-color JPEG or PNG and less than 200k in file size, chances are it won’t be usable for print purposes. Another rule of thumb with raster images is that if you’re looking at it full size on the screen and it is SMALLER THAN 3″ x 3″ (or 9 square inches overall) then there’s a good chance the image won’t be usable for professional printing purposes. There are 2 reasons for this: (1) professional printing uses a far higher DPI (dots per inch) than your computer screen. Where the average professional print job is done at 300dpi, most of the graphics you see that were created for the web or video are done at 72dpi (sometimes as high as 96dpi). What this means is that when you take the graphic from, say, 72dpi to 300dpi it will become four (4) times smaller. Because it is a raster image, if you scale it up in size the image will lose its crispness and get muddy and pixelated quickly.
The Vector Test — If the image file format is a .AI, .FH, .EPS, .PS, .SVG, or sometimes a .PDF, then it is a vector-based image. No real tests needed here since any professional graphic designer should have no problem loading this image into any desktop publishing or image processing program.
The PDF Test — if you’ve got a PDF and you need a simple yet effective way to test whether or not an image within a PDF is a raster or a vector, do the following: Load the PDF into a PDF viewer (like Adobe Acrobat Reader) and zoom in about 300% to 500%. Any image that is a raster image will look pixelated (blocky). Any image element that redraws itself at that zoom level and still looks as crisp as it did at normal size is a vector image.
Hopefully this breakdown will help folks understand that all graphics aren’t created the same and how to best utilize the different types. Keep an eye on this article because I’m bound to expand upon some parts of it just to make sure it is complete.
— Max Nomad