HOWTOlabs Thumbnail Gallery Tips
Making images on the web work well

2007 (rickatech)

For the most part, the web is 72 dots/inch (dpi).  For image galleries to be usable, it is best to have a consistent thumbnail sizing strategy.  This allows quick downloads and leaves screen space for context and metadata.  Large images should never be displayed without first presenting a thumbnail link to them.  Large image scans need only have a download link - as it is unlikely the entire image can be viewed on most displays.

Typically, images are not square.  Therefore any thumbnail strategy needs to consider a consistent way to display images with different aspect ratios.  One method is to make all images have the same aspect ratio by giving them borders.  Square images need to include borders as well as rectangular images so that no image appears to have more emphasis than another.  One way to accomplish this is to have only 60% of a thumbnail be the image, the rest as border.  This presents most images of varying aspect ratios well without emphasizing any particular aspect ratio image.

Examples strategy: