Raster and Vector Images in WordPress Design

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

As a WordPress graphic designer, you’ll work with two types of graphics, raster and vector. As a WordPress web designer, you’ll work with raster images and possibly vector images. The software program that you use to edit and create graphics depends on the type of image file you’re working with. Here is a brief rundown of the differences between the raster and vector images:

Raster: Images made up of hundreds of little dots, or pixels. Each pixel can be a different color, allowing for rich, full-color images and photographs. Creating and editing a raster image calls for a raster-based editing program, such as Corel’s PaintShop Photo Pro.
Vector: Images made up of curves, rather than pixels. Vector images have four vector points, one in each corner of the image, and you connect the dots with curves. Then, the curves can be filled with colors and effects.

Raster images

Raster images, such as photographs and graphics used in the website theme design, are most often used for WordPress web design and display on websites. Raster images don’t scale well; if you try to resize the image larger or smaller, you see a noticeable loss in the image quality because the pixels get resized and the image becomes grainy.

Raster images are flat and there’s only one layer to the image elements, making it difficult (and sometimes impossible) to edit some of the different image elements within the graphic file. For use on the web, however, raster images load quickly because they usually have a small file size and don’t require a lot of bandwidth to transfer.

The figure shows a raster image file open in Photoshop. On the right side, on the Layers tab is only one layer, Background to this raster image. Common file formats for raster images include JPG, GIF, and PNG.

Vector images

Vector images are used for print design, such as business cards, brochures, magazine ads, and billboards. Because vector images are made up of curves rather than static pixels, vector images can be resized without any quality loss. Therefore, you can reduce a vector image to the size of a postage stamp or increase its size to fit the side of a large truck, and the image quality remains the same.

That’s why vector images are ideal for logos and print work. Typically, vector images are layered, where each element of the image has its own layer, allowing you to use your favorite vector image editor, such as Illustrator, to manipulate and change the different elements within the vector image file.

The file sizes of vector images can get quite large, so they’re not ideal for displaying on a web site; you’ll want to use raster images instead. However, you can start out working with a vector file for your web design work and then save the final file in a raster format that’s optimized for the web.

Here a vector image file is open in Illustrator. On the bottom right, on the Layers tab, you see several layers available for editing on this particular image. Common file formats for vector images include AI, EPS, and DCR.