Vinculación con una imagen: Fondo vs <img>

¿Qué se considera mejor práctica (semánticamente) cuando se usa texto con una imagen para vincular a una página o categoría interna?

Opción 1

<nav>
    <a href="/kittens">
        <img src="kittens.png" />
        <span>Kittens</span>
    </a>
    <a href="/puppies">
        <img src="puppies.png" />
        <span>Puppies</span>
    </a>
</nav>

opcion 2

<nav>
    <a href="/kittens" class="kittens">Kittens</a>
    <a href="/puppies" class="puppies"><span>Puppies</a>
</nav>

donde se define el CSS:

a.kittens {
    background-image:url("kittens.png");
    width:40px;
    height:60px;
}

a.puppies {
    background-image:url("puppies.png");
    width:40px;
    height:60px;
}

¿Debo usar un fondo con estilo para el enlace o <img>dentro del elemento de anclaje?

Si tiene texto dentro del enlace y la imagen es simplemente compatible con el enlace, semánticamente la opción dos sería mejor.

Si no tuviera el texto, la opción uno, con un altatributo apropiado en las imágenes, sería semánticamente mejor.

*editar*

Para mejorar la accesibilidad (que es similar, pero diferente al marcado semántico), también querrá incluir titleatributos en los <a>elementos de anclaje en ambas opciones.

Casi siempre uso un enfoque de "Opción 2" en este tipo de escenarios, en un esfuerzo por mantener mi presentación y contenido separados.

Es una buena práctica mantener cualquier adorno o aspecto decorativo de su sitio web dentro de CSS si es posible. El HTML debe usarse para marcar el contenido y no para agregar esquinas redondeadas u otros aspectos visuales de su página web. Si las imágenes de su gatito y cachorro solo están agregando estética a su página, mantener las imágenes en su CSS es el camino a seguir .

Sin embargo, hay al menos un escenario en el que no creo que este sea el caso; galerías de imágenes. Una galería de imágenes sería un excelente uso de la "Opción 1", porque en ese caso las miniaturas de las imágenes son el contenido.