Comparing Raster and Vector Images in WordPress Designing - dummies

Comparing Raster and Vector Images in WordPress Designing

By Lisa Sabin-Wilson

As a graphic designer, you’ll most likely work with two types of graphics in WordPress — raster and vector. As a web designer, you’ll definitely work with raster images, and you may work with 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: These images are 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 Pro or Photoshop.

  • Vector: These images are 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 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 — 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.

On the right side, on the Layers tab, there 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 — 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 website; 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.

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 CDR.