What is considered best practice (semantically) when using text with an image to link to an internal page or category?

Option 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>

Option 2

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

where the CSS is defined:

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

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

Should I use a styled background for the link, or an <img> inside the anchor element?