Imágenes en HTML: insertar, mostrar, mapa de imágenes...
Tener algunas imágenes en un sitio web lo hace más atractivo e intuitivo. Sin embargo, es importante no excederse, ya que las imágenes pueden llevar mucho tiempo en cargarse y, en algunos casos, pueden hacer que un documento sea más difícil de leer.
¿Cómo mostrar imágenes en una página web?
La etiqueta IMG se usa para insertar imágenes en páginas HTML. La imagen puede ubicarse en el mismo servidor que la página en la que se inserta, pero también puede ubicarse en un servidor diferente si se especifica la dirección URL completa.
Solamente se admiten los siguientes formatos de imagen en los estándares W3C:
- Imágenes JPEG (.JPG): Imágenes con un gran número de colores que han sido comprimidas en un alto grado para reducir su tamaño, de modo que requieren menos tiempo para la descarga,
- Imágenes PNG: Tienen un tamaño más pequeño cuando la imagen tiene un número reducido de colores sólidos. Este formato permite también imágenes entrelazadas (que aparecen progresivamente) con colores de 24 bits e imágenes en las que uno de los colores se ha definido como transparente.
- Imagen GIF: Tienen las mismas ventajas que las imágenes PNG, aunque el formato GIF se limita a 256 colores y sea un formato no completamente abierto.
¿Cómo insertar imágenes en una página web?
Los principales atributos de la etiqueta IMG son:
- SRC: Muestra la ruta donde se ubica la imagen (obligatorio).
- ALIGN: Especifica cómo está alineada la imagen en relación al texto adyacente. Los valores posibles son TOP, MIDDLE y BOTTOM (encima, en el medio, debajo).
- ALT:
Permite insertar un texto alternativo cuando la imagen no aparece. Muestra un texto alternativo si no aparece la imagen.
- TITLE: Muestra información cuando el cursor se desplaza sobre la imagen.
- WIDTH: Especifica el ancho de la imagen.
- HEIGHT: Especifica la altura de la imagen.
Así, para insertar una imagen, esta es la clase de etiqueta que debe utilizarse:
<IMG SRC="url_de_imagen" ALT="Texto alternativo" TITLE="Texto a mostrar">
| Atributo | Valor | Resultado | Efecto visual |
|---|---|---|---|
| ALIGN | Bottom center left middle top right | Alineación de imagen. | |
| ALT | Muestra un texto alternativo si no aparece la imagen. | ||
| BORDER | Número entero | Número de píxeles en el borde de la imagen. El color del borde puede definirse por el atributo LINK o TEXT de la etiqueta <BODY>. De forma predeterminada, el atributo BORDER se establece en 1 para crear un pequeño marco alrededor de la imagen. Si no lo quiere, puede establecer el valor en 0. |
 |
| HEIGHT | Número entero | Altura de la imagen (en píxeles o en %). Cuando este atributo especifica un tamaño diferente a la altura original del gráfico, el navegador automáticamente lo restaura al tamaño original, lo que puede disminuir la calidad de la imagen mostrada. |
|
| HSPACE | Número entero | Número de píxeles de ajuste entre la imagen y el texto adyacente (horizontalmente). |
|
| LONGDESC | URL de la descripción de la imagen. | ||
| LOWSRC | Direcciones URL | Una imagen alternativa (generalmente más pequeña) que se muestra mientras la imagen real se carga en el navegador. |
 |
| NAME | Establece el nombre de la imagen. Este atributo se usa principalmente para imágenes en JavaScript. | ||
| SRC | Direcciones URL | La dirección URL de la imagen. | |
| TITLE | Muestra un texto alternativo si no aparece la imagen. | ||
| USEMAP | URL o nombre del anclaje que define la imagen mapeada. | ||
| VSPACE | Número de píxeles de ajuste entre la imagen y el texto adyacente (verticalmente). | Prueba de texto
|
|
| WIDTH | Número entero | Ancho de la imagen (en píxeles o en %). Cuando este atributo especifica un tamaño diferente al ancho original del gráfico, el navegador automáticamente lo restaura al tamaño original, lo que puede disminuir la calidad de la imagen mostrada. |
 |
¿Cómo rodear una imagen con texto?
Las imágenes se insertan en un texto como caracteres. Esto hace que parezca imposible colocar texto alrededor de una imagen.
Sin embargo, existen varios métodos para hacer esto, veremos dos de ellos:
- El primero implica la creación de una tabla con una fila y dos columnas, en las que se ubican la imagen y el texto.
- El segundo (que es menos preciso) implica la alineación de la imagen hacia la derecha o hacia la izquierda con el atributo ALIGN y luego la escritura del texto. Si desea evitar que el texto rodee las imágenes, use el atributo CLEAR.
¿Cómo usar el mapa de imágenes?
Puedes crear diferentes áreas de selección dentro de una misma imagen usando el atributo USEMAP conjuntamente con la etiqueta MAP. El atributo USEMAP de la etiqueta <IMG> apunta a una etiqueta <MAP> que contiene una descripción de las áreas seleccionables en las que se divide el mapa.
La etiqueta <MAP> tiene un atributo NAME para definir su nombre, y también declara qué áreas son accesibles usando las etiquetas AREA.
| Etiqueta | Atributo | Valor | Efecto visual |
|---|---|---|---|
| MAP | NAME | ||
| AREA | SHAPE | RECT
CIRCLE POLY |
Rectángulo (sus coordenadas son: "abscisa superior izquierda, ordenada superior izquierda, abscisa inferior derecha, ordenada inferior derecha")
Círculo (sus coordenadas son: "abscisa de centro, ordenada de centro, radio") Polígono (sus coordenadas son: "lista de coordinadas, separadas por comas ") |
| HREF | Direcciones URL | Vínculo a URL | |
| COORDS | "XX,XX,XX,XX" | Contiene las coordenadas del área accesible, separadas por comas. |
A continuación hay un ejemplo de un mapa de imagen:
<IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map"> <MAP NAME="Map"> <AREA SHAPE="rect" HREF="start.html" COORDS="0,0,48,28"> <AREA SHAPE="circle" HREF="previous.html" COORDS="50,30,10"> <AREA SHAPE="poly" HREF="next.html" COORDS="60,50,80,30,100,40,50,100"> </MAP>