Tutorial: Adding Images to a XHTML Document

Introduction

The saying goes that an image is a thousand words and it's true that images can add value to a website. There are 3 types of images to consider. The branding type of image are logos. These are important images as users can quickly associated a business with it's logo. The second type of images are product or content images. These can be photos or product images. These images are key part of the sites content. The third type are structural images. These are images that are used as part of the template like navigational buttons.

File Types

There are 3 common filetypes used for images displayed on web pages. Each format has it's own advantages and disadvantages.

JPG
The JPG or JPEG format is used for images with a lot of detail and color variations like photo's. This is the type of images that JPG achieves the highest compression.

GIF
The GIF format is used for images with a little detail and big areas with the same color. This is the type of images that GIF achieves the highest compression. Furthermore, GIF is the only format that supports animated images.

PNG
PNG is the new kid on the block, which means that older browsers might not support this format. PNG was designed to achieve high compression rates for any type of image, which allows for the deployment of a single format for all images on a website. Another benefit is that PNG is an open source format so it doesn't have any licensing issues.

How to use Images

Allthough images can add value to a website they also add weight to the website. Images are bigger in size than text and this is something to take in account when designing a site. The total download size for a page matters for 2 reasons. The first is that it requires more bandwidth for the user. This means that users with lower available bandwidth will have to wait longer before the page loads. As many users still use dialup, especially in countries outside the western world this is something to take in account in the sites design. The second reason is bandwidth cost for sending your webpages. Many hosting sites cover an additional charge when you go over your assigned bandwidth or even worse throttle your bandwith or shutdown the site alltogether. A simple example shows how important saving bandwith can be: As an example say that we add 1KB to the size of our site. Now you think that 1KB is nothing and that is true. But let's say that your site has 1 milion page views, which means 1 milion times 1KB in additional bandwith. Now you are talking about 1GB in additional bandwidth.

So how should we add images to web pages. The first thing to take in account is that browsers cache images. So the first time an image is used it's downloaded from the web sites server, but with subsequent uses of the image the browser will load the memory from cache. This means that if we reuse images that we can save a lot of bandwidth.
Another area that bandwidth can be saved is the structural images. A lot of websites use images for navigation buttons often including JavaScript mouseovers to add effects to the buttons. Instead of images textual links can be used and with CSS effects can be added. This can save up a lot of bandwidth. It has another positive side effect which is that search engines don't understand images, but do understand text. So using text menu links can help your site rank better in the search engines.
When using content images different sized images should be considered. Big sized images can show a lot of detail and add a lot of value, but also consume a lot of bandwidth. Many sites use a 3 step plan. The first step is using small thumbnails often in an index page with multiple images. The second step is a bigger image, but still not full size, which are often shown on the product or image details page. The third step is the full size image which a lot of web sites put in a popup window. This means that the user needs to take an action to see the full size image, which means those who don't want to see the full size image don't use your web sites bandwith nor their own.

Creating and Editing Images

To create or edit images you will need an image editing software. Two good options are GIMP and Paint.Net which are both free. Of course there are also comercial solutions which often are more powerful, but the free packages will be sufficient for most developers.
Another software that can be of great help for developers is JAlbum. JAlbum can create complete photo album websites in automated form.

<head>
  <title>Flying Lowlander: Code Examples</title>
</head>