<img> elemento HTML de imagen incrustada

Pruébalo

<img
  class="fit-picture"
  src="/shared-assets/images/examples/grapefruit-slice.jpg"
  alt="Rodaja de pomelo sobre un montón de otras rodajas" />

.fit-picture {
  width: 250px;
}

Atributos

Este elemento incluye los atributos globales.

alt

Define el texto que puede sustituir a la imagen en la página.

Nota: Los navegadores no siempre muestran las imágenes. Hay varias situaciones en las que un navegador podría no mostrarlas, por ejemplo:

• Navegadores no visuales (como los que usan las personas con discapacidad visual)
• El usuario elige no mostrar imágenes (para ahorrar ancho de banda o por motivos de privacidad)
• La imagen no es válida o tiene un tipo no admitido

En estos casos, el navegador puede sustituir la imagen por el texto del atributo alt del elemento. Por estas y otras razones, proporciona siempre que puedas un valor útil para alt.

Establecer este atributo como una cadena vacía (alt="") indica que la imagen no es una parte clave del contenido (es decorativa o un píxel de seguimiento), y que los navegadores no visuales pueden omitirla del renderizado. Los navegadores visuales también ocultan el icono de imagen rota cuando el atributo alt está vacío y la imagen no se pudo mostrar.

Este atributo también se usa al copiar y pegar la imagen como texto, o al guardar una imagen enlazada como marcador.

attributionsrc

Especifica que quieres que el navegador envíe una cabecera Attribution-Reporting-Eligible junto con la petición de la imagen.

En el lado del servidor, esto se usa para activar el envío de una cabecera Attribution-Reporting-Register-Source o Attribution-Reporting-Register-Trigger en la respuesta, con el fin de registrar una fuente de atribución o un disparador de atribución basados en imagen, respectivamente. Qué cabecera de respuesta debe enviarse depende del valor de la cabecera Attribution-Reporting-Eligible que activó el registro.

El evento de fuente o disparador correspondiente se desencadena una vez que el navegador recibe la respuesta que contiene el archivo de imagen.

Nota: Consulta la Attribution Reporting API para más información.

Hay dos versiones de este atributo que puedes establecer:

• Booleana, es decir, usando solo el nombre attributionsrc. Esto especifica que quieres que la cabecera Attribution-Reporting-Eligible se envíe al mismo servidor al que apunta el atributo src. Esto es suficiente cuando gestionas el registro de la fuente o el disparador de atribución en el mismo servidor. Al registrar un disparador de atribución, esta propiedad es opcional, y si se omite se usará un valor booleano.
• Un valor con una o más URL, por ejemplo:

html

<img
  src="image-file.png"
  alt="Descripción de mi archivo de imagen"
  attributionsrc="https://a.example/register-source
                     https://b.example/register-source" />

Esto es útil cuando el recurso solicitado no está en un servidor que controlas, o cuando simplemente quieres gestionar el registro de la fuente de atribución en un servidor distinto. En ese caso, puedes especificar una o más URL como valor de attributionsrc. Cuando se produzca la petición del recurso, la cabecera Attribution-Reporting-Eligible se enviará a la URL (o URL) especificada en attributionSrc, además de al origen del recurso. Esas URL pueden entonces responder con una cabecera Attribution-Reporting-Register-Source o Attribution-Reporting-Register-Trigger, según corresponda, para completar el registro.

Nota: Especificar varias URL significa que se pueden registrar varias fuentes de atribución para la misma característica. Por ejemplo, podrías tener distintas campañas cuyo éxito quieres medir, lo que implica generar informes distintos sobre datos distintos.

crossorigin

Indica si la obtención de la imagen debe hacerse mediante una petición CORS. Los datos de imagen de una imagen con CORS habilitado obtenida mediante una petición CORS pueden reutilizarse en el elemento <canvas> sin quedar marcados como "contaminados".

Si el atributo crossorigin no está especificado, se envía una petición no CORS (sin la cabecera de petición Origin), y el navegador marca la imagen como contaminada y restringe el acceso a sus datos, impidiendo su uso en elementos <canvas>.

Si el atributo crossorigin sí está especificado, se envía una petición CORS (con la cabecera de petición Origin); pero si el servidor no permite el acceso de origen cruzado a los datos de la imagen desde el sitio de origen (al no enviar ninguna cabecera de respuesta Access-Control-Allow-Origin, o al no incluir el origen del sitio en ninguna cabecera Access-Control-Allow-Origin que sí envíe), el navegador bloquea la carga de la imagen y registra un error de CORS en la consola de las herramientas de desarrollo.

Valores permitidos:

anonymous

Se envía una petición CORS sin credenciales (es decir, sin cookies, certificados X.509 ni cabecera de petición Authorization).

use-credentials

La petición CORS se envía incluyendo cualquier credencial (es decir, cookies, certificados X.509 y la cabecera de petición Authorization). Si el servidor no permite compartir credenciales con el sitio de origen (enviando de vuelta la cabecera de respuesta Access-Control-Allow-Credentials: true), el navegador marca la imagen como contaminada y restringe el acceso a sus datos.

Si el atributo tiene un valor no válido, los navegadores lo manejan como si se hubiera usado el valor anonymous. Consulta atributos de configuración de CORS para más información.

decoding

Este atributo da al navegador una pista sobre si debe decodificar la imagen junto con la renderización del otro contenido del DOM en un solo paso de presentación que se vea más "correcto" (sync), o si debe renderizar y presentar el otro contenido del DOM primero y decodificar y mostrar la imagen después (async). En la práctica, async significa que el siguiente pintado no espera a que la imagen se decodifique.

A menudo es difícil percibir algún efecto notable al usar decoding en elementos <img> estáticos. Es probable que se rendericen inicialmente como imágenes vacías mientras se obtienen los archivos de imagen (ya sea desde la red o desde la caché), para luego gestionarse de forma independiente de todos modos, por lo que la "sincronización" de las actualizaciones de contenido resulta menos evidente. Sin embargo, el bloqueo del renderizado mientras ocurre la decodificación, aunque suele ser muy pequeño, sí puede medirse, incluso si es difícil de percibir a simple vista. Consulta What does the image decoding attribute actually do? para un análisis más detallado (tunetheweb.com, 2023).

Usar distintos tipos de decoding puede producir diferencias más notables al insertar dinámicamente elementos <img> en el DOM mediante JavaScript; consulta HTMLImageElement.decoding para más detalles.

Valores permitidos:

sync

Decodifica la imagen de forma síncrona junto con el resto del contenido del DOM, y presenta todo a la vez.

async

Decodifica la imagen de forma asíncrona, después de renderizar y presentar el resto del contenido del DOM.

auto

Sin preferencia por el modo de decodificación; el navegador decide qué es lo mejor para el usuario. Este es el valor predeterminado.

elementtiming

Marca la imagen para que sea observada por la API PerformanceElementTiming. El valor indicado se convierte en el identificador del elemento de imagen observado. Consulta también la página del atributo elementtiming.

fetchpriority

Proporciona una pista sobre la prioridad relativa que se debe usar al obtener la imagen. Valores permitidos:

high

Obtiene la imagen con una prioridad alta respecto a otras imágenes.

low

Obtiene la imagen con una prioridad baja respecto a otras imágenes.