Our sites are usually quite boring without the use of graphics.
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.
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:
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.
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.
JPG will not give us transparency
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.
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.
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.