Uniform HTML Image Loading with Montages

Often times a page that contains a lot of icons and images will load those icons and images gradually and the user is left to watch as the page is “assembled” in front of them.  Even worse is when images change when a user hovers over them and the new image is only loaded when the user hovers. This results in the image first disappearing and then the new one appears.  These problems are easily fixed by using a montage of images.

A montage is one big image made up of a bunch of smaller images “tiled” in a grid.  The user then shows sub sections of the larger image instead of individual images on the page.  The reason is that none of the images will show up until the larger image is fully loaded.  This fixes both of the above problems.  Now the question is how to use this new technique.

The first step is to take your existing images and assemble them into a montage.  You could manually do this, but I’m going to tell you right now that you don’t want to.  It is tedious and error prone. There is also a great program called Image Magick which can be used to produce a montage from the constituent images.  The following command could be used to pack 7 images into a 3×3 grid in a file called montage.png:

montage -tile 3x3 -geometry +0+0 img1.png img2.png img3.png
img4.png img5.png img6.png img7.png montage.png

The second step is to convert your <img> tags into <div> tags with a “background” attribute set.  The “backround” CSS attribute allows you to specify an offset into the image to display which allows you to “select” an image out of the montage!

This entry was posted in Web. Bookmark the permalink.

One Response to Uniform HTML Image Loading with Montages

  1. Pingback: Alexander7

Leave a Reply

Your email address will not be published. Required fields are marked *