Crear un thumbnail Noviembre 24, 2006
Publicado por lineadecodigo en : CSS, HTML , trackbackUn 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:
<IMG src="lineadecodigo.jpg" HEIGHT="10%" WIDTH="10%"/>
o en CSS mediante este código:
<style type="text/css">
.thumbnail {width:10%;height:10%;margin:5px;}
</style>
<IMG src="lineadecodigo.jpg" CLASS="thumbnail"/>
Esta opción tiene dos inconvenientes:
- 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.
- 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:
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:
<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:
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.
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Definir el tamaño de una imagen con CSS
- Alto y ancho de una imagen con HTML
- Cambiar el tamaño de la imagen de forma dinamica
- Combos con imagenes
- Boton con imagen de fondo en CSS
Enviar entrada por email
| 
Imprimir
| 7669 visitas
(Todavia sin evaluar)
Loading ...
Comentarios»
Necesito un codigo en asp para hacer los thumbnail
QUIERO VOLVER A ESTABLECER LA APARIENCIA ORIGINAL DE MI PERFIL.
PORQUE COPIE UNA LINEA DE CODIGO EN EL ESTILO OPCIONAL DE HTML Y CSS Y LA MI PERFIL TOMO UN FONDO NEGRO Y AHORA NO PUEDO VOLVER A ESTABLECE LA APARIECIA ORIGINA DE MI PERFIL.
POR FAVOR QUIERO VOLVER A PONER LA APARIENCIA ORIGINAL.
AYUDEME A RESOLVER ESTE PROBLEMA POR FAVOR