Web graphics Format's

Image format's


Images can be of a variety of different format types, such as: bmp, gif, jpg, etc. But not all these formats are appropriate for the web, as some can occupy more memory than others or simply that they are not compatible with most browsers.

GIF and JPG are the most commonly used formats, and although they have less quality than BMP images, they are more useful because they occupy less memory. Lets look at these formats a little more closely:

GIF Format:

Use a maximum of 256 colours, and are recommendable for big areas of one colour or non-continuous images. They are often used because they can contain transparencies and animation.

JPG Format:

These images are of a higher quality than GIF's and can contain many more colours, but the image size is larger and so takes more time downloading.

You can include images in other formats with Dreamweaver which can be visualized in some browsers. This is the case with BMP and PNG images.

If you introduce a BMP image in Dreamweaver a gray square will be shown in its place.The image will only appear correctly in the browser.

You can change the format of the images with any image editor programme, such as Fireworks, Photoshop, Corel Draw, etc.

You will have modifying options to change to an image depending on the programme that you are using. To make simple modifications such as cutting images or changing colours you can also use the Windows Paint program.

Optimization of an image


It's possible to optimize an inserted image in an open document in Dreamweaver usingFireworks. You can modify the image format, the transparency, the palette of colours, etc.

By modifying these aspects, it is possible to occupy less memory.

To optimize an image in Dreamweaver you have to select the image, go to the Commands menu, then the Optimize Image in Fireworks option.

From the new window it will be possible to modify some attributes of the image.




It could be useful sometimes to make some of the colours that are part of an image invisible. Normally we want to clear the background.

For example, the background of the image on the right side could possibly not match with the Page's background or damage it.

The first thing to do is to establish a background colour for the image, and make sure that it doesn't coincide with any other coluor element of the picture so that when we apply the transparency it will not change.

After this, you can apply the transparency to the chosen colour with any image editing program such as Fireworks.

A way to apply the transaparency in Fireworks is through the buttons, these can be seen in the previous screen (in optimize image).

When you are optimizing the image, you can clic one of the previous two buttons, and the mouse takes the shape of a drop-count when it's placed over the image or over the image colour list. By clicking on a colour it will turn transparent.

The difference between the first and the second of those buttons, is that the first button only allows us to assign a transparency to a colour, while the other lets us to add more than one. The last button is used to clear the transparency of any colour.

In the case we have applied the transparency to the blue colour that was in the background of the image, this would then look like the image shown on the right.

Transparencies allow us to notably improve the look of our pages.



Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.