HTML - Enlaces de imágen

Con la ayuda de las imágenes puedes darle un poco mas de vida y color a una página web. Transformar una imagen en un link o enlace no es difícil. Solo debes introducir la URL de la imagen en la etiqueta img.

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="imagen html de ejemplo" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

En la mayoría de los casos por defecto muchos navegadores agregan un borde a la imagen que es un link, para que sea más fácil de diferenciar de una imagen normal. Por lo tanto, para que no tengas diferencias de un navegador a otro, podemos definir el border de la imagen al valor que mas nos complace.

html<a href="http://www.tutorialehtml.com" title="HTML link image example">
	<img 	alt="imagen html de ejemplo" 
		src="/assets_tutorials/img/image.jpg"
		width="120" 
		height="75" 
		border="5"  
		style="border:10px solid #337AB7" />
</a>

Demo

Dado que el atributo border ya no existe en las especificaciones HTML5 hemos incluido también un regla CSS simple para alcanzar un resultado similar.

HTML - Thumbnails (Miniaturas)

Los thumbnails son versiones miniatura (menos kilobytes) de imágenes que tienen una calidad superior. Para crear una miniatura, guarda la imagen en una calidad mas baja a la original. Después vincula esta pequeña imagen a la imagen original de alta calidad.

html<a href="/assets_tutorials/img/image.jpg"  title="HTML link image thumbnail example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo