HTML Tutorial

Chapter 4: Images

Images are very important in many websites today. They are not only used to display pictures, but are often used to create fundamentals of a web site such as backgrounds, borders, and logos. This page alone uses at least 12 images. This is how the rounded borders were created.

There are many programs out there to create and edit images. I personally use Adobe Photoshop and Illustrator. These, however, are rather expensive for most people that won’t be using them that much. A good, free alternative is Gimp (GNU Image Manipulation Program). This is open source software at its best, available for Linux/UNIX and Windows.

There are three main image types that are commonly used in web pages today. Among these are JPEG (pronounced jay-peg), GIF (jiff), and PNG (ping).

The JPEG image format has been around for a long time, and is not going anywhere anytime soon. It came into play when a format was needed to compress the images to a smaller size than the raw image file. JPEG does just that, it uses compression to make the image file smaller for the ease of sending across networks and to reduce storage size. This sounds great, but JPEG is a lossy format. This simply means that the more compression you use, the lesser quality the image will have. There is usually a good range where the image is small enough to load quickly, yet still has good quality. This is just something to keep in mind. Oh, by the way, this is rather important. JPEGs should only be used for displaying pictures, not for most web graphics.

GIF is a file type that has also been around for a long time. I wouldn’t say that GIF is on its way out, but this is usually not the best image format to use. GIF used to be the best image format to use for most web graphics such as borders, animations, or pretty much anything other than pictures. Read on, I will explain PNGs.

PNG stands for Portable Network Graphics. It was designed to replace GIF due to a patent, creating cost associated with the GIF format. This, however, is not the only reason that PNG is a better format; the simple truth is that PNG has many advantages over GIF. It compresses better, has variable transparency (alpha channels), two-dimensional interlacing, and cross-platform gamma correction. What exactly does this mean? Simple, use PNG instead of GIF. In fact, all of the images on this site that I have control over use the PNG format.

Using the <img /> Tag

To insert an image into your web page, simply use the <img /> tag. The src attribute is used to point the browser to the location of the image.

This displays one of the PNGs I use to create the rounded corners of the border. It is suggested by the World Wide Web Consortium that the alt attribute be used. In the case that the image is not supported, this will replace it with the text you assign to the attribute. The height and width attributes are optional and are only needed if you want to display the image at a size other than its actual dimensions. I don’t suggest that you do this; it often makes the image appear to be of bad quality.