La etiqueta para insertar una imagen en HTML es <img>.
Atributos obligatorios
- src: indica la ruta en la que se encuentra la imagen.
- 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.
Atributos opcionales
- width y height: definen las dimensiones de la imagen, el ancho y el alto.
- longdesc: indica la URL de una página en la que se proporciona una descripción larga de la imagen.
- ismap y usemap: definen mapas de imagen.
También hay atributos obsoletos que no se deben utilizar ya que su función ha sido sustituida por propiedades de CSS, al igual que el incluir imágenes como fondo de ciertos elementos.
Formatos gráficos más utilizados
- GIF: es el más antiguo y el primero que se empleó en las páginas web.
Características:
- Sólo soporta paletas de colores con 256 colores.
- Permite transparencia de un solo color.
- Permite realizar animaciones sencillas.
- JPG: es el más popular en la Web.
Características:
- Permite trabajar con imágenes con más de 16 millones de colores.
- Permite tamaños de ficheros muy pequeños mediante el uso de algoritmos de compresión con pérdidas, lo que significa que una vez comprimida una imagen, al descomprimirla, no se obtendrá la imagen original, sino una aproximación.
- PNG: se creó específicamente para la Web. Si se compara con el formato JPG, ofrece la máxima calidad, ya que utiliza un formato de compresión sin pérdidas, pero estas imágenes tienen un tamaño superior al formato JPG.
Mapas de imagen
Los mapas de imagen son imágenes en las que se han definido ciertas zonas llamadas "activas", que son enlaces a otras páginas. 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:
- <map>: define el mapa de imagen, con sus distintas zonas activas. El mapa de imagen debe tener un nombre (name=" ").
- <img>: representa la imagen del mapa, y utiliza el atributo usemap para indicar el nombre del mapa que se quiere utilizar. Cuando se indica el nombre, se debe escribir al principio el símbolo almohadilla (#).
Cada zona se define mediante una figura geométrica.
Todas las zonas activas se definen con la etiqueta <area>, que posee los 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.
Hay tres tipos de figuras geométricas:
- "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": define un círculo que está definido por las coordenadas (x, y) del centro y el radio r.
- "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.
