Sending text over the Internet is just old fashioned e-mail. People have been doing it for decades! When you can include Pictures, your message can be much more informative! Is the going rate still 1000 words per picture?
Lean back and relax! This lesson is mostly an introduction to graphics for the Web. But we'll have you do a little activity below.
There are numerous file formats for computer graphics... PICT, GIF, TIFF, PNG, not to mention EPS, BMP, PCX, JPEG...
It sounds like cryptic poetry. Bad poetry. Geek poetry!
The way a web browser displays graphics in HTML format indicates the location of a graphic file in a single format that can be interpreted by different types of computers. For example, when the information in that format is received by your Macintosh computer, the web browser knows to display it as a picture format for Macintosh. However, when that same information is received by your Windows browser, it is displayed as a Windows graphic.
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. 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. GIF images have the feature of defining a color to be "transparent" so images can appear to have non-rectangular boundaries. They can also be saved in the "interlaced" format so that when you see a web page, the images start to appear soon and "dissolve" to the final image.
The other file format used on the web is JPEG (named after the Joint Photographic Expert Group that designed this format). In the early web years, 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 spatially over short distances ("grainy" images). JPEG offers some dramatic compression in filesize, sometimes by a factor of 10 (e.g. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality. JPEG images do not have the ability to have transparency.
For more information about these file formats, see the SITO page on Graphics File Compression. If you are in the mood for a great book, try Lynda Weinman's Designing Web Graphics.
More and more graphics programs have built-in features to save files as GIF format. Newer ones such as ImageReady from Adobe and Fireworks from Macromedia have been specifically designed for creating web graphics. You can find other shareware programs/utilities for converting graphics to web format from download.com.
For this tutorial, you do not have to use one of these graphics programs. We will show you how to get a copy of the images that you will need.
However, 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:
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. The 'net is a busy place and getting busier every second.
For the next lesson you will first need to download a copy of a GIF image of a volcano (watch out for that hot lava!).
Just follow the instructions on the Lesson 7 Image Studio and then return here to complete this lesson.
Check to see that the file, lava.gif, is saved in the same directory/folder as your HTML file, volc.html. If it is not there, check to see if you accidentally saved it in another directory/folder. Then, move it to the correct location.
Surf the web and browse for pictures. Try to download at least one image that might be useful for your page. Just a few places you might try:
You have the image... Now, how in the H T M L do you display it in your document?
Writing HTML: Lesson 7: Graphics à la the Web
©1994-1999
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is
Alan Levine
Comments to alan.levine@domail.maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut7.html
