Images > Images overview

Images overview

Three graphic file formats are generally used in Web pages—GIF, JPEG, and PNG. Currently, only GIF and JPEG file formats are fully supported by most browsers. Microsoft Internet Explorer (4.0 and later) and Netscape Navigator (4.04 and later) partially support the display of PNG images. Unless you are targeting your site to users with browsers that support the PNG format, use GIFs or JPEGs for broader appeal.

GIF (Graphic Interchange Format) files use a maximum of 256 colors. GIFs are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones. You can create GIFs with transparent backgrounds; interlaced GIFs, which slowly come into focus as an image loads in the browser; or animated GIFs, which are a number of GIFs saved as a single file.

JPEG (Joint Photographic Experts Group) file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. JPEG files tend to be larger than GIF and PNG files. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing the JPEG file.

PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks. PNG files retain all the original layer, vector, color, and effects information (such as a drop shadow), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Macromedia Dreamweaver.

You can insert GIFs, JPEGs, and PNGs in Dreamweaver documents. In addition to inserting an image in a page, you can also insert an image in a table, in a form, or in a layer.

As you add images, you can select and modify them directly in the Document window. For example, you can use the Property inspector to add links to an image, add a border around an image, set an image's size, add space around an image, and set the alignment. To create interactive graphics, such as rollover images, navigation bars, or image maps, use Dreamweaver behaviors.

To set up an efficient production workflow, use Dreamweaver's Preferences dialog box to set a preferred image editor (such as Fireworks). Setting an image editor lets you launch the editor and edit an image while working in Dreamweaver. When using Fireworks as the preferred editor, you can make edits in Fireworks and with a single click automatically update the image in the Dreamweaver file. (For more information, see Dreamweaver and Fireworks overview.)

In addition to inserting images in a page, you can set a page background image; see Defining a background image or page color. To overlap images, insert them in layers; see Layers overview.