XHTML

 

Imágenes

Formatos

Se pueden utilizar 3 formatos de imagen:

GIF

GIF es el acrónimo de Graphic Image File Format. Fue desarrollado para el intercambio de imágenes en Compuserve y tiene como particularidad que el algoritmo de compresión es propietario, aunque se permite el uso a cualquier persona.

Las características de esto formato son:

* Número de colores: 2, 4 , 8, 16, 32, 128 ó 256 de una paleta de 24 bits.
* Compresión basada en el algoritmo de compresión LZW.
* Formato de compresión sin pérdida.

Características añadidas en la versión 89a:

* Carga progresiva.
* Máscara de trasparencia de 1 bit.
* Animación simple.

JPEG

JPEG es el acrónimo de Joint Photographic Experts Group. Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información.

Las características de este formato son:

* Número de colores: 24 bits color o 8 bits B/N
* Muy alto grado de compresión.
* Formato de compresión con pérdida.
* No permite trasparencia, ni canal alfa.
* No permite animación.

PNG

PNG es el acrónimo de Portable Network Graphics. Fue diseñado para reemplazar al formato GIF por ser este último más simple y menos completo. El objetivo de este formato es proporcionar un formato compresión de imágenes sin pérdida para cualquier tipo de imagen.

Las características de este formato son:

* Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel.
* Mayor compresión que el formato GIF (+10%)
* Compresión sin pérdida.
* Visualización progresiva en dos dimensiones.
* Canal alfa. (Transparencia variable)
* Detección de errores.
* No permite animación.

Insertar una imagen

Para insertar una imagen en un documento XHTML se utiliza la etiqueta <img> con unos cuantos atributos:

<img src="ruta_hacia_la_imagen.jpg" alt="descripción" width="40" heihgt="50" />

El atributo src se utiliza para indicar la ruta hacía la imagen. El atributo alt contiene una descripción de la imagen, que veremos cuando pasemos el ratón por encima y mientras se carga el archivo. También se muestra esta descripción cuando por alguina razón no se ha podido cargar la imagen. Es un atributo
obligatorio por cuestiones de accesibilidad.. Los atributos width y height nos permiten establecer el ancho y el alto de la imagen.

imagen como vínculo

Para poner una imagen como vínculo, basta con introducirla dentro de la etiqueta <a>:

<a href="unapagina.html" title="una página muy interesante">

  <img src="ruta_hacia_la_imagen.jpg" alt="descripción" width="40" heihgt="50" />

</a>

Ejercicios

Ejercicio 1

Crea un documento XHTML que contenga una imagen. ?Que occurre cuando el navagodor no encuentra la imagen en la ruta especificada?

Ejercicio 2

Crea un documento XHTML que contenga varias veces la misma imagen y juega con los atributos width y height para cambiar sus tamaño. ¿Que occure cuando se amplia mucho una imagen?

Ejercicio 3

Crea un documento XHTML que contenga una imágen de un logotipo de una marca comercial y crea un enlace a su página web.