Comparison Between Image MAP and Images+HTML Table

1) Image MAP Version

The panel below was created with an Image MAP.
It is made up of a single image and an Image MAP is used to define the zones where the hyperlinks are associated. Think of the Image MAP as a transparent blueprint that is placed on top of the image.
This technique has many advantages:
- The page loads and displays immediately because the browser only has to load a single image. This also allows you to concentrate on the optimization of the image size.
- The HTML code is much shorter than in the version with an HTML table (see version 2 further down on this page).
- The display (one image!) is very simple.
- The HTML code is easier to maintain.
- This technique is supported by all Internet browsers.



 [See the example in an independant browser window]


2) Images+HTML Table Version

The horizontal panel below was created with 31 images in an HTML table.
This construction presents nothing but drawbacks:
- The browser has to load 31 images, which means it has to make 31 requests to the server. This represents a long wait for the visitor and penalizes all the pages of the site.
- The visual effect of the displayed image is poor because the images appear one after another.
- The conception (cropped images) and later modifications are difficult.
- The HTML code is complex, difficult to maintain and very lengthy (it also negatively affects the load time of every page of the site).


 [See the example in an independant browser window]


The panel below is the same as the previous panel but we've forced the borders of the HTML table to bring out the images contained in the table. This directly highlights the complexity of its construction and the number of images.