Using Web Friendly Graphics

This tutorial will explain using web friendly graphics in Dreamweaver CS5.

It's time to add some images to our pages.

In the early days of web sites they contained text only, and it was a little while before graphics arrived. Nowadays the majority of web sites include graphical elements, and for many of them the photographs, videos, drawings and animations are a vital part of the message they are giving or information they are providing.

It's actually surprisingly easy to include graphics in your web pages using Dreamweaver, but you need to be aware of a few things first. Graphics can be presented in a number of different formats, and it's important to choose the right one for your purposes.

JPEG Images

We're going to start with a photograph of Sydney Opera House. It's in JPEG format, which we'll come back to in a moment.

We could incorporate this into a web page using one of a number of different formats. To choose the right format for the job you need to take into account several key factors, and particularly these three.

Firstly, the image will be of a certain size in terms of computer storage space. Whatever size it is (in bytes) will determine how long it takes to download to your visitors' computers. Basically, the smaller it is in bytes the better.

Secondly, the quality of the image needs to be as high as you can make it. In simple terms, the more detail you have, the better (higher resolution) will be the image on visitors' PC screens. This is compounded by the fact that the best results are generally attained when you use high numbers (millions) of colors. Storing higher numbers of colors also uses space. So, as far as storage space for quality is concerned, the larger the better.

Clearly we need a compromise to cover those first two points.

The third main factor is that you need to use a format that achieves the best results across a range of browsers, browser versions and operating systems.

The formats that consistently achieve the best results in relation to these three requirements are generally considered to be GIF, JPEG and PNG.

Gif Images

Here's Sydney Opera House in GIF format.

PNG Images

Here's Sydney Opera House in PNG format.

You may not see a difference, but that depends on your screen resolution and color setup.

GIF (Graphic Interchange Format) format is generally used for images such as drawings and simple animations. GIF only supports 256 colors, so it's not really suitable for high quality photographic images. The GIF image above uses 115KB (115 thousand bytes), which is the least of the three. However, image quality suffers accordingly. GIF achieves a good level of consistency across browsers, and GIF images can contain transparent areas, which means they can have irregular shapes.

JPEG (Joint Photographic Experts Group) format is primarily intended for photographs and can support millions of colors. JPEG images generally look good on screens but don't print well. JPEG does not support transparent areas in an image. The JPEG image above uses 184KB.

PNG (Portable Network Graphic) format was introduced in two formats, one intended to replace GIF and one intended to replace JPEG. PNG images can have transparent areas, and PNG can be particularly consistent across browsers and operating systems. One disadvantage is that some older browser versions do not support PNG. The PNG image above uses 307KB.

Note that the image sizes suggest a constant ratio, which is not the case, The space needed for each graphic will depend on several factors, but it's generally true to say that GIF will occupy less space but lose quality where there is quality to lose!

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Using Web Friendly Graphics in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!