Creating Web Graphics Using Photoshop Preparing Images for the Web

The following pages are intended as a basic introduction to creating and manipulating existing web graphics using Photoshop.

Using eye-catching graphics can add a lot to any web site. However, you want to make sure those images are high quality and load quickly, so your visitors aren't left waiting to download a badly dithered graphic. Below are a couple of ways you can optimize your graphics for use on the Web.

One way to make images download more quickly is to reduce the file size.

You can reduce the file size of your graphics by reducing the image size or by cropping extraneous information from the image.

You can also reduce the image's resolution to 72 dots per inch (dpi).

Using the appropriate file format is also important to optimizing the appearance of your graphics.

Web Graphics Formats

Typical graphic formats on the web include GIF, JPEG, and, PNG.

GIF stands for "Graphics Interchange Format." GIF is the preferred Web format for line drawings, flat color, screen captures, transparency, and animation.

GIF is a lossless method of compression: When a GIF is compressed, no data is lost.

GIF format only supports 256 colors. If you use more than that to create your Web graphics and then save them as GIFs, your images will probably dither.

To save an image as a GIF:

- From the Image/Mode menu, select Indexed color
- select Adaptive palette

- select 8 bits/pixel

- Click OK

- From the File menu, select Save As

- select Compuserv GIF as the file format

- Enter the filename

- Click OK

 

 

JPEG stands for "Joint Photographic Experts Group."   JPEG is the preferred Web format for photographs and images that contain more than 256 colors.

JPEG is a lossy method of compression: When a JPEG is compressed, parts of the image are discarded.

Photographs should be saved in 24 bit or adaptive palettes rather than browser safe palettes. Most browsers are able to render photographs well.

To save a copy of an image as a JPEG:

- From the File menu, select Save As

- Enter the filename

- select Save As: JPEG

- Click Save

PNG stands for  "Portable Network Graphics."   PNG is a lossless compression method, which generally compresses 10-30% smaller than GIFs.

PNG is an newer file format and only the latest of browsers can support it.

Photoshop's Web Palette

Using Photoshop's Web Palette to create your images will ensure that the colors in your images will render well, regardless of the browser or platform on which people view them.

However, using Photoshop's Web Palette will reduce your image to 216 colors (the number of colors the Mac and Windows browser palettes share).

To put the Web Palette onto the color Swatches Palette,

- Open a New document in RGB color mode

- From the Image menu, select Mode, then Indexed color

- select Web Palette

- Then click OK

You can now use the 216 web-safe colors to create your image.

Now let's check out some techniques for creating web graphics.

	the work area	basic image editing	preparing images for the web
	techniques		links