Estou a trabalhar com a tag picture para usar suas função responsiva e inserindo  diversos tamanhos da mesma imagem. No chrome e no Mozilla Firefox os resultados foram perfeitos mas nos celulares e IE11 nao funcionou, esta apenas usando a imagem na tag `<img>` segue o codigo.

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

    .foto1{
    width: 100%;
    vertical-align: middle;
    text-align: center;
    }

<!-- language: lang-html -->

    <a id="capa" href="">
    	<picture>
          <source class="foto1" srcset="imagens/capa_peq.jpg" media="(max-width: 480px)">
          <source class="foto1" srcset="imagens/capa_normal.jpg" media="(min-width:481px)">
          <img class="foto1" src="imagens/capa_normal.jpg" alt="">
      </picture>
    </a>

<!-- end snippet -->