Administración de imágenes en HTML

Junio 2017

¿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:
"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>

Consulta también


Managing images in HTML
Managing images in HTML
Images en HTML
Images en HTML
Gestione delle immagini in HTML
Gestione delle immagini in HTML
Gestão das imagens em HTML
Gestão das imagens em HTML
API
API
Última actualización: 16 de octubre de 2008 a las 15:43 por Jeff.
El documento «Administración de imágenes en HTML» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.