Nice looking thumbnails without image manipulation

In this article I’ll explain how you can include the full-size images in your HTML, and use simple CSS to make them look like thumbnails. From my experience this works great for images up to say 1024×768 pixels, and for up to 30 or so images (depending on the size, ofcourse).

Even if you have access to image manipulation functions that make it easy for you. this function can be, in some cases, better than generating thumbnails. One popular example is if you are using lightbox (or a similar solution, and there is plenty of them), sure those clever scripts can pre-fetch full-size images as the user is browsing, but browsing through photos, which the browser downloaded on page load, is even faster!

So, how does this work? Simple! you want to wrap your image with an anchor (link) as you usually do, then wrap the anchor with a div or span element, giving each a unique class name. Example:

<div class="photoContainer" >
<a class="photoLink" title="Photo caption" rel="lightbox" href="/photos/1.jpg">
<img class="photoImage" src="/photos/1.jpg" alt="Photo caption" />
</a>
</div>

Here’s the CSS that goes with that:

div.photoContainer {
float: left;
height: 65px;
width: 100px;
overflow: hidden;
margin: 5px;
}
a.photoLink {
text-decoration: none;
}
img.photoImage {
height: auto;
width: 115px;
}

That’s all! The widths and heights I provided in the example work well with 4:3 and 16:9 aspect ratios, as well as portait photos. Feel free to adjust as necessary but I recommend you test with a variety of photos to confirm they all look good. Enjoy!