Purpose
- Visual/Aesthetic Appeal — maintains visitor interest and attention
- Create Visual Structure — clarify information hierarchy (think typography and hierarchy here)
- Communicate ideas visually
Our sites are usually quite boring without the use of graphics.
Web Graphics Guidelines
- Web graphics should fit in with the purpose, organization and style of the site
- Large (file size) graphics add load time to a page — avoid.
- Graphics should help focus visitor’s attention on what’s important on the page
- Avoid annoying images, animations, gratuitous effects — they get old fast without purpose.
- Graphics should never be used for text content, except if a header necessitates including a logo.. This diminishes search engine indexing, accessibility, etc.
- Make graphics accessible with alternate text.
- Make sure there is sufficient contrast when using text in graphics so they are legible. This is especially important when using background images.
Web Graphic Formats
There are three file formats for graphics used on the web: JPG, GIF, and PNG. Each of these file formats are designed with a specific purpose in mind, so it is important to understand the differences when we use them in our websites.
JPG
The JPG image format was designed to efficiently store and compress realistic images and artwork (both in color and greyscale). The JPG format does a very good job of compressing images with lots of colors and gradations in colors. Think of a JPG as a highly compressed photograph.
The JPG format is not capable of saving any transparencies. If transparency is needed in the background of your image, you must choose a different format.
When saving images in the JPG format, you can choose the level of compression to balance the file size and image quality. File size is directly related to the actual size (in pixels) of the image. A larger pixel size will always result in a larger file size.
Examples of images that should be saved in the JPG format:
GIF and PNG
The GIF and PNG image formats use what is called "index-color". They store a minimized color palette in the image file and keys to where those colors should be located in the image. File size for GIF and PNG images is generally related to the number of colors used. Commons numbers of colors are: 2, 4, 8, 16, 32, 64, 128, 256.
The GIF and PNG image formats are ideal for images with flat colors (no gradients) and hard edges. Common examples of these types of images are logos, logotypes, and illustrations without gradients.
Transparency
The GIF and PNG formats also both support transparency. If you need any level of transparency in your image, you must use either a GIF or a PNG.
GIF images (and also PNG) support 1-color transparency. This basically means that you can save your image with a transparent background.
Let's use the Good Food logo as an example. This has to be an image file because we're using fancy type and also a graphic of an apple in place of the a. We want our logo to sit on a light green background color. Here's our background color we're saving the logo on.
If we saved the logo as a JPG, we'd be stuck with some kind of background color.
Obviously, having a background color in this situation is not ideal. If we save the image as a GIF, we can use a transparent background color.
The GIF give us a transparent background. Notice the ring around the text.
Using a GIF image with a transparent background allowed us to put our image on a different color background. Notice the white ring around the image though. This is because GIF images can only use 1-color transparency. We cannot slowly fade to transparency. There will always be a colored ring around the image. We can change the color of the ring, but this means we must know ahead of time what color background we are going to be using.
Variable Transparency
The PNG file format is capable of saving variable levels of transparency. This is known as the alpha channel. Using variable transparency, we can actually use transparencies as a gradient.
The easiest way to demonstrate variable transparency is through an example. Below is the same image twice, on two different background colors.
Notice how the background color simply fades into the picture.This will work less well if you save as png8. Be sure to save as png24.
Going back to our Good Food logo, we can use the same technique to make sure our logo blends to any background color.
GIF vs. PNG
You might be wondering at this point how to know when to use a GIF or a PNG. GIF is an older file format going back to the early 1990's. We used to use it for really obnoxious image animations (in fact, we still do). GIF is the only file format that can accomplish this. But, unless you're planning on doing something for Facebook or MySpace, you probably do not want to use an animated GIF.
The PNG format is the newer and better format. We used to use GIF for compatibility reasons, but by now, any browser that does not support PNG is a really old browser. The PNG format uses a better compression scheme than GIF so the file sizes are generally smaller. Additionally, PNG images can be further compressed using a compression tool like Smush.it.Image Format Summary
- JPG
- Used for photographs or any type of image with smooth transitions between colors. Does not support transparency.
- PNG
- Used for images with flat colors and hard edges, such as logos, logotypes, and illustrations without gradients. Can have either single or multiple levels of transparency.
- GIF
- Older format. Don't generally need to use it, but know that it exists.
