Dreamweaver Adding Images

Dreamweaver topics:

• Dreamweaver Site Setup
• Dreamweaver Text and Links
• Dreamweaver Adding Images
• Dreamweaver Using Styles
• Dreamweaver Using Layers (divs)
• Dreamweaver Using Templates
• Dreamweaver XHTML Code
• Dreamweaver Frames

Resolution

Voorbeeld Toepassing plaatje

When adding images to your page, make sure it has the right dimensions, resolution, (in pixels) before you insert it into the page. Although it's possible to scale inserted images, this is not recommended. It won't adjust the number of pixels in the image itself, it will only set the size to display the image (your browser will scale the image). One of the drawbacks, especially with large images, is that the entire image (which is too big) still needs to be downloaded, thereby wasting bandwith and time downloading the file. Moreover the quality at which your browser scales the image is often lower than when scaling it to the desired dimensions using an image editor.

An average computer screen can display approximately 1024 x 768 pixels, although 1280 x 1024 seems to be more of a standard these days. Your browser window will probably cover a large part, but not the entire screen. Therefore the room available for an image in your page is approximately 800 pixels. When an image is wider, it will cause the browser to display a horizontal scrollbar. Scrolling horizontally is usually regarded to be inconvenient.

Image Filetype

For webpages, the size of an image file is an important criterium. The Jpeg format is often used. Jpeg will compress your image. This will (negatively) affect the image quality, but also reduces the file size quite dramatically. For Jpeg you can set the 'price/performance' ratio. 12 is used for maximum image quality, but with small size reduction. For web pages 6 - 8 is fine in most cases. When high quality is realy important, use 10 or higher.

commonly used image formats for the web:

JPG

photos, drawings, etc

PNG, GIF

graphs, charts, diagrams, etc. Or when transparency is needed.

Inserting images

The easiest way is to drag the image from the Files panel into your page. If the image is too big, remove it and edit is, for example using Photoshop to reduce the image size.

Alternatively you can use the menu Insert > Image.

Thumbnails

If you have images for which you want the visito of your webpage to be able to view it in greater detail, using 'thumbnails' is a nice solution. The page will show a smaller version of the image and by clicking it you can view a bigger version. To do this you need two versions of the same image: a smaller version to be inserted into the page and a 'full size' version (remember: it's useless to have images bigger than the number of pixels that fit on a computer screen for this purpose).

To create a link from an image, select the image in the page and use the Point-to-file tool from the Properties panel.

If you want your image to show in a pop-up window with the same dimensions as the image, take a look at Dreamweaver Popups.