Exploring Image Types and Formats for Web Design - dummies

Exploring Image Types and Formats for Web Design

By Lisa Sabin-Wilson

Graphics software packages don’t come cheap, so before you make a decision on which one to use, you need to determine what type of graphic work you’ll do for your web design projects. Web designers fall into three standard categories, and your design style may fall into one, two, or all three:

  • Graphic designer: You may consider yourself an illustrator because you create all the graphics that you use from scratch. You start with a blank slate, and through different tools and techniques used in your favorite image-editing software, you create your own unique graphics.

  • Graphic manipulator: You’re a master at taking graphics, or photos, that someone else created and manipulating them for use in your web design projects. Through the use of different tools and techniques, you can do things like adjust colors and sizes, and even change the shapes and positions of the different elements of a graphic (particularly if you’re working with vector graphics, covered in the next section).

  • Graphic consumer: You download images from resources on the web, and you use those images to add color and visual design elements to your website projects.

You may fit one, two, or all three of these categories, and that’s perfectly acceptable when designing themes for websites as long as you abide by copyright and licensing restrictions on graphics you use (if you’re a graphics manipulator and/or consumer). Additionally, it is important to understand the types of graphics that you can use to accomplish your goals for your web design projects. The following sections cover different types of graphics and file formats to help you understand which types of graphics you need to use for different purposes.

Comparing raster and vector images

As a graphic designer, you’ll most likely work with two types of graphics — 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.

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.

Looking at image file formats

It’s important to understand the types of image file formats you will work with for designing on the web. The images — whether photos or logos — you save and use on your website should be raster file types because of the smaller file size and rich color display. In the following sections, you find out how compression affects the size of raster images and discover what types of file formats you may use in your own projects.

Understanding compression

When you use raster images in your web design, they need to have a certain amount of compression, or a decrease in the overall size of the file. Image compression occurs when you save a raster image file as a JPG, GIF, or PNG. Compressing a file decreases the size of the image file so that the image loads quicker on a web page.

The larger the image file size, the longer it takes for that image to load on your web page.

Compressing image files can use two different algorithms, depending on the file format you’ve chosen for your image file. For digital image files, compression happens in one of two ways:

  • Lossless compression: All data from the image file is retained during and after compression, usually resulting in zero loss of quality from the original image file.

  • Lossy compression: This reduces the size of an image file by removing certain bits of data from the original file or by combining parts of the image that are similar to one another. This usually results in image quality loss from the original file.

Determining which file types to use for your projects

The following table lists six common file formats you’ll work with for web design and the type of file and compression. Although the final image files that you save and use in your web design work should be raster, you may begin with vector images to edit and manipulate graphics to suit the needs of your web design projects.

Image File Format Image File Type Compression Type
JPG Raster Lossy
GIF Raster Lossless
PNG Raster Lossless
AI Vector N/A*
EPS Vector N/A*
CDR Vector N/A*

* Vector images do not experience compression.

Here are the three main vector image formats that you’ll probably come across in your work with graphic design:

  • AI: Adobe Illustrator, a proprietary file developed by Adobe for representing vector images

  • EPS: Encapsulated PostScript vector image format

  • CDR: CorelDRAW, a proprietary graphic file developed by Corel for representing vector images

When deciding what raster image file format to use in your project, consider the characteristics of each format. In addition to different types of compression, the file formats contain varying amounts of color. The characteristics of the three most common raster image file formats include the following:

  • JPG: This format is suited for photographs and smaller images used in your web design projects. Although the JPG format compresses with lossy compression, you can adjust the amount of compression that occurs when you save the file. You can choose a compression level from 1 to 100; you usually don’t see a great deal of image quality loss with compression levels 1 to 20.

  • PNG: This format is suited for larger graphics used in web design, such as the logo or main header graphic that identifies the brand and the overall, visual look of the website. PNG uses lossless image compression and therefore, suffers no data loss during compression, creating a cleaner, sharper image. PNG files can also be created and saved on a transparent canvas, whereas JPG files can’t. JPG files must have at least a white canvas (background), or some other color that you’ve designated.

  • GIF: Compression of a GIF file is lossless, rendering the image exactly as you designed it without quality loss. However, GIF files are limited to 256 colors. For higher-color images, GIF isn’t the greatest format to use; use the PNG format instead.