PhotoshopSaving Files for the Web

Barbara Chamberlin

PDF version of this page

Developing images for the web (or for distribution through a web browser) is tricky in that you have to walk a fine line between having beautiful graphics and having images that load quickly. The larger the image (memory-wise), the longer it will take to load, and the more impatient your user will get waiting for it. In addition, you can't use just any file format for the web, you have to use one that is compatible with browsers and html. Currently, you have two file format options for web images, GIF and JPEG.

GIF and JPEG: When to use Which

GIF and JPEG file formats make your file sizes smaller, so both are used regularly on the web. For example, the photo of beautiful green cactus with the red bloom to the left (the impact is lost in a black & white handout...) is 250 pixels wide and 180 pixels tall. When saved as an uncompressed tif, the file size is 152k... Awfully big for a web site. When saved as a JPEG, the image size is 36k, much more manageable. The difference between the two file formats is how they make your file smaller.

JPEG reduces the quality of your image, thus reducing the size. When saving your file as a JPEG, you can select the amount of compression applied. The more compression, the smaller the file, and the poorer the image quality.

When saving you file as a GIF, you must first index the image, reducing the number of colors used. You have a few options in indexing an images; you can remap the colors in the image to the system palette or to the approved web palette, for example. You can also select 'exact', asking Photoshop to take only the colors in the image to include with the image, and throw the rest away. Because GIFs work by reducing the number of colors in the image, the fewer colors, the smaller the image.

For photos use JPEG, for graphics use GIF.

There will always be exceptions. Sometimes photos use very few colors, such as a photo of white clouds on a blue sky. A GIF may work best for such an image. Also, some graphics, such as gradients, can use a lot of colors, making a JPEG a better choice. When you are unsure, try saving your image as a JPEG, then again as a GIF, and compare the quality and file size of each. With time, you will know which one to use. Whether you use GIF or JPEG, remember that you are degrading your image, so always keep a copy of your original image either in Photoshop format, or a non-compressed format like PICT. If you ever need to make changes to your web graphic, open the original file, make changes and save the file again, saving as a JPEG under a different name. Here are specific instructions and help on saving files as JPEGs and as GIFs.

Saving Your File as a JPEG in Photoshop

For this example, we will be working with the girl.tif image. We will save it 4 times as a jpg, each time selecting a different level of compression so that you can see how the quality differs.

1. Open the image girl.tif in Photoshop.

2. Under the menu, select File ->Save As.

3. Rename the file girlmax.jpg in the dialog box (because it will be have maximum quality). Select jpg in the format pop-up menu.

4. In the next dialog box, select the quality you want to use. Remember, the better the quality, the less compression and the smaller the file size. For the girlmax.jpg image, select 10 or maximum quality.

5. Close the image.

6. Repeat steps 1-5 three more times. Saving the files as follows:

girlhi.jpg .................. quality=6, high

girlmed.jpg .............. quality=3, medium

girllow.jpg ................ quality=1, low

One at a time, open each of the 4 images in your web browser. Viewing the images in a web browser on a color screen will give you a better idea of how the images really look, rather then looking at them on this xeroxed handout. Note the sizes of the images and compare them to the quality of the image as viewed in the browser.

Will I have to this to every image?

While this is a good exercise for learning about JPEGs, most web designers don't save an image four times every time. After experi-menting, you will find a quality level you are comfortable with, and know which one to use. Remember to always keep a master copy of your file saved as a tiff, pict or photoshop (with no compression) so you can always go back and make a new JPEG at a different compression level.

Saving a File as a GIF in Photoshop

GIF is an especially good file format for images with limited colors. By reducing the color depth of the image (number of colors needed in a palette to produce an image), you can reduce the file size.

GIFs have additional benefits. By using a export gif filter, you can define a color as a background color, that will then 'disappear' in an image, allowing the background of the web page to show through. You have probably heard of animated GIFs. You aren't able to animate a GIF in Photoshop, you'll need special shareware for that.

Simply saving the file as a GIF won't do the trick, you have to index the colors first. For this exercise, we'll create a simple image with a limited amount of colors using the Web Safe Colors Palette. The Web Safe Colors Palette is a standard set of colors for the web. If you use the web safe colors in web graphics development, you image will look better when viewed on a computer with only 256 color capability. In addition, because the colors in the Web Safe Colors Palette are those easily created in hexidecimal, they are the colors you can easily use to define background colors, text colors, etc.

In this exercise, we'll create a GIF, and I'll show you a great trick to getting your GIFs the smallest size possible.

1. Create a new image that is 600 pixels wide, and 100 tall, at 72 dpi.

2. Load the Web Safe Color Palette into your swatches in Photoshop. In the menu, select Window ->Show Swatches. In the pop-up menu on the side of the palette, select replace swatches. This will replace the existing swatches with the web safe colors. (Your Web Safe Colors Palette was installed with Photoshop 5.0. In your Photoshop 5.0 folder, find the Goodies folder, then open the Color Palettes folder. Select the Web Safe Colors Palette and the click Open.)

3. Using the eyedropper, select colors from the palette to create a simple graphic. Here, I've used a navy blue (which looks like dark grey) and a light teal (which looks light grey). The blue and the teal both come from the Web Safe Color Palette.

4. Now I'm ready to make my GIF. First, I will save my file as a Photoshop File. I want to keep the original file with all of the layers in tact, so if I need to make a change later, it is possible. (When you index the colors in an image, it flattens the image). From the menu, select File ->Save As. I always create an image development folder for all my original graphics. Here, I've saved the file as web title.pshop.

5. Now we'll index the colors. From the menu, select Mode ->Index Color. In the resulting dialog box, select Web as your palette.

6. Notice that the image hasn't changed much in appearance... That is because most of the colors in the image are already web safe, since we used the web safe palette to select colors.

7. In the menu, select File ->Save As and save your file, selecting CompuServe GIF as your file format. Select Normal as your row order. (Interlaced row order allows your image to gradually build on the web page while it is being loaded... A neat trick but time consum-ing and distracting.)

But wait... You can still make your image even smaller!

8. Notice that the web safe palette had 216 colors in it. Even if you count the 'in between' colors of my graphic, like where the aliased text overlaps the green background, there still aren't 216 colors. Let's get rid of those extra colors. Because we've already indexed the image to the web safe palette, we know that every color in the image is web safe.

Now, select Mode->RGB from the menu. It doesn't change anything in the image, but watch what happens when you go back to the menu and select Mode->Index. Notice how the default pop-up menu option is Exact? (In this case 11). The software counts the exact number of colors in the image. The blue, the white, the green, the green-blue, green-white, blue-white, all add up to only 11 colors.

9. Now, save again. Using the menu, select File->Save As. This time I saved as webtitle11.gif.

Look at the two images. Webtitle.gif which was indexed to the 216 colors in the web safe palette is about 12k, while the webtitle11.gif (indexed to 11 colors) is only 8k. It is a small difference, but every little bit helps, literally. This trick is especially useful when working with larger images.

PDF version of this page
Back to Online Seminars