Semantic Thumbnail Indication

Question

Given the following link to an image:

<a href="path/to/img.jpg">Title</a>

What is the most semantically sound method for indicating the location of a thumbnail?

The best I could come up with so far is using data- attributes like so:

<a href="path/to/img.jpg" data-thumb="path/to/thumb.jpg">Title</a>

However, it doesn't seem very semantically sound. Is there a better or more correct way to do this?

Answer 1

<a href="path/to/img_thumb.jpg">Title</a>

Simple and keeps the original path intact while just adding a suffix to indicate that the image is a thumbnail. We use this all the time on our sites and it makes things easy.

Answer 2

Why not use an <img> element? You can give it a class to indicate that it's a thumbnail and hide it with progressive enhancement if you need to. That way, the thumbnail of the image will be shown in the absence of JavaScript/CSS:

<a href="path/to/img.jpg">
    <img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
    Title
</a>

Or am I being too naïve?