IMAGES
Most web browsers will display images that have been saved in the GIF, JPG, or PNG format. Creating a balance between file size, quality, and download time is important, and may require some experimentation. You can prepare image files for the web using Illustrator, Fireworks or Photoshop.
Two important pieces of page development housekeeping: remember to give them an "alt" tag when you place them in an HTML document, and if you want to create an image map, a name in the Properties pane. This helps you keep track of what you're doing, and provides a text alternative for people with disabilities.
TYPES OF IMAGES
There are essentially two kinds of images: full color or grayscale continuous-tone illustrations and photographs, and flat color illustrations and graphics.
Full color images have millions of colors that blend and overlap to create the illusion of full color—how we perceive the world around us.
Flat color images have little, if any, gradation of color. There may be only one color in a graphic image, or millions, depending on how it was created. Within a one or two color image, you can have many tints, or percentages, of that color. However, all the colors in a flat color image are distinct and separate from each other with hard, crisp edges.
When working with images that will be used on a web page, there are three formats to choose from: GIF (Graphic Image Format), JPG (Joint Photographers' Expert Group), and PNG (Portable Network Graphic). The nature of the image's composition will determine which format is most appropriate, and it can be a delicate balance between saving something at the smallest file size possible without compromising on quality.
Flat color illustrations and graphics that contain straight, solid colors with clean, crisp edges are best saved as GIFs.
The sneakers, above, contains 3 or four colors. When optimized as a GIF, that breaks down into 128 colors, although you can specify fewer if you want. As a GIF, it is 7K in size. When optimized as a JPG (better quality) it is 19K in size and will take twice as long to display on a web page. The PNG option creates a 6K image. There is no visual difference in the appearance between the GIF and PNG versions, and the JPG version. Therefore, it makes sense to export the image as a GIF or a PNG. Both formats support transparency.
Full color illustrations and photographs are considered continuous tone images since one color blends into the next, and are best saved as JPGs.
The photo of the sneakers, above, has thousands of colors. When optimized as a GIF, it breaks down into 256 colors (the maximum), is 338K in size, and will take just over a minute to load. Optimized as a JPG, it still displays 256 colors, is about 43K in size, and will load in under 10 seconds. The PNG file is 151K, and will take about half a minute to load.
OPTIMIZING IMAGES
What you can't see in the preview images of the photo, is that when formatted as a GIF or PNG, there are distinct bands of color in the continuous tone areas, rather than a smooth blend. So, this image should be exported as a JPG to maintain quality. Bear in mind, however, that JPG files do not support transparency, so if that's important, then choosing the PNG option would be best. If not, the JPG is the way to go.
Illustrator, Photoshop and Fireworks preview images as GIFs, JPGs, and PNGs showing you both file size and estimated download time so you can make smart decisions.
As you can see, the file size of the image plays a direct role in how quickly a web browser can display it. Higher resolution settings create larger files. Images that are physically larger (dimensionally) than what is actually needed creates larger files.
Use the Save for Web and Devices in Photoshop or Illustrator to help determine the best format for each image. Fireworks is another great program for optimizing images, especially those that include interactivity, like buttons.
When optimizing an image, make sure the resolution is no more than 72–93 pixels per inch, and is cropped and/or resized to appropriate dimensions. When adjusting the size of an image, be very careful to maintain the proportions; it's never OK to distort an image "to make it fit." Whenever you use a Free Transform tool—in any program—always hold the Shift key to resize the image in proportion.
If you're using a thumbnail image to link to a larger version, save it as two separate files, one smaller, and one larger. Don't try to scale down a larger image—it increases load time unnecessarily. Don't ever try to enlarge an image—it destroys the quality.
That said, placing images in a Dreamweaver document is a piece of cake. Simply click on the Import Image icon on the Insert panel. It looks like a tree.
Dreamweaver opens a dialog box asking you to select an image, and then places it in your document wherever the cursor was blinking. You can place images directly on the page, within the cell of a table, or between <div> </div> tags. Remember to add an alt tag.
By the same token, you can use the Assets panel; click on the Images category and drag the image you want from the panel to into the document window.
Use the Insert panel to place an image on the page, or drag an image from the Assets panel, or the Files panel, to the design portion of the HTML file.
PLACEHOLDER IMAGES
The other options for images include selecting a placeholder, a rollover image, the HTML file from a Fireworks image, or a navigation bar.
Placeholders are used to set aside space for an image that is not yet available. When you select this, Dreamweaver asks you to name the image and specify a size for it. You also need to select a color for the placeholder. When you click OK, Dreamweaver places a colored box in your document with a name attached to it.
If you want to set up a page but don't have the images prepared yet, use an Image Placeholder. Use the Insert menu (above) or the Insert panel (right).
You'll note in the Properties pane, there is an option to create the missing image in Fireworks.
When you're ready to work on the image in Fireworks or Photoshop, select the placeholder and then click the Create option in the Properties pane. Set up your editing preferences using Dreamweaver > Preferences > File Types / Editors.
Clicking on "create" launches Fireworks and opens a blank document in the size you specified in Dreamweaver. Import or create the image and select an optimization format. When you're finished, you'll note a "done" button at the top left of the Fireworks document window. Click on that to save your file and export it in one step. You'll be whisked back to Dreamweaver in time to see your new image replace the placeholder box. Very nice.
When you're done editing the image, cllick the Done button at the top left of the Fireworks document window to flip back over to Dreamweaver.
Of course, you don't have to create the image the minute you insert a placeholder. Take your time. You can even create the image in Fireworks or Photoshop once you've saved the file and quit Dreamweaver. To replace a placeholder with an image, select it to activate the image portion of the Properties pane. Then use the folder icon next to the source field (Src) to navigate your way to the new image, or drag the registration icon to the appropriate picture file in your Files panel.
You can also place any image in a Dreamweaver file by dragging the registration icon from the Properties panel to the image in the Files panel. Note that you need to drag from the Src field, not the Link field.
BUTTONS + ROLLOVERS
Rollover images are pictures that change as a mouse rolls over them. If you want to use a rollover in Dreamweaver, you need to create two images of the same dimensions. If they're different sizes, the second one will be distorted to fit in the space determined by the size of the first. You can also create a third image to use as the "down" state of a button.
In Photoshop, create the up state on the Background layer. Then, copy that layer (drag it by the layer name to the little pad icon at the bottom of the Layers panel) and make any changes to it that you want for the over state.
Save each layer separately as a JPG or GIF, depending on the nature of the graphics. Name them with descriptive words so you know which is the UP stage and which is the OVER state.
Create two different "looks" for your button—one for the UP state (what it looks like before being clicked) and one for the OVER state (what it looks like as someone mouses over it). This button is being created in Photoshop on two layers, or you can create buttons in Fireworks. Duplicate a layer by dragging it to the pad icon.
In Dreamweaver, when you choose Insert Rollover Image, you get a dialog box that asks your to locate the image files. Make sure to choose the "up" state of your rollover first, and the "down" state second. And make sure to include an alt tag as well as the URL. If you don't know the URL, you can add it later using the Properties pane.
Choose Insert Rollover Image from the Insert bar and place the UP image as the Original Image, and the OVER image as the Rollover image (click the browse button to locate each file). Then add the URL you want the button to link to.
You can use these button images multiple times, although it would probably be smarter to include some sort of text for each button so people know where it's going to take them. The process is the same—just add a third layer for the text.
Fireworks buttons are a different sort of animal. Typically, when you've optimized a plain old image in Fireworks, it's exported as a GIF or JPG file, or saved as a PNG. You use the import image icon (the tree) to bring it into Dreamweaver.
But, if you've created an image in Fireworks that slices an image into smaller files (to speed loading time) or that includes slices and/or hotspots for interactivity (buttons, a drop down menu, or a disjoint rollover, for instance) you're exporting several GIF or JPG files that correspond to the slices, as well as an HTML file that reconstructs the table in Dreamweaver.
Creating buttons and navigation bars in Fireworks is easier, and offers more options. You can design four different appearances all at once.
The default file extension for Fireworks HTML files is HTM, which is a good thing because it can help you differentiate between a Dreamweaver document and a Fireworks file.
Develop the graphic you want to use, then select it and choose Modify > Symbol > Convert to Symbol, and choose Button for type.
Double-click the new button to enter Edit mode and use the Properties panel to add an Over and Down state.
If you include any text on the button, you can still use it multiple times and change the text on each instance using the Properties pane. Very nice.
Choose File > Export when you've got what you need and make sure to select Export > HTML and Images. Check the Put Images in Subfolder option as well to keep things organized. Exporting a file is necessary to then Insert it into a Dreamweaver file. Saving it saves a PNG file that you can edit as necessary, and then export again.
Note the HTM extension when you export a Fireworks button. Always check the Put Images in Subfolder option.
When importing the button(s), which include the interactivity assigned to it, you must choose Insert Fireworks HTML from the Insert panel. Rather than navigating to the GIF or JPG file, you need to find the file that Fireworks created called somename.htm and select that. When you do, Dreamweaver will import all the slices needed to recreate the image as a whole and incorporate the coding that puts it together.
If you've created your buttons in Fireworks, choose Insert Fireworks HTML from the Insert bar, and select the HTM file, not an image.
MANAGING IMAGES IN DREAMWEAVER
Use the Properties pane to make adjustments to images.
At the far left of the Properties pane,you'll see a file size and preview image, along with the opportunity to name your image. Adding an ID is important for scripting purposes.
The Properties panel, when an image is selected, offers the opportunity to create a image map (see the section on creating links) as well as adding an alt tag. There is also an Edit option if you need to crop or resize it.
Map: use the drawing tools to create hot spots that can be used as links to other web pages. (See IMAGE MAPS.)
If you resize an image, you get an icon that looks like a rotate tool. Click on it to scale the image back to its original size. To resize in proportion, use a corner point and hold the Shift key as you drag.
Once an image has been resized, revert back to the original dimensions by clicking on the circular arrow next to the W and H fields. Don't resize images in Dreamweaver, though—use the Edit option to scale it in Photoshop or Fireworks.
V & H space: adds white space around an image to prevent other elements from bumping into it. You can also do this using Padding or Margins in a CSS rule (smarter).
Src: this is the original GIF, JPG, or PNG file, with the path to its location.
Link: to use an image as a link, either type in an absolute URL, or browse to the file you want the linked picture to go to by clicking on the folder icon. You can also drag the registration icon to the image in the Files panel if you're linking to another page in your site.
Target: open the link in a new window (_blank), or _self (the same window).
Original: use this field to point to the file from which the JPG, GIF, or PNG was made.
Alt: always type something here so people with screen readers can hear what the image is about.
Edit: click on an icon to edit the image in Fireworks, compress it, crop it, resample it, adjust the contrast, or adjust the sharpness. Choosing any of these options permanently alters the original GIF, JPG, or PNG so use with caution.
Border: don't use this. If you want a border, create a CSS style for it.
Align: to get text to wrap around your image, choose align "left" or "right." Better yet, create a CSS class using the Float property.
Class: if you've created a CSS style that affects images, assign that style to it using this popdown menu. Images can have classes applied to them, just as text can. Create CSS rules to add borders, padding and margins, floats, and so on.
Create a CSS class rule to style all the images in your page the same.