Web Styleguide

Saving Images for the Web

Where can I get photos for use on my Web site?

Visit the online Photo Gallery.

GIF vs. JPG: Which one do I use?

GIF and JPG (or JPEG) files are used for different type of images, but both are compressed image formats. This means that the file size of the final image is much smaller than the original file size because unnecessary data has been discarded.

GIF
This file format should be used for illustrative-type images with large amounts of text, large flat areas of color, and sharp edges between colors. Illustrations or text images are good examples of gifs (see examples below).

JPG
This file format should be used for most photographs, or any images that have gradations of color (see example below).

Sometimes you will have text, flat areas of color, and gradations of color all in the same image, so you will have to judge whether it looks best as a gif or as a jpg.

get things fixed button example of a gif image example of a gif image
GIF
GIF
JPG

How large should my images be?

Smaller is better on the web, because smaller images download faster. You can save both GIFs and JPEGs at various levels of quality, so you must find a balance between small file size and the quality of the image's appearance. All images should be ACTUAL SIZE at 72 dpi before posting on your website. For instance, do not save an image that is 10 inches (720 pixels) across and then shrink it to fit on the web page layout -- the actual image is still large and the user will still have to wait just as long to download it. Likewise, do not save a small image and then enlarge it on the web page layout -- it will appear jagged and pixelated.

How do I save an image for the Web?

These are basic instructions for saving images for the Web using Adobe Photoshop. The main things to remember are which file format you should use (GIF or JPG), and always to save your image at a resolution of 72 dpi.

  1. Scan or otherwise acquire your image, preferably at a resolution of 200 dpi or greater.

  2. Change it to RGB color, if necessary (Image:Mode:RGB Color).

  3. Crop the image as desired.

  4. Change the zoom to 100% -- this will allow you to eyeball the final physical size of your image (View:Actual Pixels).

  5. Under Image:Image Size, first change the resolution to 72 dpi. Make sure the Constrain Proportions box is checked. Enter height or width values in the Pixel Dimensions boxes, corresponding to how large you want your image to be on the web (72 pixels = 1", 144px = 2", 216p x= 3", etc.). The width of the page content area (Zone 8) is 457 pixels, so no image should be larger than 457 pixels wide.

  6. Choose File:Save For Web.Select the 2-up tab in the dialog box, and you'll see two versions of your image so you can compare with the original. Click on the right-hand image to select it, and choose a format from the pull-down Settings menu at right.

    illustration of a photoshop dialog box for saving gif images to the webSaving as a GIF
    Photoshop's default settings for a gif image are usually adequate (see the picture at right). You can change the setting in the "colors" box. Lowering the number of colors used also lowers the file size, which is good. Find the point where the image looks good and uses the least number of colors.

    Transparent GIF
    If you want part of your image to be transparent -- the background color on the web page will show through -- then you need to actually erase that part of your image so the transparent checkerboard background in Photoshop shows through. Be sure that the Transparency checkbox is checked (see picture at right), and that the Matte box is set to "None." Or, you can leave your image intact and choose the color you want to appear as transparent from the Matte box.

    illustration of a photoshop dialog box for saving gif images to the webSaving as a JPG
    Photoshop's default settings for a jpg image are usually adequate (see the picture at right). Use the Quality box to select the lowest quality where the image still looks good. 60 is usually a decent quality setting for a photograph. Usually you can leave all the other settings at their default.

    There is no such thing as a transparent jpg. If you want transparency, you have to use the gif format.

  7. After selecting your file format and the quality setting, hit the "Save" button. Give your image a name, and save it to the "images" directory for your Web site files.