Módulo 4 - Lección 6 - Las imágenes

Las imágenes son el elemento principal que confiere a la Web su carácter de hipermedia, es decir, su capacidad de integrar en un único soporte, la página web, contenidos muy distintos como texto, imagen, vídeo, audio y otros.

<img>.

La etiqueta para insertar una imagen en HTML es <img>. Si consultamos la documentación oficial, de HTML 4 y de HTML5 del World Wide Web Consortium, el W3C, veremos que no ha habido grandes cambios en la sintaxis de esta etiqueta.

La etiqueta <img> tiene dos atributos obligatorios,

Atributos:

src

El atributo src indica la ruta en la que se encuentra la imagen,

alt

mientras que el atributo alt es el texto alternativo que se debe visualizar cuando la imagen aún no se ha cargado o no se puede cargar por diversas razones, como puede ser que no exista o que su formato no sea válido. El atributo alt es muy importante para la accesibilidad de una página web.

width y height
para definir las dimensiones de la imagen, el ancho y el alto;
longdesc
para indicar la URL de una página en la que se proporciona una descripción larga de la imagen, este atributo también es muy importante para la accesibilidad de una página;

ismap y usemap
para definir mapas de imagen que veremos ahora después.

Por último, también existen unos atributos obsoletos que puedes encontrar alguna vez en alguna página web antigua o en algún libro o tutorial, pero que no se deben utilizar ya que su función ha sido sustituida por propiedades de CSS.

En HTML también se puede incluir una imagen como fondo de ciertos elementos, como por ejemplo como fondo de la propia página o de una tabla, pero este uso está totalmente desaconsejado y se debe realizar mediante CSS.

Para usar la etiqueta <img> no hay que saber mucho más: como ves, su uso es muy sencillo. En este ejemplo, en el primer caso se está incluyendo en la página web una imagen en formato JPG que se encuentra en el mismo directorio en el que se encuentra la página web, mientras que en el segundo caso se está incluyendo una imagen en formato PNG que se encuentra en otro servidor web. Es por ello que se debe indicar la ruta completa de acceso a la imagen.

Sin embargo, al utilizar la etiqueta <img>, la primera pregunta que surge es: ¿qué formatos gráficos se pueden emplear con la etiqueta <img>?

En la documentación oficial de Mozilla, en el apartado sobre la etiqueta <img>, podemos leer que el lenguaje HTML no impone una lista de formatos gráficos que deban ser soportados, sino que depende del agente de usuario, es decir del navegador.

En el caso de Mozilla, se aceptan todos estos formato, pero en la práctica, los que son considerados como el estándar son los tres primeros: JPG, GIF y PNG.

Formato GIF

El primero, el formato GIF, es el más antiguo y el primero que se empleó en las páginas web. Sus características más particulares son que sólo soporta paletas de colores con 256 colores, permite transparencia pero de un solo color y permite realizar animaciones sencillas.

Como el formato GIF sólo permite 256 colores, se suele emplear una técnica llamada dithering, que permite representar una imagen como una fotografía, con una variedad de colores prácticamente infinita, mediante un número limitado de colores, en este caso, 256 colores.

Básicamente, esta técnica consiste en colocar dos puntos juntos con colores diferentes para crear la ilusión de que existe un tercer color. Por ejemplo, en esta imagen, mediante la colocación de los puntos rojos y azules se logra la ilusión de que el color que hay es el violeta.

El efecto final puede ser muy sorprendente y puede engañar al ojo humano, pero hoy no es muy necesario utilizar esta técnica ya que existen otros formatos de imagen que permiten el uso de millones de colores.

Por ejemplo, aquí tenemos una fotografía de un lindo gatito.

La siguiente imagen es la imagen inicial convertida a la paleta de 216 colores seguros para la Web sin utilizar la técnica de dithering: se pueden apreciar los cambios bruscos y grandes zonas planas de un mismo color.

En la siguiente imagen se muestra la misma imagen con la misma paleta de colores, pero esta vez sí que se ha aplicado la técnica de dithering: se observa que la mejora es enorme respecto a la anterior.

Finalmente, otra vez la misma imagen, pero esta vez con un paleta de 256 colores optimizada: al poder seleccionar los colores de la paleta, la mejora es enorme y el parecido con la imagen original es asombroso.

El formato JPG
es quizás el más popular en la Web, y ello es debido a que permite trabajar con imágenes con más de 16 millones de colores y con tamaños de ficheros muy pequeños. Esto se logra mediante el uso de algoritmos de compresión con pérdidas.

La compresión con pérdidas significa que una vez comprimida una imagen, al descomprimirla no se obtendrá la imagen original, sino una aproximación.

Para entenderlo, veamos este ejemplo real. Tenemos esta fotografía comprimida con el formato JPG. Al 100% de calidad, la fotografía ocupa 492 KB.

Al 50% de calidad, la fotografía ocupa 57 KB.

Y al 25% de calidad, la fotografía ocupa sólo 34 KB.

A simple vista no se aprecian grandes diferencias entre estas tres fotografías, parece que poseen la misma calidad.

Sin embargo, si aumentasemos un detalle de la fotografía, veríamos los famosos “artefactos” que introduce el formato JPG.

Formato PNG 

El último formato que vamos a ver es PNG. Este es un formato que se creó específicamente para la Web y ofrece una gran variedad de posibilidades.

Si se compara con el formato JPG, ofrece la máxima calidad, ya que utiliza un formato de compresión sin pérdidas, pero claro, esto es a costa de producir ficheros con un tamaño superior al formato JPG.

Por último, vamos a ver los mapas de imagen.

Los mapas de imagen también se llaman imágenes sensibles, y son imágenes en las que se han definido ciertas zonas llamadas “activas”, “sensibles” o “calientes” que son enlaces a otras páginas.

Los mapas de imagen se pueden procesar en el lado del cliente o en el lado del servidor. En este vídeo nos vamos a centrar en los mapas del lado del cliente, ya que son los más comunes en la actualidad.

Un mapa de imagen en el lado del cliente se define con dos etiquetas de HTML:

<map>

Con la etiqueta <map> se define el mapa de imagen, con sus distintas zonas activas. El mapa de imagen debe tener un nombre, ya que ese nombre se emplea en la etiqueta <img> para relacionar el mapa de imagen con la imagen correspondiente.

Atributos

usemap

En la etiqueta <img> que representa la imagen del mapa se utiliza el atributo
usemap para indicar el nombre del mapa que se quiere utilizar.

Cada zona activa o sensible del mapa de imagen se define mediante una figura geométrica. Y existen tres tipos de figuras geométricas que se pueden emplear:

<area>,

Todas las zonas activas se definen con la etiqueta <area>,

Atributos:

shape
para indicar el tipo de figura geométrica,

coords

para indicar las coordenadas de la figura geométrica,

href

para indicar la URL del destino del enlace  

alt

para definir el texto alternativo que representa la figura geométrica en el caso de que no se pueda visualizar la imagen. Recuerda que este atributo alt ayuda a mejorar la accesibilidad de la página web.

           

Tipos de figura

rect

El tipo de figura geométrica “rect” define un rectángulo que está definido por las coordenadas (x, y) de su esquina superior izquierda y las coordenadas (x, y) de su esquina inferior derecha. En HTML, la esquina superior izquierda corresponde a la posición (0,0).

circle

El tipo de figura “circle” define un círculo que está definido por las coordenadas (x, y) del centro y el radio r.

poly

Finalmente, el tipo de figura “poly” define un polígono , regular o irregular, de n lados definido por las coordenadas (x, y) de los vértices que forman el polígono.

A continuación te muestro un ejemplo completo extraído del sitio web W3Schools. La imagen que podemos ver representar una parte del sistema solar. Sobre esta imagen se han definido tres zonas activas: el Sol por medio de un rectángulo, Mercurio mediante un círculo de radio 3 píxeles y Venus con otro círculo de radio 8 píxeles.

Muy importante, fíjate que cuando se indica el nombre del mapa en el atributo usemap de la etiqueta <img> se debe escribir al principio el símbolo almohadilla #.

En este otro ejemplo, extraído de la especificación oficial de HTML5, se han definido cuatro zonas activas en la imagen que se muestra: un rectángulo rojo con un hueco, un círculo verde, un triángulo azul y una estrella amarilla de cuatro puntas. Las dos primeras figuras se pueden definir con las figuras geométricas básicas, el rectángulo y el círculo, pero el triángulo y la estrella de cuatro puntas se tienen que definir con el polígono.

Fíjate otra vez cómo se ha indicado el símbolo almohadilla antes del nombre del mapa en el atributo usemap.

Por último, ya sabemos crear un mapa de imagen, pero ¿para qué se usan en las páginas web?

Bueno, eso depende de tu imaginación, tú le debes buscar los posibles usos, pero para ayudarte un poco, te voy a contar tres usos típicos.

Por supuesto, se pueden utilizar para verdaderos mapas geográficos, por ejemplo, para seleccionar las oficinas o tiendas de una empresa en una región particular.

También se emplean cómo método de navegación cuando se utiliza una barra de menú especial, por ejemplo creada mediante iconos.

Y por último, antes se utilizaba bastante en la página principal o portada de un sitio web en el que se daba a conocer cada una de las secciones del sitio web por medio de una imagen.