Descargar imagen con HTML5 es una de las capacidades que incluyo la nueva especificación de este lenguaje de marcado. Esta capacidad nos permite que al pinchar en un enlace que apunte a una imagen esta no se abra directamente, si no que podamos descargarla en nuestro ordenador local.
Lo primero que tenemos que hacer será crear un enlace sobre una imagen mediante el elemento anchor A. Además el contenido del enlace será la propia imagen que insertaremos mediante un elemento IMG. De esta manera le estamos indicando al usuario lo que va a poder mostrar o descargarse.
<a href="imagen.png"><img src="imagen.png" alt="imagen de ejemplo"/></a>
Hasta aquí nada que no hayamos a hecho para crear enlaces a imágenes con HTML.
El siguiente paso será añadir la nueva propiedad download de HTML5 sobre el elemento anchor A. Esta propiedad será la que haga que cuando se pulse sobre el enlace el navegador entienda que la imagen se tiene que descargar en vez de mostrarla.
El código en HTML5 quedará de la siguiente forma:
<a href="imagen.png" download><img src="imagen.png" alt="imagen de ejemplo"/></a>
Es importante saber que para que funcione este código la página HTML5 que se muestre debe de estar ejecutándose en un servidor web. Ya que si abrimos directamente la página sobre un navegador no funcionará.
De esta forma tan sencilla hemos conseguido nuestro objetivo de descargar imagen con HTML5.
