Crear un thumbnail

24/Nov/2006 HTML 3 Comentarios

Un thumbnail es una versión reducida de una imágen, para que sea más fácil su carga, renderizado e identificación. Esta suele ser una técnica muy utilizada cuando queremos cargar una gran cantidad de imágenes dentro de una página.

Existen dos formas de crear un thumbnail a partir de una imágen real. La primera es redimensionar la imagen mediante HTML o CSS.

Suele hacerse, en HTML, mediante la siguiente línea de código:

  1. <img src="lineadecodigo.jpg" height="10%" width="10%"/>

o en CSS mediante este código:

  1. <style type="text/css">
  2. .thumbnail {width:10%;height:10%;margin:5px;}
  3. </style>
  4.  
  5. <img src="lineadecodigo.jpg" class="thumbnail"/>

Esta opción tiene dos inconvenientes:

  1. La imágen que se está descargando el browser es la imágen original, con su peso original. Por lo tanto no obtendremos ninguna mejora en el tiempo de procesado de la página. Aunque, en ciertos casos, nos interese ya bajarnos la imagen final.
  2. El redimensionado de la imágen es muy relativo. Ya que dependiendo del tamaño que reduzcamos puede que la imágen se vea mejor o peor. Depende mucho del renderizado del navegador. Además no podemos tener un tamaño de reducción estandar si las imágenes a tratar son de diferentes tamaños.

Veámos como quedaría este código con nuestra imagen:

Foto de linea de codigo

La seguna opción, y más recomendable, es utilizar algún software de manejo de imágenes para reducirlas. De esta forma la imágen que se visualiza ocupará menos y por consiguiente se tardará menos en cargar.

La idea en este caso es poner la imágen reducida (o thumbnail) en pantalla y acompañarla de un enlace a la imágen original. Para que se pueda ver tal cual es.

Veamos como quedaría nuestra línea de código:

  1. <a href="lineadecodigo.jpg"><img src="lineadecodigo.miniatura.jpg"/></a>

WordPress nos permite el aplicar una redución a la imágen que estamos subiendo a nuestro blog. Este es un claro ejemplo de utilización de un software para reduccir la imágen. Veamos como quedaría:

Foto de Línea de Código

La imágen que se está cargando en esta página es lineadecodigo.miniatura.jpg, mientras que si pulsamos sobre el thumbnail veremos la imágen original lineadecodigo.jpg

Puedes buscar software para crear thumbnails en Google.

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Crear un thumbnail”

Víctor Cuervo

oseas

Que libro me recomienda para aprender si soy principiante de htmm

Víctor Cuervo

Víctor Cuervo

@oseas,

Nosotros te recomendamos nuestro manual sobre HTML. Es muy completo y lo puedes encontrar en http://www.manualweb.net/tutorial-html/

Saludos.

Víctor Cuervo

nouhatsu

Necesito un codigo en asp para hacer los thumbnail

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*