Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a hablar del uso de las imágenes en las páginas web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo: a través de mi correo electrónico sergio.lujan@ua.es
y a través de mi cuenta en Twitter @sergiolujanmora.

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.

En algunos sitios web el uso de imágenes es escaso, y su ausencia no plantea ningún problema. En otros sitios web, cuando las imágenes no se visualizan, pueden aparecer algunos problemas de uso en la página. Sin embargo, en otros sitios web, la ausencia de imágenes puede hacer que el sitio web sea totalmente inútil.

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 (W3C), veremos que no ha habido grandes cambios en la sintaxis de esta etiqueta. Debido a que no ha habido grandes cambios, en este vídeo me voy a centrar en HTML4 y XHTML 1.0. Además, la especificación de HTML5 no está terminada, por lo que puede sufrir variaciones.

La etiqueta <img> tiene dos atributos obligatorios: src y alt. El atributo src indica la ruta en la que se encuentra la imagen, 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.

La etiqueta <img> posee los siguientes atributos opcionales: width y height, para definir las dimensiones de la imagen; longdesc, para indicar la URL de una página en la que se proporciona una descripción larga de la imagen (muy importante para la accesibilidad de una página); y, por último, ismap y usemap, para definir mapas de imagen que veremos ahora después.

También existen algunos atributos obsoletos que puedes encontrar 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 el 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? En la documentación oficial de Mozilla, en el apartado sobre esta etiqueta, 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 muchos formatos, pero en la práctica los que son considerados como el estándar son los tres primeros: JPG, GIF y PNG. Vamos a ver a continuación las características principales de cada uno de estos tres formatos.

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 256 colores, permite transparencia 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. 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, al colocar puntos rojos y azules se logra la ilusión de que aparece el color violeta.

El efecto final puede ser muy sorprendente y engañar al ojo humano, pero hoy no es necesario utilizar esta técnica ya que existen otros formatos que permiten millones de colores. Por ejemplo, en una fotografía de un gato, al verla de cerca no se aprecian cambios bruscos. En cambio, al convertirla a una paleta de 216 colores sin dithering, aparecen zonas planas y cambios bruscos. Si aplicamos dithering, la mejora es notable. Finalmente, con una paleta optimizada de 256 colores, el parecido con la imagen original es asombroso.

El formato JPG es quizás el más popular en la Web porque permite trabajar con más de 16 millones de colores y tamaños de ficheros pequeños, gracias a algoritmos de compresión con pérdidas. Esto significa que al descomprimir una imagen no se obtiene el original, sino una aproximación.

Por ejemplo, una fotografía en JPG al 100% de calidad ocupa 492 KB; al 50%, ocupa 57 KB; y al 25%, solo 34 KB. A simple vista parecen iguales, pero al ampliar un detalle aparecen los famosos “artefactos” del JPG.

El último formato que vamos a ver es PNG. Este formato se creó específicamente para la Web y ofrece una gran variedad de posibilidades. Comparado con JPG, ofrece máxima calidad porque usa compresión sin pérdidas, aunque el tamaño de los ficheros es mayor.

Por último, vamos a ver los mapas de imagen. También se llaman imágenes sensibles, y son imágenes en las que se definen ciertas zonas “activas” que enlazan a otras páginas. Los mapas de imagen se pueden procesar en el lado del cliente o del servidor, aunque hoy son más comunes los del lado del cliente.

Un mapa de imagen en el lado del cliente se define con dos etiquetas de HTML: con la etiqueta <map> se define el mapa con sus zonas activas, y con el atributo usemap de la etiqueta <img> se relaciona la imagen con el mapa.

Cada zona activa se define mediante una figura geométrica. Se usan tres tipos: rect (rectángulo, definido por las coordenadas de las esquinas), circle (círculo, definido por el centro y el radio) y poly (polígono, definido por los vértices).

Todas las zonas activas se definen con la etiqueta <area>, que posee los atributos shape (tipo de figura), coords (coordenadas), href (URL del destino) y alt (texto alternativo que ayuda a la accesibilidad).

Un ejemplo clásico de W3Schools muestra una imagen del sistema solar con tres zonas activas: el Sol (rectángulo), Mercurio (círculo de radio 3) y Venus (círculo de radio 8). Es importante escribir el símbolo # antes del nombre del mapa en el atributo usemap.

En otro ejemplo, extraído de la especificación de HTML5, se definen cuatro zonas: un rectángulo rojo con un hueco, un círculo verde, un triángulo azul y una estrella amarilla de cuatro puntas. El rectángulo y el círculo se definen con las figuras básicas, mientras que el triángulo y la estrella se deben definir con un polígono.

¿Y para qué se usan los mapas de imagen en las páginas web? Depende de tu imaginación, pero algunos usos típicos son: representar mapas geográficos interactivos, crear menús de navegación mediante iconos o dividir la portada de un sitio web en secciones enlazadas.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web”, disponible en la dirección idesweb.es. Muchas gracias por tu atención.