Семантическая миниатюра

Question

Учитывая следующую ссылку на изображение:

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

Какой самый семантически обоснованный метод указания местоположения миниатюры?

Лучшее, что я мог придумать, это использовать атрибуты data-, например:

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

Однако, это не кажется семантически правильным. Есть ли лучший или более правильный способ сделать это?

Answer 1

Почему бы не использовать элемент <img>? Вы можете дать ему класс, чтобы указать, что это миниатюра, и скрыть его с прогрессивным улучшением, если вам нужно. Таким образом, миниатюра изображения будет отображаться при отсутствии JavaScript / CSS:

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

Или я слишком наивен?

Answer 2

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

Простой и сохраняет исходный путь без изменений, просто добавляя суффикс, указывающий, что изображение является миниатюрой. Мы постоянно используем это на наших сайтах, и это облегчает задачу.