Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. GIF and JPEG file formats are the best supported and can be viewed by most browsers.
GIF (Graphic Interchange Format)
GIF files use a maximum of 256 colors, and 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.
JPEG (Joint Photographic Experts Group)
The JPEG file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. 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 a JPEG file.
PNG (Portable Network Group)
The PNG file format is a patent-free replacement for GIFs that includes support for indexed-color, gray scale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Adobe® Fireworks®. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Dreamweaver.
When you insert an image into a Dreamweaver document, a reference to the image file is generated in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.
You can also insert images dynamically. Dynamic images are those images that change often. For example, advertising banner rotation systems need to randomly select a single banner from a list of potential banners, and then dynamically display the selected banner’s image when a page is requested.
After you insert an image, you can set image tag accessibility attributes that can be read by screen readers for visually impaired users. These attributes can be edited in HTML code.
For a tutorial on inserting images, see www.adobe.com/go/vid0148.
Place the insertion point where you want the image to appear in the Document window and do one of the following:
- In the Common category of the Insert panel, click the Images button and select the Image icon. With the Image icon displayed in the Insert panel, you can drag the icon to the Document window (or to the Code view window if you are working in the code).
- Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Note:
When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e., an image that is not available on the local hard drive). If you experience performance problems while working, however, you might want to disable viewing the image in Design view by deselecting Commands > Display External Files.
- In the Alternate Text box, enter a name or brief description for the image. The screen reader reads the information you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Long Description text box, to a file that gives more information about the image.
- In the Long Description box, enter the location of a file that displays when the user clicks the image or click the folder icon to browse to the file. This text box provides a link to a file that is related to, or gives more information about, the image.
Note:
You can enter information in one or both text boxes depending on your needs. The screen reader reads the Alt attribute for the image.
Note:
If you click Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.
.The Images Property inspector allows you to set properties for an image. If you do not see all of the image properties, click the expander arrow in the lower-right corner.
W and H
The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the image’s original dimensions when you insert an image in a page.
If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H text box labels, or the Reset image size button that appears to the right of the W and H text boxes in entering a new value.)
Note:
You can change these values to scale the display size of this image instance, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.
Src
Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.
Link
Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.
Alt
Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
Target
Specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:
_blank loads the linked file into a new, unnamed browser window.
_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
_self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
_top loads the linked file into the full browser window, thereby removing all frames.
Edit
Starts the image editor you specified in External Editors preferences and opens the selected image.
Update from original
When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property inspector, the image updates automatically, reflecting any changes that you made to the original Photoshop file.
Opens the 
Trims
the size of an image, removing unwanted areas from the selected image.
Resamples
a resized image, improving its picture quality at its new size and
shape. 
Adjusts
the brightness and contrast settings of an image. 
Adjusts
the sharpness of an image. You can visually resize elements such as images, plug‑ins, Shockwave or SWF files, applets, and ActiveX controls in Dreamweaver.
Visually resizing an image helps you see how the image affects the layout at different dimensions but it does not scale the image file to the proportions that you specify. If you visually resize an image in Dreamweaver without using an image-editing application (such as Adobe Fireworks) to scale the image file to the desired size, the user’s browser scales the image when the page is loaded. This might cause a delay in page download time and the improper display of the image in the user’s browser. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.
When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. Resampling adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as closely as possible. Resampling an image reduces its file size and improves download performance.
in
the image Property inspector.
An image placeholder is a graphic you use until final artwork is ready to be added to a web page. You can set the placeholder’s size and color, as well as provide it with a text label.
An image placeholder does not display an image in a browser. Before you publish your site you should replace any image placeholders you’ve added with web-friendly image files, such as GIFs or JPEGs.
If you have Fireworks, you can create a new graphic from the Dreamweaver image placeholder. The new image is set to the same size as the placeholder image. You can edit the image, then replace it in Dreamweaver.
To set properties for an image placeholder, select the placeholder in the Document window; then select Window > Properties to display the Property inspector. To see all properties, click the expander arrow in the lower-right corner.
Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color for a placeholder image.
In the placeholder Property inspector, the gray text box and the Align text box are disabled. You can set these properties in the image Property inspector when you replace the placeholder with an image.
Src
Specifies the source file for the image. For a placeholder image, this text box is empty. Click the Browse button to select a replacement image for the placeholder graphic.
Link
Specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.
Alt
Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
Create
Starts Fireworks to create a replacement image. The Create button is disabled unless Fireworks is also installed on your computer.
Update from original
When the web image (that is, the image on the Dreamweaver page) is out of sync with the original Photoshop file, Dreamweaver detects that the original file has been updated, and displays one of the Smart Object icon’s arrows in red. When you select the web image in Design view and click the Update from Original button in the Property inspector, the image updates automatically, reflecting any changes that you made to the original Photoshop file.
You can resample, crop, optimize, and sharpen images in Dreamweaver. You can also adjust their brightness and contrast.
Dreamweaver provides basic image-editing features that let you modify images without having to use an external image-editing application such as Fireworks or Photoshop. The Dreamweaver image-editing tools are designed to let you easily work with content designers responsible for creating image files for use on your website.
Note:
You do not need to have Fireworks or other image-editing applications installed on your computer to use the Dreamweaver image-editing features.
Resample
Adds or subtracts pixels from a resized JPEG and GIF image files to match the appearance of the original image as closely as possible. Resampling an image reduces its file size and improves download performance.
When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. When a bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller. Resampling an image to a higher resolution typically causes little loss of quality. Resampling to a lower resolution, however, always causes data loss and usually a drop in quality.
Crop
Edit images by reducing the area of the image. Typically, you’ll want to crop an image to place more emphasis on the subject of the image, and remove unwanted aspects surrounding the center of interest in the image.
Brightness and Contrast
Modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light.
Sharpen
Adjusts the focus of an image by increasing the contrast of edges found within the image. When you scan an image, or take a digital photo, the default action of most image capturing software is to soften the edges of objects in the image. This prevents extremely fine details from becoming lost in the pixels from which digital images are composed. However, to bring out the details in digital image files, it is often necessary to sharpen the image, thereby increasing edge contrast, and making the image appear sharper.
Note:
Dreamweaver image-editing features apply only to JPEG, GIF, and PNG image file formats. Other bitmap image file formats cannot be edited using these image-editing features.
Note:
When you crop an image, the source image file is changed on disk. For this reason, you may want to keep a backup copy of the image file in the event you need to revert to the original image.
Preview the image and ensure that it meets your expectations. If not, select Edit > Undo Crop to revert to the original image.
Note:
You can undo the effect of the Crop command (and revert to the original image file) up until the time that you quit Dreamweaver, or edit the file in an external image-editing application.
Sharpening increases the contrast of pixels around the edges of objects to increase the image’s definition or sharpness.
Save your changes by selecting File > Save, or revert to the original image by selecting Edit > Undo Sharpen.
Note:
You can only undo the effect of the Sharpen command (and revert to the original image file) prior to saving the page containing the image. After you save the page, the changes made to the image are permanently saved.
Brightness/Contrast modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. You typically use Brightness/Contrast when correcting images that are too dark or too light.
You can insert rollover images in your page. A rollover is an image that, when viewed in a browser, changes when the pointer moves across it.
You must have two images to create the rollover: a primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver resizes the second image to match the properties of the first image.
Rollover images are automatically set to respond to the onMouseOver event. You can set an image to respond to a different event (for example, a mouse click) or change a rollover image.
For a tutorial on creating rollovers, see www.adobe.com/go/vid0159.
Original image
The image you want to display when the page loads. Enter the path in the text box, or click Browse and select the image.
Rollover Image
The image you want to display when the pointer rolls over the original image. Enter the path or click Browse to select the image.
Preload Rollover Image
Preloads the images in the browser’s cache so no delay occurs when the user rolls the pointer over the image.
When clicked, Go to URL
The file that you want to open when a user clicks the rollover image. Enter the path or click Browse and select the file.
Note:
If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver after saving the edited image file, any changes you made to the image are visible in the Document window.
You can set up Fireworks as your primary external editor. You can also set which file types an editor opens; and you can select multiple image editors. For example, you can set preferences to start Fireworks when you want to edit a GIF, and to start a different image editor when you want to edit a JPG or JPEG.
- Right-click (Windows) or Control‑click (Macintosh) the image you want to edit, then select Edit With > Browse and select an editor.
- Double-click the image file in the Files panel to start the primary image editor. If you haven’t specified an image editor, Dreamweaver starts the default editor for the file type.
Note:
When you open an image from the Files panel, the Fireworks integration features are not in effect; Fireworks does not open the original PNG file. To use the Fireworks integration features, open images from within the Document window.
You can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot, Dreamweaver inserts the HTML source code into the area tag. Three behaviors apply specifically to images: Preload Images, Swap Image, and Swap Image Restore.
Preload Images
Loads images that do not appear on the page right away (such as those that will be swapped in with behaviors, AP elements, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear.
Swap Image
Swaps one image for another by changing the SRC attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time).
Swap Image Restore
Restores the last set of swapped images to their previous source files. This action is automatically added whenever you attach the Swap Image action to an object by default; you should never need to select it manually.
You can also use behaviors to create more sophisticated navigation systems, such as jump menus.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
