Use thumbnails for more professional-looking auction photos that load more quickly.
If you're hosting your auction photos [Hack #59], you have the freedom to include as many images as you like at no additional charge. But you're also responsible for inserting those photos into your auctions and presenting them in a way that is efficient and appropriate.
Thumbnail photos are much smaller than their full-size equivalents, both in physical dimensions and in the amount of data that must be transferred. This means that by replacing several full-size photos with thumbnails, your auction will not only appear tidier but will load faster as well.
Thumbnails are nothing more than smaller versions of full-size images, so you'll need to make two versions of each photo.
Start by duplicating each of your image files. In Windows, for example, highlight all the images you wish to duplicate, drag them with the right mouse button to another part of the same folder window, and select Copy Here.
Next, rename your thumbnails appropriately. For example, if one of your images is named front.jpg, name the thumbnail image something like front.small.jpg or front_thumb.jpg. Remember to follow the naming conventions outlined in [Hack #59].
Finally, open the newly created duplicates in your favorite image editor and shrink them down. A good size for thumbnails is 100 pixels in the larger dimension, but you can certainly make them smaller or larger as you see fit. Anything smaller than 50 or 60 pixels, however, will probably be too small, and anything larger than 200 will probably be unnecessarily large.
In most cases, your thumbnails will look best if they're all the same size. If you're placing them side by side, you might want them to be all the same height; if you're stacking them, you might want to make them all the same width. But probably the most effective approach is to pick a size to use for each photo's larger dimension.
When your images and corresponding thumbnails have been prepared, upload them to your server (see [Hack #59]).
To put a single thumbnail image in your auction description, use the following bit of HTML:
<a href="http://www.ebayhacks.com/pictures/view1.jpg"><img src="http://www.ebayhacks.com/pictures/view1_small.jpg"></a>
Simply replace http://www.ebayhacks.com/pictures/view1_small.jpg with the complete URL of the thumbnail image, and replace http://www.ebayhacks.com/pictures/view1.jpg with the URL of the full-size image. (See [Hack #40] for more information on the <img> and <a> tags.)
To right-align or left-align your thumbnail in the description, simply include the align=right or align=left parameters, respectively, in the <img> tag, like this:
<img src="http://www.ebayhacks.com/pictures/view1_small.jpg" align=right>
You can use tables to group a bunch of thumbnails together. Not only does this impose some structure on your images, but it permits captions, which require the alignment only tables can afford. For instance, the following code shows four thumbnails ? with captions ? aligned in a simple 2 x 2 table:
<table cellpadding=10 cellspacing=0 border=0> <tr><td align=center> <a href="front.jpg" target=_blank><img src="front_small.jpg"></a> <br>The front of the car </td><td align=center> <a href="glovebox.jpg" target=_blank><img src="glovebox_small.jpg"></a> <br>The spacious glove compartment </td></tr> <tr><td align=center> <a href="fender.jpg" target=_blank><img src="fender_small.jpg"></a> <br>The dent in the fender </td><td align=center> <a href="dog.jpg" target=_blank><img src="dog_small.jpg"></a> <br>The dog I found in the back seat </td></tr> </table>
(Note that the URLs have been removed from this example for clarity, but they're needed nonetheless.) The resulting table is shown in Figure 5-9.
There are plenty of other ways you can customize your thumbnails. For instance:
Change the border width of the thumbnails by placing the border=n parameter in each <img> tag, where n is the number of pixels (2 is the default).
Add whitespace around your thumbnails by using the hspace and vspace parameters, introduced in [Hack #40].
Further decorate the table containing your thumbnails; see [Hack #42] for details.
See [Hack #61] for another way to put thumbnails in your auction.