Web graphics Format's


Image format's

 

Images can be of a several format types, such as: bmp, gif, jpg, etc. But not all these formats are appropriate for the web, as some can take up much more memory than others or simply 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 take up less memory. Let's look at these formats a little more closely:

GIF Format:

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

JPG Format:

These images are of a higher quality than GIFs and can contain many more colors, but the image size is larger and so they require more time to download.

You can include images in other formats with Dreamweaver which can be displayed 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 program, such as Fireworks, Photoshop, Corel Draw, etc.

The way you modify the options of an image will depend on the program that you are using. To make simple modifications such as cutting images or changing colors you can also use the Windows Paint tool.

Optimization of an image

 

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

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

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

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

 

Transparencies

 

It could be useful sometimes to make some colors of the image invisible.

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 color for the image, and make sure that it doesn't coincide with any other color of the picture so that when we apply the transparency it will not change.

After this, you can apply the transparency to the chosen color 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 click one of those two buttons, and the mouse will take the shape of a drop-count when placed over the image or over the image color list. By clicking on a color it will turn transparent.

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

In the case we have applied the transparency to the blue color 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.

   
Content