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:
- try to make 36x36 thumbs have 800 square pixel area
- try to make 144x144 thumbs have 12500 square pixel area
- try to make 360x360 previews have 80000 square pixel area
- try to make 720x720 large previews have 320000 square pixel area (ideally less than 680 tall)