7. Graphics à la "the Web"

Sending text across the Internet is old fashioned e-mail. People have been able to do it for decades! When you can include Pictures, your message can be much more attractive and informative to the reader!

The Web's Graphic Format

There are lots of file formats for computer graphics... PICT, GIF, TIFF, PNG, not to mention EPS, BMP, PCX, JPEG... The list goes on.

The way your browser displays graphics in HTML format indicates the location of an image file in a single format that can be interpreted by many different types of computers. In technical jargon, we would say that this picture format is platform independent. HTML itself is platform independent, since plain text characters can be understood by any computer

The standard format that can display within a web page is GIF or Graphics Interchange Format, And the other image file format used on web pages is JPEG (named after the Joint Photographic Expert Group that designed this format).

These two formats are the most widely used file types as they are small in size and load faster as opposed to a .BMP which can be very slow to load and large in file size.

Some Points to Consider When Using Graphics

As you begin to design and 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 points:

• Large and lots of images may look great on a high-end fast new computer, and they load really quickly when you have ADSL or CABLE. But they will frustrate users who must wait for images to be sent over the network because there system is older and they are they only have a 56K connection. As a suggestion, if possible, keep all the total file sizes of all images on a web page less than 100k
• Not every one has a 21-inch computer monitor and not every one got high graphic settings! Keep graphic images no wider than 480 pixels and no higher than 300 pixels to avoid forcing all your users to scroll or resize their web browser window continuously.
• Rather than having all of your images on the web page at there full size, have them linked as external image that can be downloaded when a viewer has clicked on a hypertext item (this will be covered later in lessons). If you have numerous pictures to display, break the web page into a series of linked pages as not to frustrate users who have to wait.
• Most importantly, make sure that all your images are ones that add meaning to your HTML documents.

For the next part of this lesson you will first need to download a copy of an image of a space ship Or CLICK HERE to save to obtain an image. Once you have the image you can close the window that has opened.

CHECK YOUR WORK
Check to see that the image, spaceship.jpg, has been saved in the same directory/folder as your HTML file. If it is not there, check to see if you accidentally saved it in another directory/folder. Then, move it to the correct location.

Top of page | Previous Lesson| Lessons Index | Next Lesson