Images are represented in HTML by use of the <IMG> tag. This tag is pretty flexibile, allowing you to denote the height, width, alignment, and border thickness of the image. There are two types of images (picture files) recognized by browsers: .GIF's (static AND animated) and .JPG's (JPEG's). As a general rule, GIF's have better resolution, but JPEG files are smaller. The size of the picture file is very important because it can have drastic effects on the download time of your page.

JPEG's vs. GIF's

    As stated before, JPEG files are usually smaller than their GIF equivalents because GIFs generally have higher resolution. Higher resolution in data storage (usually) equals larger file size. However, depending upon the TYPE of picture (line art, full-c olor or grayscale photo, art, etc.) you may only notice a slight difference in the resolution of the pictures, but a LARGE difference in the size of the file. The reason for all this is in the way that the pictures are "stored". JPEGs use a compression technique whereby some resolution is sacrificed for a smaller file size. GIFs sacrifice this smaller file size for a more accurate representation of an image. Again, it comes down to which image format looks better for the image you want to have on your page. Another way in which these two file formats are different is in how many colors they each recognize. GIFs recognize up to 256 different colors, while JPEGs recognize a LOT more. Take a look at the examples below:



    The picture on the left is a 59.2 Kb GIF file, the one on the right is an 18.8 Kb JPEG. Seeing as how the GIF has only slightly better resolution than the JPEG, the better choice would be to use the JPEG file since it's a lot smaller (resulting in less download time for the user of your page).

Transparencies & Animated GIF's

    One situation where you will not have a choice of which format to use is when a portion of your image is a "transparency". This is where a section of the image is "clear" or "see-through". You can use transparencies to make header images blend with the background of your page, or for about a million and one other purposes. GIFs can contain transparencies, BUT JPEGs cannot. GIF's also facilitate an easy type of animation for the WWW. "Animated GIF's" are nothing more than a series of GIF files rendered on the screen in a loop (one after the other then back to the beginning). The examples below are all animated GIFs.

Images as Hyperlinks

    Another often-used feature of images is that they can be used as hyperlinks (a link to a different web page, resource, etc.). Consider the example below:



    Clicking on the above LaSalle icon will take you to LaSalle's Homepage. The HTML syntax for this is as follows:

<center>
<a href="http://lasalle.edu" target="_blank"> <img src="pics/lsplate.jpg" border="0"></a>
</center>

    The "center" tags make sure that the image will appear in the center (horizontally) of the browser. What follows the "href" statement is the URL (Web Address) that the user will be transported to when they click on the image. The image itself is defined in the img src="pics/lsplate.gif". The image file, "lsplate.jpg" is located in the "pics" subdirectory of the directory this file is stored in. Notice the border="0" attribute in the img src statement. If that was not in place there would be a colored border around the entire image (generally this is not preferred). The "target" attribute in the first part of the line is covered in the Frames section of this Help Page.

Click here to return to the previous page.