HTML Imágenes

En el contenido del siguiente vídeo verás:

• El concepto de hipermedia, la etiqueta img, sus atributos obligatorios (src, alt), opcionales (width, height, longdesc, ismap, usemap) y los atributos desaconsejados.
• Las características de los formatos gráficos (GIF, JPG/JPEG, PNG), los mapas de imagen y su uso (map, area, atributos usemap e ismap).

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, el , veremos que no ha habido grandes cambios en la sintaxis de esta etiqueta. 

Ejemplos de etiqueta <img> en HTML5

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, 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, y por último, 

ismap y usemap para definir mapas de imagen.

Los mapas de imagen se pueden procesar en el lado del cliente o en el lado del servidor.

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

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.

Con la etiqueta <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.

Existen tres tipos de figuras geométricas que se pueden emplear.

Se definen con la etiqueta <area>, que posee los siguientes 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 y 

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.

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).

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

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.

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.

En HTML 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.

---

Los formatos gráficos que son considerados como estándar son: 

GIF, JPG y PNG

---

• 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.

• 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

• 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.