Imperial Home Page -> Standards -> HTML tutorial, images
There are three primary graphics formats used on the web, jpeg, gif and png. All three are compressed formats (so they take up less diskspace and they are faster to download. I will briefly describe each format and whe you would use it.
Jpeg is a format that is really good at compressing images. It is used primarily with photos. The compression it uses is optimized for compressing photos. It can be used for other images, however the compression won't be as good. Also jpeg is a "lossy" type of compression, so the quality of the image may be degraded using this format rather than a different one.
Gif (pronounced either gif or jif depending on your preference, there is no "right" way). This is also a compressed format. This format is best for drawings or text.
Png was developed by the open source community in response to the GIF patent issue (GIF was a patented format, but the patent expired a few years ago in the US). It is designed to replace gif as web graphic. It hasn't reached the popularity of the gif format.
Bitmaps can also be used, however the bmp format is not compressed and the file sizes are about 5 times larger, therefore they take up 5 times the disk space and 5 times the bandwidth (and about 5 times as long to download). Another disadvantage to using bmp files is that only IE supports bmp files (other browsers are now supporting this format, however it is still a bad idea to use because of the size of the images). They are ignored by all other browsers. Because of the drawbacks, and the ready ability to save graphics in different formats, there is no reason to every use bmp files.
If you don't specify the size of the images (height= and width=). Some older browsers won't display a graphic until it knows how big the image is, if you don't specify the size, the entire graphic may need to be downloaded to deterime the size. If you specify a size, and it isn't the correct size, the size you specify will be used instead (this can be a method to make an image bigger or smaller, though browsers don't do a really good job of scaling--This should NOT be used on the Imperial club website).
addtional attributes for the img tag:
align= This positions the image on the page or determines how text behaves around the image. The possible values are top, center bottom, left, and right. Top, center and bottom only deal with text placement. They will place one line of text at the top, center or bottom of the images on the left side:
top
center
bottom
To get test to wrap around the image you will need to use the align="left" or align="right", which will place the image to the left or right side of the page and then fill the rest of the area with text (as it would without an image there, but not overwriting the image).
If you need more precise placement of your image, you will need to use a table or a frame to position it. HTML is a markup language which allows you to modify the way things look, it is not a page layout tool, however even with its limitations you can make things look pretty good.
Continue on to Section 4 Colors
This page was last updated 24 May, 2005. Send us your feedback, and join the Imperial Mailing List online car club today!
