Preparing Images for the web

There are generally two types of images used with the web: GIF and JPEG. It is fairly easy to decide which type to use. If an image is a photograph or a manipulation of a photograph then use JPEG. If an image is a line drawing, cartoon graphic with relatively few colours then use GIF.

Web browsers use a file's extension (the part after the .) to determine what kind of file it is. A JPEG file might be image.jpeg or image.jpg) and a GIF file might be image.gif.

JPEG

Uses: web and within a PICT
Cross-platform: yes
Lossy: yes
JPEG (Joint Photographic Experts Group) is a file format that integrates the compression of a full colour image (millions of colours or 24 bit). The way it works i based on the way humans see images. Essentially it blurs areas that we don't notice very much. It acutally changes the image (it is lossy). Often you have a range of compression settings from 0 to 10 (or 0 - 100). 0 means lots of compression (smaller files) but the image degrades quite a bit. 10 means not too much compression (bigger files) but better image quality. Since the compression changes the image it is best not to recompress a JPEG.
Here's an expanded explanation with pictures!
To save an image as a JPEG file in Photoshop:

choose Save as... and set the Format to JPEG

adjust the image quality

GIF

Uses: web
Cross-platform: yes
Lossy: no
GIF (Graphics Interchange Format) images can contain at most 256 colours. That is any set (or palette) of at most 256 colours. The compression used does not change the image itself. Look at which images on this page a GIF files. Line art and other images with few colours are good candidates for this format otherwise JPEG is generally better.
Here's an expanded explanation with pictures!
To save an image as a GIF file in Photoshop:

choose Export:GIF 89a Export from the File menu

if you want to lower the file size, you can try lowering the number of colours

More Info

A discussion of GIF vs. jpeg from the World Wide Web FAQ

GIF vs. jpeg from the jpeg FAQ.

Transparent GIFs

These notes were written originally for Photoshop 5.5. However, they should also work fine for version 6 or 7.

Introduction

Transparent gifs allow you to create images and put them on a web page so that the image doesn't look like it's in a rectangular shape.

The transparent areas of the gif allow the background image or colour of the page to show through those areas.

Starting the image that's going to end up as a transparent GIF:

1) Choose File>New to start a new document in PhotoShop

2) Make sure you choose the "Contents" of the new image to be "transparent", rather than "white" or "background colour". This is very important. As long as you keep that transparent background in PhotoShop (which looks like a light grey checkerboard), you will be able eventually to save the GIF so that it looks decent on whatever colour web page background it will end up on.

Working on your GIF:

Then go ahead and work on your GIF. You can work on your image in RGB mode, and PhotoShop can take care of the indexed colour mode and GIF format issues for you when you are finished all your changes and ready to do the final save. But until you are all finished the image, save it in PhotoShop format (matching filename extension for this format is .psd). When you are ready for the final save, follow these steps below...

Saving the transparent GIF, and other final steps:

Think about what the background of the page the image is going to appear on. What colour is it, or, if it is a background image on the page, what colour is most dominant or widespread? (A background image that has widely varying hues or values will make your job of putting a transparent image on the page and having everything look seamless quite difficult -- which of those varying colours will you pick? That's the problem.)
Using the colour picker, go in and select that dominant background page colour as if you were going to paint with it. But before you say OK to that colour in the colour picker window, look at the hex code for the colour and write it down (like the illustration below indicates). Then you can hit OK or Cancel as you like.
Save the image one last time in PhotoShop format.
Choose File>Save for Web
A window will open up.
In the window, click on the "Optimized" tab (or "2-Up" or "4-Up") at the top of the new window. If you chose "2-Up" or "4-Up" tab, one of the display versions will be your original image, and the display version of the image with the selection around it is the version that you are changing the settings for. If you chose the "Optimized" tab, the version of the image you are seeing is the one you can change settings for.
Here are settings you need to set or play with:
- You must choose GIF format to make a transparent GIF.
- Choose a palette for the GIF (usually you would pick "adaptive," "selective," or "web") - and, to the right of the palette, choose the number of colours for the GIF to have (don't change the number of colours if choosing web palette).
- Choose to have dithering ("diffusion," "pattern," "noise," etc) or "none" - and, to the right of the dithering setting, the percentage (affects the pointillism effect you get with your dithering setting).
- Make sure to put a checkmark beside transparency. Beside transparency (to the right of it) look for Matte settings. Hold down on Matte to see the choices. Matte chooses what colour to blend the edges of the non-transparent parts of your image to (so the edges blend nicely) - like to black, to white, to some other colour, etc. If this doesn't make sense to you, it will soon because I have example images to show you with different Matte settings and different web page background colours.
  Choose either "none," "black," "white," or "other..." for your Matte setting. "Other" tends to be best, unless the background colour of the web page the GIF is going to be on is actually pure black or white, in which case you should choose the appropriate one. If you choose "other," a window will open so that you can choose which colour to blend to. You need to type in the number you wrote down from step 1, and then choose OK. This colour-choice window should close, returning you to the other window.
- Interlaced option - no checkmark here usually, because you don't usually want your GIFs interlaced.

After having adjusted all the above settings, click on OK at the top of the window.

A different window will open to let you choose place to save the image -- check that the name is correct (should end with .gif)

Save your image in the desired location.

Put the image in a folder with the page it's going to appear on, and use an image tag to make it load on the page. The transparent GIF should look quite decent on the page, and should not have any light or dark halos suddenly appearing around the edges of the non-transparent part of the image.

Light or dark halos around the edges of the non-transparent part of the image are a problem with the Matte setting for the transparency. The Matte setting chooses what colour to blend the edges of the non-transparent parts of the image to - if the wrong colour is chosen, it shows up as an ugly halo. If the right colour is chosen, the halo blends in with the background colour or image of the web page the GIF is on, and you don't notice it.

Examples of Matte settings good and bad:

Here is the same transparent gif, saved with 4 different Matte settings (none, white, black, and red). Each different Matte version is placed on 5 pages with different background colours. Again, the Matte setting should ideally be the same colour as the dominant background colour of the web page that the transparent gif is appearing on. When the Matte setting and the web page background colour don't match, you get ugly halos, as you'll see.

These example pages will open in a new window:

Valid for Fall/Winter 2003-2004

The material contained in this site is copyright and owned exclusively by Don Sinclair and members of the FACS teaching team.

Last modified on 14-Nov-03 at 9:28 AM.