Administración de imágenes en HTML
¿Cómo mostrar imágenes en una página Web?
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.
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 mostrar imágenes en una página Web?
Cómo insertar una imagen 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). | Texto |
| 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. | |
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.
Mapas de imágenes
Puede 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: Polígono (sus coordenadas son: |
| 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>
