Image Formats Explained

Digital artwork is handled in two basic formats, vector and bitmap (also known as raster images). There are a variety of graphics applications available, which are free, to generate and edit one or the other types of files. We primarily use the Adobe Design Suite of products (Photoshop and Illustrator), which allow editing of both types of files.

For starters, bitmaps refer to images which are pixel-based, like .jpgs, .gifs and .tiffs. These are primarily used for photographs and web graphics. For a more in-depth review of pixels and image resolution, please refer to this post, A Pixel is worth 1/1,000th of a Word. In summary, bitmap images are literally a map of bits, where an image is based on a mosaic of pixels. The more pixels in the image, the higher its resolution and file size will be. Bitmaps are excellent for photographs, scanned images and web graphics. The main drawback to bitmap images is one of scaling. Bitmaps can be downsized easily, where the image is reduced in scale and file size, and the image is compressed. There is a loss of information during this process as pixels are averaged and recompiled for the smaller size and resolution, but the visual quality of the image doesn’t suffer (at least to the human eye). The limitation of bitmaps comes when you try to upsize them. Essentially, you are asking the image to do more with less — you aren’t adding resolution or data when you increase a bitmap image, so it ends up fuzzy or jaggy-looking by forcing the pixels to display at a resolution higher than they were originally intended.

Typical web resolution image
Typical web resolution image
Photo Sample Enlarged
Photo Sample Enlarged

On the other hand, we have vector images, which are typically saved as .eps files. These are images based on mathematical points, lines and bezier curves. The illustration below shows some of the elements of a vector-based line.

Sample bezier curve
Sample bezier curve

The anchor points can be moved around, added or deleted, plus the bezier handles can be adjusted to tweak the curve. The lines, or paths, can be open or closed shapes, polygons, etc., and filled with solid colors or a variety of gradient colors. Vector files are used in animation, Flash, logos and even some font files. The advantage to using vector files is that they are infinitely scalable. Adjusting the size of the artwork up or down doesn’t change its resolution or quality. It’s preferable to have your logo in a vector format so when designers use it for print or web design, they aren’t restricted by an upper limit in resolution and can resize the artwork for any use without any data loss. Vectors don’t have to worry about looking jaggy — the curves are recomputed when resized so they always look sharp. The drawback is vectors aren’t suitable for photographic quality images. There are some excellent photo-quality vector illustrations out there, but these files are pretty large and don’t work well on the web. Flash development uses vectors for the artwork creation and the final .swf files (Small Web Format), compile the vector artwork down to small, quickly downloadable, web-friendly files. Vector images are best suited for print design work.

At Haley Marketing Group, our corporate identity packages include a collection of both vector and bitmap images of your logo. This “logo kit” contains .eps vector artwork in color and grayscale formats for print work, plus .jpg and .png bitmap files for web publishing, also in color and grayscale versions.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.