Images - When and What to Use

Other than photographs, images are used in websites for things such as logos, gradients, and rounded corners. The three main image types are jpg, gif, and png.

For photographs, jpgs are the best way to go. They can be saved at different qualities, so you can use a lower quality if you need a smaller file size. The problem with this is that with certain images, it is very obvious that the photo has a low quality. Pngs can also be used for images, but they have a much larger file size.

Png's greatest strength in web use is transparency. This can be helpful if you want to see the background behind a non-square image around the edges, or if the image is not completely opaque. The one downside to this is that Internet Explorer 6 does not support the transparency. The image will still display, but will be on top of a grey box. However, there is a trick for getting around this in some cases.

The png needs to be set as a background image, so all you need in the HTML is a block level element such as a div (block because we need to set the width and height). The width and height of the element needs to be the same as the image. So if transparent.png is 20x30px, here is what you put in the CSS:

.imageDiv {
width: 20px;
height: 30px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/transparent.png',sizingMethod='scale');
}

html>body .imageDiv {
background: url(&dtml-portal_url;/transparent.png);
}

The "filter" property is only recognized by IE, and IE6 ignores the > selector in the second part, so this background declaration is passed over. As you can see, this method has some limitations (can't use a repeat), but it can be quite useful.

Finally, we come to gif. I haven't used gifs much in the past, but lately have been trying to use them more. Gifs are not good for photos, because they tend to be very grainy. Gifs can do transparency, but not very well. Gifs are great, however, for things like logos, illustrated images, or rounded corners. Not only do they come out looking very clean, but they also have a smaller file size than a high-quality jpg. Or if you're wanting to build a mid-90's style website, gifs do support animation.