<a href="#"><img src="img/picture.jpg" /></a>

@media all and (max-width: 800px)

<style>

.adaptive-image:after { content: url('image-def.jpg'); }

@media screen and (min-width: 800px) {
    .adaptive-image:after { content: url('image-800.jpg'); }
}
@media screen and (min-width: 1024px) {
    .adaptive-image:after { content: url('image-1024.jpg'); }
}

</style>
<div class="adaptive-image"></div>

<a href="#"><img id="adaptive" src="img/picture.jpg" /></a>

#adaptive{
    content:url("img/small_picture.jpg");
}