Vinculando com uma imagem: Background vs <img>

O que é considerado uma prática recomendada (semântica) ao usar texto com uma imagem para vincular a uma página ou categoria interna?

Opção 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>

opção 2

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

onde o CSS é definido:

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

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

Devo usar um plano de fundo com estilo para o link ou um <img>elemento interno da âncora?

Se você tiver texto dentro do link e a imagem estiver apenas suportando o link, a opção dois semântica seria melhor.

Se você não tivesse o texto, a opção um - com um altatributo apropriado nas imagens - seria semanticamente melhor.

*editar*

Para uma acessibilidade aprimorada (que é semelhante, mas diferente da marcação semântica), você também deseja incluir titleatributos nos <a>elementos âncora nas duas opções.

Eu quase sempre uso a abordagem "Opção 2" nesses tipos de cenários, em um esforço para manter minha apresentação e conteúdo separados.

É uma boa prática manter todos os aspectos decorativos ou decorativos do seu site em CSS, se possível. O HTML deve ser usado para marcar o conteúdo, e não para adicionar cantos arredondados ou outros aspectos visuais da sua página da web. Se suas imagens de gatinhos e filhotes estão apenas adicionando estética à sua página, manter as imagens em seu CSS é o caminho a seguir .

Há pelo menos um cenário em que não acredito que seja esse o caso; galerias de imagens. Uma galeria de imagens seria um excelente uso da "Opção 1", pois nesse caso as miniaturas das imagens são o conteúdo.