Introducción a XHTML

Imágenes

1. Formatos de ficheros de imágenes habituales
2. Imágenes inline
3. Texto alternativo

1. Formatos de ficheros de imágenes habituales

Una de las funcionalidades de XHTML es la posibilidad de incluir imágenes dentro de un documento. Algunos formatos gráficos tienen soporte en modo nativo (son visualizados directamente por el navegador), mientras que otros requieren del concurso de programas externos.

No todos los ficheros que contienen gráficos siguen la misma convención de almacenamiento. Existen varios formatos que permiten, entre otras cosas, comprimir en distinto grado la información. Los formatos más extendidos son: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group bitmap), PNG (Portable Network Graphics) y SVG (Scalable Vector Graphics).

• El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que, por ello, no alcanza unas altas cotas de reducción. Este formato trabaja con un máximo de 256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering (aproximación del color por los vecinos más próximos). Soporta trasparencias del tipo todo/nada (pixel transparente o 100% opaco). Soporta animaciones que son soportadas por todos los navegadores sin necesidad de complementos de terceros. Aunque estuvo sometido a una polémica por el hecho de su algoritmo de compresión estaba patentado, dicha patente expiró en 2004, así que actualmente puede usarse libremente.
• El formato JPEG utiliza un algoritmo de compresión muchos más complicado que el utilizado por el GIF: los ficheros resultantes son más pequeños, pero necesitan más tiempo para su descompresión. Además es un algoritmo de compresión con pérdida: el mapa de bits descodificado no tiene por ser idéntico al mapa de bits que se grabó, pero está optimizado para que las diferencias no sean percibidas por el ojo humano. A diferencia del anterior formato, JPEG trabaja con 16.7 millones de colores (24 bits).
• El formato PNG surgió como alternativa libre al GIF. Es capaz de representar imágenes reales (24 bits) mediante compresión sin pérdida, por lo que su tamaño es mayor que el de un fichero JPEG. Además es capaz de almacenar capas alfa (indican un % de transparencia por cada pixel entre 0..255, siendo 0 transparente y 255 completamente opaco), lo que genera iconos más agradables a la vista.
• El formato SVG es un formato completamente diferente a los anteriores: en vez de grabar un mapa de bits, almacena las instrucciones gráficas (línes, formas, gradientes, etc.) mediante un etiquetado XML propio. Al igual que XHTML soporta características tales como scripting. Es el navegador el que reconstruye la imagen de bits a mostrar ejecutando esas instrucciones a la escala necesaria en función de la resolución de la pantalla o del papel donde se muestre. El objetivo de este formato es reemplazar a PNG y GIF sustituyendo la compresión sin pérdida por las instrucciones de operación (el tamaño del fichero resultante, suele ser parecido).

Como norma general, diremos que se utilizará el formato PNG para iconos e imágenes pequeñas o que requieran transparencias, JPEG para imágenes o de calidad fotográfica, y GIF si queremos incluir animaciones. El uso de SVG debe hacerse con cuidado, dado que el soporte que ofrecen los navegadores es aún incompleto.

2. Imágenes inline

Para insertar una imagen en un documento XHTML se utilizará la etiqueta simple <img>

<img src="folder-documents.png" />

El usuario verá:

3. Texto alternativo

Cuando no se incluye una imagen es obligatorio especificar un texto alternativo que mostrar en caso de la carga de la imagen falle por la causa que sea. Para ello se utiliza el atributo alt, cuyo contenido debe ser el texto a mostrar en ese caso.

<img src="folder-documents.svg" alt="[documents]" />

Como hemos equivocado el nombre del fichero de la imagen, el usuario verá:

Sin embargo, la obligatoriedad del uso del atributo alt no apareció hasta la versión 4 de HTML (antes era opcional). Por eso los navegadores interpretan sin problemas las etiquetas <img> sin atributo alt. Pero debes tener en cuenta que un XHTML que no defina el atributo alt no será correcto, aunque se vea bien.