[Index of Lessons]
[Lesson 5] [Lesson 6.1]

6. Graphics and File Formats
This page is just information, if you don't really care too much about learning background knowledge on graphics for web pages, then I suggest you skip to the next lesson. There are numerous file formats for computer graphics. The main ones involved for web pages are Jpeg's and Gif's.
A web browser displays graphics in a HTML format which indicates the location of a graphic file in a single format that can be interpreted by different types of computers.
In technical jargon, you would say that this picture format is platform independent. HTML itself is platform independent, since plain text characters can be understood by any computer. Platform independent means that it doesn't matter what system you have or run, there will be no errors when accessing the file.
The standard format that can display within a web page is GIF or Graphics Interchange Format. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color, and compression is even greater when the color is continuous in the horizontal direction.
The other file format used on the web is JPEG (named after the Joint Photographic Engineering Group that designed this format). Previously, JPEG images were not displayed in the page but were displayed in a separate window, using an external "helper" application. But most web browsers these days support JPEG images to be displayed right in the web page too.
JPEG compression is very effective for photographic images where the colors can vary over short distances ("grainy" images). JPEG offers some dramatic compression in filesize, sometimes by a factor of 10 (i.e. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality.
Some Points to Consider When Using Graphics

As you begin to develop your own web pages, you should become familiar with creating pictures in either GIF or JPEG format. If your web pages include graphics, consider the following suggestions:

  • Large and numerous images may look great on a high end computer, but they will frustrate users who must wait for images to be sent over the network. Try to keep images less than 100k in file size
  • Keep graphic images no wider than 480 pixels and no higher than 300 pixels to avoid forcing users to scroll or resize their web browser window.
  • Color gradients may look pretty but for GIF images they do not compress as much as solid color areas and they can sometimes come out "banded". Some graphics programs offer options for "no dithering" when converting to GIF-- this can reduce the amount of "noise" in a solid background.
  • Rather then displaying all of the images on the web page, have them linked as external images that are downloaded only when a viewer clicks on a hypertext item. If you have numerous pictures to display, try to break the web page into a series of linked pages.
  • A single image (i.e. a small "bullet") can appear several times in a web page with little added delay each time you use that same image.
  • Many web browsers now "cache" images (storing them on your computer) meaning that using the same file in several web pages will load them from the viewer's computer rather than loading them across the Internet.
  • Most importantly, make sure that the images are ones that add meaning to your HTML documents.

You may design a beautiful web page, loaded with large pictures, that may load nicely from your computer, but may be excruciatingly slow by a viewer using a slow modem over a busy network.
But enough with the theory, you want to know how to put pics onto a web page, then lets go onwards, to the next lesson...

Click on Lesson 6.1 to continue, or click here (Top) to return to the top of document

 

Hosted by www.Geocities.ws

1