Abcol Logo

You have now reached Chrissie's web pages for

Webpage Design

Image Formats.

At some point you may wish to use images - either still, or animated - in your webpages.

Animated frog in 10 frames, created by C. Nyssen 2003

Images come in two main types - bitmaps or vector-based.

The latter are stored as a series of algorithms, which draw lines, curves and points. Every time the image is displayed, it is literally re-drawn from the stored information. These files are very small - a common format is Windows Metafile (.wmf).

For the moment, however, we shall concentrate on Bitmapped files. These consist of a grid of pixels (picture x elements) which are so small, that they appear to the human eye as being merged together to create an overall image.

Some common types of bitmapped file are:-

GIF (Graphics Information Interchange). Originally a Compuserve format specifically designed for the WWW, these are now universal. Limited to 256 colours - but can have transparent backgrounds, so that they don't necessarily need to appear "square"!

Image of cat with solid background.

Image of cat with transparent background.

GIF image with solid background….

Transparency applied using MS Photo Editor.
To learn how to do this click here.

Gif uses loss-less compression - if the image is compressed, none of the information is lost.

Gifs can also be used for simple animations, as we shall see in a moment.

JPEG, JPG, JPE (Joint Photographics Group). These are used for displaying realistic photo images, as they can use millions of colours. They are, however, highly compressed, so some of the information will be lost (lossy compression).

These are good for where you need a high-quality image but a small file size. They don't work so well on "blocky" graphics, where the GIF equivalent would probably use a smaller file size.

Powder Blue Surgeon Fish as a .gif - note the 'grainy' texture due to the loss of some of the colours.  Filesize over 60kb. Powder Blue Surgeon Fish as a .jpg - much higher quality.  Filesize only 20kb.

Photo as a GIF - 60.4kB

Photo as a JPG - 20.1kB!
Can you see any difference?

'An RKO Radio Picture' as a .jpg = 9kb

'An RKO Radio Picture' as a .gif = only 4kb!

Image stored as a JPEG - 9.04kb

Image stored as a GIF - 3.96kb!

Simple animations.

Two popular methods of producing simple animations are animated GIFs and Java Applets.

Animated GIFs.

These consist of several GIF files, each one slightly different, which are then layered together. Cycling through the layers creates an animated effect, exactly the same as a cartoon film.

Popular image-editing packages such as Paint Shop Pro often include tools for creating your own animated GIFs. You will find lots of freeware/shareware on the WWW to accomplish the same thing - or download a time-limited trial version of Easy GIF Animator from here.

These five frames are all slightly different. When layered together, however, they create a simple but effective animated image. This method is especially good for buttons and logos. Too many, however, and they become a distracting nuisance. Also, the more frames involved, the bigger the file size.


Each cardinal (above) was 2kb in size. The animated version has five frames, making the total size 10kB.
If we were to add sound, the size would be even bigger!

The big advantage of this format is that their creation is well within the abilities of the average non-programmer - unlike the next option, the Java Applet.

Creating an animation in Java.

The big advantage of animations in applet format is that they do not need to be downloaded to the users machine. The animation stays on the server and the client views it "remotely". This allows very large files to be used without the associated long download time. Also, the image cannot be "stolen" by viewers right-clicking on it!

The disadvantage, however, is that Java programming requires lots of learning. This may well be a deterrent to the webpage author who just wants an image without having to learn a lot of complex programming beforehand!

To avoid all this, just do a search on the WWW for "Free Java Applets" (you will find literally millions) and download the ones you like best. A good site for applet freebies is - www.javasoft.com. You will be provided with a .class file, containing the bytecode, which you should place in the same directory as your HTML page.

You then add the following tags to your HTML source file in the place where you want the applet to appear -

<applet code = NameOfFile.class WIDTH = 200 HEIGHT = 350>
</applet>

With many free applets you can add your own images, so even though someone else has done all the coding, the end result is your own.

Vintage Jukebox images (c) and used with permission of Online Jukebox-Musee, France.

The above applet has been very simply written. The program code consists of an array of different images which are cycled to produce an animated effect. As applets have the tendency to "flicker", this works best with images that are entirely different from each other, producing a "slideshow" effect.

For the above animation we have used eight JPGs, so the 256-colour limit of the GIF does not apply. The total size of the animation to download, however, would be a whopping 350kB!

You can download the java source code for this applet here. This comes with instructions for substituting your own images, re-compiling and using the applet.

Architecture Home Pascal Home Web Design Home Java Stuff Home Extra Stuff Home Other Stuff Home

Comments? c.nyssen@abcol.ac.uk
Last updated - 27/06/03

Best viewed at 800x600 in 16-bit high color with Trebuchet MS installed. If you do not have this font, click here