Working with graphics
Use the appropriate size and format for the image; consider download time and clarity of the image as well as its importance to the content. Smaller images — called thumbnails — that open a larger image in another window can save space and increase readability. Keep in mind that once an image has been exported to another format, it should not be edited because it will have been compressed in the export process; the compression process eliminates extra data. It's a good idea to preserve your native (original) files and place the exported images in a separate folder or directory. Make edits to your working file and export it again.
File formats
There are three graphic file formats that can be viewed by web browsers: JPEG, GIF, and PNG.
Vector art (Adobe Illustrator, CorelDraw), drawings, charts and diagrams without highlights, shadows, or specific color requirements should be exported to GIF (.gif) format. The GIF format allows a transparent background.
Photos and drawings containing highlights and shadows should be exported to JPEG (.jpg) format. If the image needs to appear as if it has no background, then the background of the image will need to be edited to match the page.
Exported files should be no more than 72 dpi and at the exact dimensions they will be placed in the HTML file. Resizing a graphic in Dreamweaver, or changing the image dimensions in the HTML code won't reduce the size of the graphic, only its display size. Files that are too big can slow down page or even the entire site; they are also wasting server space.
| Click on each image for a larger view. | |
 |
 |
| An example of vector art, exported to a transparent GIF. Notice that the file size of the acceptable image is 16.41k. | Example of when to export to JPEG format. Notice that the image with a file size of 10.42k is acceptable. |
 |
 |
| Example of when to export to transparent GIF format | Example of when to export to JPEG format |
Other considerations
If your audience will be likely to print your website from their laser printer, consider the role of each graphic and the importance of its clarity when printed. 72 dpi images reproduce poorly to 300 dpi laser printers, so it may be necessary to prepare and offer a downloadable PDF or JPEG file that contains graphics with higher resolution.
Use Arial and Times Roman fonts when preparing documents that will be made into PDFs; embed only the fonts that are necessary. Too much font information can greatly expand the size of a PDF. Offer the viewer the option of downloading a file; note its file size and format.
If you don't have permission to use a photo or graphic, you can't use it. Obtain permission, create your own, find a stock photo, or do without.