graphics

Graphics and Web pages

Creating web pages draws upon a variety of skills in other applications, layout and table use from desktop publishing, word processing skills, ocassionally sound editing and use of animation packages as well. There is no getting away from needing some basic knowledge of a graphics application either.

This isn't like using MS word is it?
Web pages are different from creating a word document. In such a package the photos and images are typically saved in a single .doc file and opening it in the application reveals them all again. Not so in html. (hypertext markup language, the basic language web pages are written in) Here the image files are kept seperate from the text file which only refers to their location. When running the html text file in a browser it calls up the images from the given location and displays them with the text.

The java editor provided by digitalbrain makes creating webpages directly online possible and the process is much quicker than creating a website offline and then having to learn about FTP. (file transfer protocol) Although it seems as though the learning module contains the images, in truth they have been saved seperately into a database and are called when the page displays.

What are the different graphic formats used for?
There are a variety of graphic formats available but the most commonly used for web design are jpgs and gifs.

Bitmap files are unsuitable for web design. They are the rawest form for image data and although the picture may look the same as it would in other formats, the file size is much lager and uncompressed. This means they take ages to load on a web page. Basically if you are working in 16 million colours and only use 4 of them in your picture, the remaining 16 million are also saved as a value of 0. Some children's packages save as bitmap format so be careful when uploading their work to the web.

Gifs were invented to provide a way to greatly reduce the size of image files. If you only use 4 colours out of 16 million, only 4 colours get saved. The resulting image would load nearly instantly on a page. Gifs are also the only format of the three that can include simple animation.

JPEGs were designed to fill the need to compress photos. When a photo is saved as a GIF it may use a million colours and so the compression is not as efficent. A JPEG works by a mathematical algorithm analysing the image and reducing the number of colours involved by overlapping pixels. The resulting image is indistinguisible from the original but much smaller in file size.

However note that JPEGs are not good for images with only a few colours or with sharp edges such as images with text on as the algorithm produces a mottled effect.

as a .gif

as a .jpg

So in summary:

.bmp (never use for web design)
.gif (best for clip art and logos)
.jpg (best for photos)

Why are my photos so big?
Typically digital cameras take very large pictures. (although the Sony Mavica has a 640x480 setting that is quite reasonable for web work) All the talk about "mega pixels" really means how good a quality picture they can take. The way you get a good quality photo is by the amount of pixels involved in displaying it. The more pixels, the more quality when looking at it.

The drawback of this for the web is that although the pictures will be of a great quality they will also be huge. Not only in display size on screen but also in the actual file size on the computer so they will take much longer to download when others want to look at them. (a common error on adaptamations)

In order to use them within a web page they need to be resized. Although the java editor can resize photos by dragging the corners it is a feature designed for minor adjustments, not for resizing huge images. The editor struggles when treated this way and indeed even if you do achieve it, the original file size is still the same. It will still slowly load the huge image and then display it at 10% of its size.

This is not a drawback of the editor, all html pages work this way. All web designers resize their images BEFORE they upload or insert them.

How do I resize my images?
Any graphic application will resize the image for you, some will give better results than others. For this it is unlikely you will get good results from a children's application. It is better to use something more professional.

Paint shop pro and Adobe photoshop are pretty much the industry standards but they can be quite daunting for the casual user who just wants to resize their photos. There are plenty of guides to using those applications online, here we suggest using some free graphic utilities that will do the job for you.

Three of the most common are:

There is a seperate guide for resizing in each of them.

How big is a learning Module page?
The full width of a learning module page is 740 pixels. 738 if you take into account the two pixel border lines on each page. The height is up to you as the page will just continue to grow.