Types of 2D Graphics

For digital images, there are two basic formats: bitmap images and vector images. This can be a tricky subject, but one that’s bound to come up the more you work with graphics — especially those designed for use on web pages.

Let’s start by talking about bitmap images — the most common type, and the type you’ll use for most of your web design work.

Bitmap Images
Bitmap images (sometimes referred to as raster images) consist of pixels aligned in a grid. As explained earlier in this chapter, pixels are those tiny dots of color that come together to form an image. If you’re familiar with art, pixels are similar to the art technique of pointillism (where tiny dots make up a picture), as used in Georges Seurat’s famous A Sunday Afternoon on the Island of La Grande Jatte painting. If you were to take a magnifying glass to this image, you’d see a pixelated image. Pixelated images are those where each individual square dot of color is visible to the naked eye, as shown in Figure below.

To get a better idea of what bitmap images are — specifically as they apply to the World Wide Web — let’s look at an icon that might be found on a website. Figure below displays a web button that is 232 by 66 pixels (or 232x66). In other words, there are 232 pixels horizontally and 66 pixels vertically. When combined, these tiny dots form an image.

Web Image Resolution
With web images, resolution refers to the number of pixels in an image. Web designers define image resolution in dpi (dots per inch) or ppi (pixels per inch). The larger the image resolution, the more clear and crisp the graphic.

You’d think from that last statement that you’d want to save your images at the highest resolution possible. If you were creating images to display in a local newsletter or some other print media, then yes, you’d want your images to display with the highest resolution.

Unfortunately, higher resolution also means larger image file sizes. In web design, larger file sizes will result in web pages loading slower. If your pages take longer than 20 to 30 seconds to load, there’s a chance users will simply click to another site rather than stick around.

What does this all mean? It means that when designing images for the World Wide Web, 72 to 96 ppi is the resolution you’ll want to use for your images.

GIFs or JPEGs: The Web Images of Choice
Bitmap images include various image file formats, including:

• GIF (short for Graphics Interchange Format)
• JPEG (short for Joint Photographic Experts Group)
• TIFF (short for Tagged Image File Format)
• PNG (short for Portable Network Graphics)
• BMP (short for Standard Bit-Mapped Graphics Format)

Of this entire list, you should use only GIFs and JPEGs for images that will be displayed on web pages. These graphics are the most widely supported by web browsers. So is there a difference between GIFs and JPEGs? Should you use one over the other?

Although opinions differ, I would suggest the following rule of thumb with GIFs and JPEGs:

Use GIFs for images where you have large flat areas and single colors (such as a diagram). Also, GIFs support transparency(something JPEGs don’t support).

Use JPEGs for all other images that aren’t diagrams. JPEGs compress data better than GIFs, meaning they’ll have smaller file sizes.

Vector Images
Although they’re not as common as bitmap graphics, vector graphics are being used more and more frequently within the World Wide Web. A vector graphic consists of many individual objects, with each of these objects defined by mathematical statements. In other words, each object has individual properties assigned to it such as color, fill, and outline.

Vector images are resolution independent. You can increase and decrease the size of vector images to any degree, and your lines will remain sharp — be it on a computer monitor or in print. Figure below displays an example of a vector drawing that is increased in scale. The size of the file stays the same, and the image does not degrade (as is the case with bitmap images).

Unfortunately, photo-realistic imagery cannot be created with vector graphics. Vector images can’t depict the subtle tones of a photograph. They are best suited for logos and graphics without photographic elements.

Vector images must originate from software. You can’t scan an image and save it as a vector file (at least not without using special conversion software). On the other hand, vector images can be converted to bitmaps (a process known as rasterizing).

However, once you convert a vector image to a bitmap image, it loses all the wonderful qualities it had in its vector state. If you convert a vector to a bitmap at a size of 200x200 pixels, and then want the image larger, for the best quality you’ll need to go back to the original vector file and convert the image again.

Currently, you cannot view vector images on the web without downloading a plug-in (such as Flash) for your World Wide Web browser. Thus, you’ll probably need to convert vector images to a bitmap format if they’re used for the web.

Common vector formats include AI (Adobe Illustrator), CDR (CorelDRAW), CGM (Computer Graphics Metafile), SWF (Shock- wave Flash), and DXF (AutoCAD and other CAD software).

In this tutorial:

1. The World of Web Design
2. Information Every Web Designer Should Know 
3. Exploring Digital Images
4. Types of 2D Graphics