Imágenes en HTML

Podemos usar tres formatos de imagen: GIF, JPEG y PNG.

El JPEG es el más adecuado para imágenes con muchos colores, como fotografías, y que no tengan grandes áreas de colores planos.

Las imágenes GIF son de sólo 8 bits (256 colores), pero podemos usar un color transparente.

El formato PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). Además, podemos utilizar un canal alpha para crear transparencias.

Para poner una imagen hacemos uso de la etiqueta <img> con unos cuantos atributos:

Los atributos width y height nos permiten establecer el ancho y el alto de la imagen.
Podemos indicar un valor en píxeles o en tanto por ciento. width=”200″ muestra la imagen con 200 píxeles de ancho, mientras que width=”200%” hace que se vea al doble de su anchura original.

Es conveniente que pongamos las dimensiones en píxeles reales, ya que ahorramos tiempo al navegador a la hora de maquetar la página.

Imágenes como links

Ya hemos visto como generar links, y como cargar imágenes. Ahora combinemos estas dos cosas.

Thumbnails

Thumbnail es una imagen más pequeña que la original, de modo que al hacer clic sobre ella, cargamos la imagen a tamaño completo.

Si nuestro wallpaper de Trinity ocupa 100Kb (o más), tendremos esos 100Kb ¡como thumbnail! (justo lo que queremos evitar). El escalar una imagen con width y
height no hace que ocupe menos espacio.

Tenemos que escalar la imagen y guardar esta copia más pequeña (de 5Kb, por ejemplo):

About Michelle Torres

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.