CSc 050: Pictures-Part 2: Graphics from othe sources

This tutorial will show you how to create web page graphics from a variety of sources including scanned images, clip art, and your own drawings. It assumes prior knowledge of the <img> tag. You should go through our first image tutorial if you are unclear about using the <img> tag.

Graphical formats

Pictures can be stored on a computer in many different ways. These different ways are called formats and have not-so-memorable names like GIF, JPEG, BMP, TIFF, PICT, and many others. The trouble is that web browsers can't read pictures of all formats. Netscape, for example, can only understand pictures in GIF and JPEG format. When we take pictures from the Web, as we did in the first tutorial, this wasn't a problem since pictures from the web are already in a compatible format. But pictures from any other source may need to be converted into a compatible format before they are browser-ready.


We will demonstrate converting a graphic into a browser-ready format in the context of scanning an image. Scanning allows you to take a non-computer image like a photograph or magazine picture and turn it into a computer picture.

In the Union public multimedia lab in Steinmetz Hall room 100, there are several PCs and Macintoshes connected to scanners. Just place your picture face down in the upper-right corner of the scanner, and then launch the appropriate program. Complete instructions about how to scan are given in a guide that can be found in the lab, so we won't repeat them here.


Once a picture has been scanned, you're ready to convert it into a browser-ready format. This conversion process also works with clip art or drawn pictures. Any good graphics program will allow you to convert a picture into GIF or JPEG format. The Union labs are equipped with Adobe Photoshop Elements which will do the job nicely. Once your image is in Photoshop, just click on Save for Web under the File menu and follow the instructions. I recommend saving the image as either GIF or JPEG since these will produce small(ish) file sizes.

What if you want to do this at home, and you don't have Photoshop? No problem: there are many programs available on the Internet that will do the job. For PCs, Lview Pro is a shareware program that will convert files to other formats. Mac users can use a small program called GIFConverter which will do the same thing. You can get Lview Pro by going to the Lview Pro Web Page right now. Mac users can download GIFconverter.

Once your picture has been converted to GIF or JPEG, it is now web-ready. Place the file name into the <img> tag in your HTML file, and your picture should appear.

Back to Tutorial Index