An image on a web page never actually becomes a part of the page - it always remains a separate file. That is why you always need to publish the image files as well as the web page files when you publish your site.

On this page ...
  Image file formats - gifs & jpgs
  Resizing images
  Compressing images to speed up your pages (jpgs only)
  Using thumbnails
  Image colour depth
  Image transparency (gifs only)
  Animated images (gifs only)
  Placing images on a page

Image file formats - gifs & jpgs
(top of page)
The most common file formats for web-based images are .gif and .jpg, usually with gifs used for diagramatic images and jpgs for photographs. You can convert images from most other formats into gifs or jpgs using an image editing package such as Macromedia Fireworks, Jasc PaintShop Pro, or Adobe Photoshop. These formats are particularly suited to the web as they make relatively small file sizes and are therefore quick to download.

Resizing images
(top of page)
It is easy to change the size that an image is displayed in a web page by changing the height & width attributes of the image. However, this only changes the display and does not affect the image file itself. It is generally better practice to resize the image using an image editing package so that the file size (and therefore download time) is reduced as well.

Compressing images to speed up your pages
(top of page)
An image with a smaller file size will take less time for users to download. Use an image editing package to optimise the balance between image filesize and image quality. Most jpg files can have their filesize reduced substantially without you noticing any visible difference in quality (see these examples - warning - page is 164kB).

Using thumbnails
(top of page)
If you want users to be able to see the full size, full quality image, you could present a smaller version (a thumbnail) which is linked to the larger version. That way, users can choose whether or not to download the large file.If you have both Dreamweaver and Fireworks installed, an additional menu item appears in Dreamweaver (Commands > Create Web Photo Album) that will create thumbnails and links them to the full size version of your images.

Image colour depth
(top of page)
At one time we use to have to be careful about the type of colour palette that was used to create an image. Older monitors could only display 16 or 256 colours and using any more than this resulted in odd-looking approximations. Nowadays, however, most PCs running Windows or Macs can support 16million colours, so there is less need to restrict the colour depth of your images.

Image transparency (gifs only)
(top of page)
When you insert an image in your web page it always takes up a rectangular space. If you want to see curved edges on the page, you need to make your image background the same colour as your web page background, or for a more reliable result, make your image background transparent. This works best if you create the image on a background close in colour to the web page background, and then make the background transparent at the last stage.

Animated images (gifs only)
(top of page)
Some software (e.g. Macromedia Fireworks and Gif Construction Set) enables you to build animated images. Animated gifs are made of a sequence of still images (or frames) that are displayed one after the other with a specified amount of time on each image. It is recommended that you set your animations to cycle only a couple of times as repeating animations can be extremely distracting for users trying to read your page content.

Placing images on a page
(top of page)
Your image will appear on the page in place of the <img> tag that you placed in your HTML code, as if it were a character on the line. You can use various attributes of the <img> tag to control how it fits in relation to the text on the page (to align the image vertically with text and to control how much whitespace there is around the image). If you want to have more control (e.g. place your image alongside a piece of text) you will need to use a table with the text in one cell and the image in another.