Elemento img

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento img representa a una imagen, lo cual es un recurso externo que puede ser incrustado en el cuerpo de un documento. La ubicación de dicho recurso externo debe especificarse en el atributo src.

El elemento img no debería ser utilizado para insertar imágenes sin un significado para el documento. Ejemplos típicos de uso inadecuado incluyen imágenes utilizadas como separadores espaciales o como herramientas de organización del contenido.

HTML5 introdujo el atributo srcset para este elemento, el cual está pensado para proveer diferentes versiones de una imagen para diferentes necesidades de visualización (tamaños de pantalla, resoluciones y densidad de píxeles). Al ser relativamente nuevo, el soporte provisto por los navegadores es muy bajo.

El atributo alt

Las imágenes son elementos visuales. Ésta es una de las razones de la existencia del atributo alt, el cual está pensado para proveer una versión alternativa del contenido o propósito de la imagen para aquellas situaciones en las que éstas no pueden ser accedidas apropiadamente (usuarios con discapacidades visuales, navegadores sin soporte, configuraciones en que las imágenes están deshabilitadas, etc.).

El atributo alt debe proveer una versión alternativa de la imagen logrando mediante texto el mismo propósito de la imagen. Una descripción del contenido de la imagen no es siempre el mejor enfoque.

Para que quede más claro, exploraremos los diferentes usos de una misma imagen y la implementación más apropiada del atributo alt en cada escenario. La imagen corresponde a la bandera de Dominica.

Primero la usaremos como un ícono que acompañará al nombre del país en una oración. En este caso, el atributo alt es irrelevante, ya que la presencia de la bandera es simplemente complementaria. El significado del texto en esta oración no se vería alterado si la imagen fuera removida.

Ejemplo

<p>Charles Savarin es un político de <img src="/assets/images/dominica-flag-icon.gif" alt=""> Dominica. Licenciado por la Ruskin College, posteriormente entró en la política siendo miembro del Partido Laborista de Dominica (PLD).</p>

Charles Savarin es un político de Dominica. Licenciado por la Ruskin College, posteriormente entró en la política siendo miembro del Partido Laborista de Dominica (PLD).

Ahora, hacemos un uso muy similar de la bandera. Pero esta vez, se encuentra representando al país al que corresponde, de modo que sería apropiado proveer el nombre del país en el atributo alt. Una buena forma de analizar esta situación sería imaginando a este trozo de documento con la imagen reemplazada por el texto en alt. De ese modo queda claro cuál es el propósito de la imagen y cual debería ser el texto alternativo más apropiado.

Ejemplo

<ul>
  <li>Nombre: Charles Angelo Savarin</li>
  <li>Año de nacimiento: 1943</li>
  <li>Nacionalidad: <img src="/assets/images/dominica-flag-icon.gif" alt="Dominica"></li>
</ul>
  • Nombre: Charles Angelo Savarin
  • Año de nacimiento: 1943
  • Nacionalidad: Dominica

El siguiente caso es un tanto diferente de los otros dos. Aquí, el tema principal del documento es la bandera de Dominica, y luego de que la bandera ha sido mostrada, el autor hace algunos comentarios acerca de ésta.

Es muy fácil ver cómo un usuario sin los medios para ver la imagen estaría en desventaja aquí. Esa es la razón por la que el autor ha rellenado apropiadamente al atributo alt de la imagen con una descripción de la composición de la bandera.

Ejemplo

<p>La bandera de Dominica fue adoptada el 3 de Noviembre de 1978.</p>
<p><img src="/assets/images/dominica-flag.gif" alt="La bandera de Dominica tiene un fondo verde y tres líneas (una amarilla, una negra y la otra blanca) atravesando su centro de izquierda a derecha, y nuevamente de arriba abajo. En el centro, hay un círculo rojo con diez estrellas verdes en su borde y un loro sisserou en su centro."></p>
<p>Su loro, endémico en Dominica, es una especie en peligro de extinción con una población de solo 250-350 individuos.</p>

La bandera de Dominica fue adoptada el 3 de Noviembre de 1978.

La bandera de Dominica tiene un fondo verde y tres líneas (una amarilla, una negra y la otra blanca) atravesando su centro de izquierda a derecha, y nuevamente de arriba abajo. En el centro, hay un círculo rojo con diez estrellas verdes en su borde y un loro sisserou en su centro.

Su loro, endémico en Dominica, es una especie en peligro de extinción con una población de solo 250-350 individuos.

De manera similar, el siguiente trozo de documento describe a la bandera de Dominica, esta vez, directamente en el texto. Entonces, el autor ha dejado al atributo alt vacío, considerando que sería redundante proveer una descripción en tal escenario.

Ejemplo

<p>La bandera de Dominica fue adoptada el 3 de Noviembre de 1978.</p>
<p><img src="/assets/images/dominica-flag.gif" alt=""></p>
<p>La bandera de Dominica tiene un fondo verde y tres líneas (una amarilla, una negra y la otra blanca) atravesando su centro de izquierda a derecha, y nuevamente de arriba abajo. En el centro, hay un círculo rojo con diez estrellas verdes en su borde y un loro sisserou en su centro.</p>

La bandera de Dominica fue adoptada el 3 de Noviembre de 1978.

La bandera de Dominica tiene un fondo verde y tres líneas (una amarilla, una negra y la otra blanca) atravesando su centro de izquierda a derecha, y nuevamente de arriba abajo. En el centro, hay un círculo rojo con diez estrellas verdes en su borde y un loro sisserou en su centro.

Con estos ejemplos, deberías tener una pista acerca del propósito y el uso adecuado del atributo alt. En cualquier caso, intenta imaginar cómo se vería el documento si la imagen fuera reemplazada por su texto alternativo y así obtendrás una idea de qué es lo que deberías colocar en el atributo alt.

Ejemplos

Este ejemplo muestra al elemento img en acción, en su forma más básica. El elemento es definido con su atributo obligatorio src, el cual contiene un URI que apunta a la ubicación del recurso de imagen.

<img src="/assets/images/charles-darwin.jpg">

En nuestro segundo ejemplo probaremos el atributo alt. Aquí, una imagen de Charles Darwin será insertada en un trozo de documento para mejorar su imagen y acompañar a la información textual. El contenido del atributo alt proveerá, en este caso, el nombre de la persona retratada en la imagen y otra información relevante para comprender su relación con los contenidos del artículo. De este modo, el atributo alt estará logrando su objetivo, al proveer una alternativa textual a la imagen en el contexto en que está siendo insertada.

Asimismo, para mejorar la presentación, la imagen se encontrará flotando a la margen derecha con un par de declaraciones de estilo.

<h1>Selección natural</h1>
<img src="/assets/images/charles-darwin.jpg" style="float: right; margin: 0 0 1em 2em" alt="Charles Darwin, Padre de la teoría de la evolución por selección natural">
<p>La selección natural es un fenómeno de la evolución que se define como la reproducción diferencial de los genotipos de una población biológica. La formulación clásica de la selección natural establece que las condiciones de un medio ambiente favorecen o dificultan, es decir, seleccionan la reproducción de los organismos vivos según sean sus peculiaridades. La selección natural fue propuesta por Darwin como medio para explicar la evolución biológica. Esta explicación parte de tres premisas; la primera de ellas el rasgo sujeto a selección debe ser heredable.</p>

Selección natural

Charles Darwin, Padre de la teoría de la evolución por selección natural

La selección natural es un fenómeno de la evolución que se define como la reproducción diferencial de los genotipos de una población biológica. La formulación clásica de la selección natural establece que las condiciones de un medio ambiente favorecen o dificultan, es decir, seleccionan la reproducción de los organismos vivos según sean sus peculiaridades. La selección natural fue propuesta por Darwin como medio para explicar la evolución biológica. Esta explicación parte de tres premisas; la primera de ellas el rasgo sujeto a selección debe ser heredable.

Atributos

Atributos específicos

alt

Una línea de texto que provee contenido equivalente para aquellas situaciones en que las imágenes no pueden ser vistas (usuarios con discapacidades visuales, navegadores sin soporte, configuraciones en que las imágenes están deshabilitadas, etc.). Las propiedades que un texto alternativo debería presentar son tratadas en la descripción de este elemento.

Ejemplo

<img src="/assets/images/charles-dickens.jpg" alt="Charles Dickens, el más grande novelista del período Vitoriano">
Charles Dickens, el más grande novelista del período Vitoriano

src

El URI del recurso de imagen. Este atributo es obligatorio ya que apunta al recurso que será, de hecho, incrustado en el documento.

Ejemplo

<img src="/assets/images/charles-dickens.jpg">

srcset

Una lista de cadenas de imágenes cadidatas separadas una de otra por comas (","). Cada uno de los elementos en esta lista representa una alternativa a la imagen original (especificada en el atributo src), diseñada específicamente para medios con un tamaño de pantalla o una densidad de píxeles en particular (por ejemplo, dispositivos con pantallas reducidas, como los celulares). Una cadena de imagen candidata se debe componer por:

  1. Cero o más caracteres de espacio (" ").
  2. El URI del recurso de imagen.
  3. Cero o más caracteres de espacio (" ").
  4. Opcionalmente, uno de los siguientes:
    • Un descriptor de ancho con la siguiente estructura:
      1. Un carácter de espacio (" ").
      2. Un entero no negativo representando el ancho del recurso.
      3. Una letra minúscula W ("w").
    • Un descriptor de densidad de píxeles con la siguiente estructura:
      1. Un carácter de espacio (" ").
      2. Un real no negativo representando la densidad de píxeles del recurso.
      3. Una letra minúscula X ("x").

Si una cadena de imagen candidata tiene un descriptor de ancho, entonces todas las cadenas de imágenes candidatas deben tener el descriptor de ancho especificado. Asimismo, la presencia de una cadena de imágen candidata con un descriptor de ancho implica que la presencia del atributo sizes es obligatoria.

No deben haber dos cadenas de imágenes candidatas con los mismos descriptores en el elemento. Una cadena de imagen candidata sin descriptores es equivalente a una cadena de imagen candidata con un descriptor de densidad de píxeles de "1x".

Este atributo ha sido introducido recientemente en HTML5. Se aconseja a los autores esperar un soporte reducido por parte de los navegadores para sus características.

Este ejemplo no muestra una versión en vivo debido a que no está pensado para trabajar dentro del esquema de la página. Su uso de porcentajes del ancho de la pantalla (vw) para establecer el ancho de la imagen, desarmaría el cuadro del ejemplo.

Ejemplo

<img src="/assets/images/Lunar_map.jpg" srcset="/assets/images/Lunar_map_(large).jpg 640w, /assets/images/Lunar_map.jpg 300w, /assets/images/Lunar_map_(small).jpg 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">

sizes

Una lista de tamaños de fuentes válidos, separados por comas. Cada tamaño de fuente (con la excepción del último) debe estar compuesto por:

  1. Opcionalmente:
    1. Una condición de media query que indique en qué casos se deberá aplicar este tamaño.
    2. Un caráter de espacio (" ").
  2. El ancho que tomará la imagen en unidades CSS.

El último tamaño de fuente debe estar compuesto únicamente por el ancho de la imagen en unidades CSS, y será usado por el navegador como predeterminado.

Los navegadores que soporten este mecanismo elegirán de entre las imágenes provistas en el atributo srcset, la que encaje mejor en la configuración del dispositivo en el que deberá ser mostrada, tomando en cuenta la información de este atributo. Este método ha sido diseñado para simplificar la tarea de proveer imágenes en páginas que se adaptan al área de visualización y confía al navegador la elección de la imagen más apropiada para ser mostrada dadas las condiciones que se presentan.

Este atributo solo puede ser declarado si el atributo srcset está presente y tiene al menos un recurso de imagen con un descriptor de ancho.

Este ejemplo no muestra una versión en vivo debido a que no está pensado para trabajar dentro del esquema de la página. Su uso de porcentajes del ancho de la pantalla (vw) para establecer el ancho de la imagen, desarmaría el cuadro del ejemplo.

Ejemplo

<img src="/assets/images/Lunar_map.jpg" srcset="/assets/images/Lunar_map_(large).jpg 640w, /assets/images/Lunar_map.jpg 300w, /assets/images/Lunar_map_(small).jpg 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">

crossorigin

Un valor enumerado que indica si la petición hecha a un servidor externo debe presentar credenciales CORS o no. Este atributo resulta útil al incrustar imágenes ubicadas en otros servidores que soportan acceso cross-origin, para permitir su reutilización en un canvas. Los dos valores posibles son (insensibles a mayúsculas/minúsculas):

  • anonymous: las peticiones CORS para el elemento tendrán la etiqueta "omit credentials" establecida.
  • use-credentials: las peticiones CORS para el elemento no tendrán la etiqueta "omit credentials" establecida.

Ejemplo

<img src="http://www.otherserver.com/images/shalom.png" crossorigin="use-credentials">

usemap

Una referencia de nombre al mapa (map) al que esta imagen está asociada. Esta referencia debe estar compuesta por un signo numeral ("#") y una cadena que coincida con el valor del atributo name en el elemento map asociado.

Ejemplo

<map name="image-map-1">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="circle" coords="67,73,47">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="rect" coords="60,54,142,99">
</map>
<img src="/assets/images/image-map-1-es.png" usemap="#image-map-1" alt="Mapa de imagen de ejemplo">
Tutoriales HTML Tutoriales HTML Mapa de imagen de ejemplo

ismap

Un valor booleano que indica si el elemento representa un mapa de imagen del lado servidor. Si tiene los valores "ismap" o la cadena vacía (""), o si está simplemente presente, el elemento representa un mapa de imagen del lado servidor.

Este atributo solo tendrá efecto el elemento es descendiente de un elemento a con el atributo href correctamente definido.

Ejemplo

<a href="procesador.php">
  <img src="barra-de-navegacion-servidor.png" ismap alt="Barra de navegación del sitio">
</a>

width

Un número de píxeles que indica el ancho que la imagen tomará cuando sea incrustada en el documento.

No hay necesidad de proveer el ancho real de la imagen en este atributo. Sin embargo, especificar un ancho diferente puede producir imágenes pixeladass (cuando es más grande) o períodos de carga más extensos de lo necesario (cuando es menor).

Ejemplo

<img src="emblema.png" width="450" height="250" alt="Emblema de la organización">

height

Un número de píxeles que indica la altura que la imagen tomará cuando sea incrustada en el documento.

No hay necesidad de proveer la altura real de la imagen en este atributo. Sin embargo, especificar una altura diferente puede producir imágenes pixeladass (cuando es más grande) o períodos de carga más extensos de lo necesario (cuando es menor).

Ejemplo

<img src="emblema.png" width="450" height="250" alt="Emblema de la organización">

referrerpolicy

Establece la política de origen utilizada en el procesamiento de los atributos del elemento, lo que involucra qué información es enviada acerca del remitente en una petición de otro recurso. Puede contener cualquiera de los siguientes valores:

  • no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
  • no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
  • origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
  • strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
  • strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • unsafe-url: Una URL completa es enviada en todas las peticiones.

Nota: Cuando la cadena vacía es especificada, se asume el valor no-referrer.

Ejemplo

<a rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">Este contenido pertenece al dominio público</a>

decoding

Una pista para ayudar a los navegadores a decidir qué método utilizar al decodificar esta imagen. Este atributo puede tomar uno de los tres valores siguientes:

  • sync: la imagen debería ser decodificada sincrónicamente, para presentación atómica con otro contenido.
  • async: la imagen debería ser decodificada asincrónicamente, para evitar retrasos en la presentación de otro contenido.
  • auto: la decisión es dejada al navegador. Este es el valor por defecto.

Ejemplo

<img src="circuito.png" decoding="sync">
...
<img src="nikola-tesla.png" decoding="async">

loading

Un valor enumerado que indica cuándo debería el navegador cargar esta imagen. Este atributo puede tomar uno de dos valores:

  • lazy: el navegador debería cargar esta imagen una vez que ingrese al área visible de la página, pero sin retrasar al evento load.
  • eager: el navegador debería cargar la imagen inmediatamente. Este es el valor por defecto.

Ejemplo

<img src="imagen-producto-1.png" loading="lazy">

longdesc

El URI de un recurso con una explicación más extensa del contenido/propósito de la imagen que la provista en el atributo alt.

Este atributo se ha vuelto obsoleto en HTML5 debido a la escasa implementación por parte de autores y navegadores. Su funcionalidad puede ser reemplazada con atributos aria.

Ejemplo

<img src="../mapa-de-la-isla-del-tesoro.jpg" alt="El mapa ofrece una vista de aguila de la isla del tesoro. El sitio de la excavación está marcado con una X en la región sudoeste." longdesc="descripcion-detallada-del-mapa-de-la-isla-del-tesoro.html">

align

Un valor que indica cómo el elemento debería estar alineado respecto de sus alrededores. Existen cinco valores posibles, insensibles a mayúsculas/minúsculas:

  • top: el borde superior de la imagen se alinea verticalmente con la línea base.
  • middle: la imagen es centrada verticalmente con respecto a la línea base.
  • bottom: el borde superior de la imagen se alinea verticalmente con la línea base. Este es el valor por defecto.
  • left: la imagen flota hacia la margen izquierda.
  • right: la imagen flota hacia la margen derecha.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<img src="foto.png" align="center">

border

Un número de píxeles que especifica el ancho del borde que presentará la imagen.

Este atributo se ha vuelto obsoleto en HTML5 por ser meramente visual. Los autores deberían reemplazarlo con hojas de estilos.

Ejemplo

<img src="../icono-verde.gif" border="3">

hspace

Un número de píxeles que indica la cantidad de espacio vacío que se dejará a las márgenes izquierda y derecha de la imagen.

Este atributo se ha vuelto inválido en HTML5 por tener propósitos visuales únicamente. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<img src="../jhon-doe-1.jpg" hspace="200">

vspace

Un número de píxeles que indica la cantidad de espacio vacío que se dejará a las márgenes superior e inferior de la imagen.

Este atributo se ha vuelto inválido en HTML5 por tener propósitos visuales únicamente. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<img src="../jhon-doe-2.jpg" vspace="50">

name

Un nombre para el elemento.

Este atributo se ha vuelto inválido en HTML5 por tener propósitos visuales únicamente. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<img src="../icono-verde.gif" name="icono1">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.