<img>: element Imatge Incrustada

Sumari

L'element HTML <img> representa una imatge en el document.

Atributs

Aquest element inclou els atribust globals.

align Deprecated since HTML4.01, Obsolete since HTML5 

L'alineació de la imatge respecte al seu context circumdant. En HTML5, utilitzeu les propietats CSS float i/o vertical-align en el seu lloc.

alt

Aquest atribut defineix el text alternatiu que descriu la imatge. Els usuaris veuran aquest text apareixer si l'URL de la imatge està malament, o la imatge no es troba en un dels formats compatibles, o si la imatge no es descarrega.

L'omissió d'aquest atribut en conjunt indica que la imatge és una part clau del contingut, i no té un equivalent textual disponible. En establir aquest atribut en una cadena buida (alt="") indica que aquesta imatge no és una part clau del contingut, i que els navegadors no visuals poden ometre la seva representació.

border Deprecated since HTML4.01, Obsolete since HTML5

L'ample d'una vora al voltant de la imatge. En HTML5, utilitzeu en el seu lloc la propietat CSS border.

crossorigin HTML5

Aquest atribut enumerat indica si l'obtenció de la imatge relacionada ha de fer-se utilitzant CORS o no. En CORS habilitat, les imatges poden ser reutilitzades amb l'element <canvas> sense ser "corrompudes". Els valors permesos són:

anonymous

Una sol·licitud d'origen creuat (és a dir, amb origen: capçalera HTTP) es porta a terme. Però no s'envian credencials (és a dir, no hi ha cap galeta, no hi ha cap certificat X.509, i no s'envia l'autenticació bàsica HTTP ). Si el servidor no dóna credencials al lloc d'origen (si no s'estableix l'Access-Control-Allow-Origin: capçalera HTTP ), la imatge serà contaminada i el seu ús restringit.

use-credentials

Una sol·licitud d'origen creuat (és a dir, amb Origin: capçalera HTTP) realitzat amb credencial és enviat (és a dir, una galeta, un certificat i l'autenticació bàsica HTTP es realitza). Si el servidor no dóna credencials al lloc d'origen (a través d' Access-Control-Allow-Credentials: capçalera HTTP), la imatge serà contaminada i el seu ús restringit.

Quan no està present, el recurs es recupera sense una sol·licitud CORS (és a dir, sense necessitat d'enviar Origin: capçalera HTTP), evitant el seu ús no contamina elements <canvas>. Si no és vàlid, es tractada com si s'utilitzés la paraula clau enumerada anonymous. Veure configuració atributs CORS per obtenir informació addicional.

height

L'alçada intrínseca de la imatge en píxels. En HTML 4, l'alçada es podria definir en píxels o com a percentatge. En HTML5, però, el valor ha d'estar en píxels.

hspace Deprecated since HTML4.01, Obsolete since HTML5

El nombre de píxels d'espai en blanc per inserir a l'esquerra i dreta de la imatge. En HTML5, utilitzeu en al seu lloc la propietat CSS margin  .

ismap

Aquest atribut booleà indica que la imatge és part d'un mapa del costat del servidor. Si és així, les coordenades exactes d'un clic son enviades al servidor.

Aquest atribut només és permès si l'element <img> és un descendent d'un element <a> amb un atribut vàlid href

longdesc

Un enllaç a una descripció més detallada de la imatge. Els valors possibles són un URL o un element id.

name Deprecated since HTML4.01, Obsolete since HTML5

Un nom per l'element. És suportat en HTML 4 només per compatibilitat amb versions anteriors. Utilitzeu en el seu lloc l'atribut id.

referrerpolicy

Una cadena que indica la referència a utilitzar per recuperar el recurs:

• no-referrer:  la capçalera Referer no s'enviarà .
• no-referrer-when-downgrade: Cap encapçalat Referer s'enviarà quan es navega a un origen sense TLS (HTTPS). Es tracta d'un comportament per defecte de l'agent d'usuari si no hi ha una política que especifiqui lo contrari.
• origin: L'encapçalat Referer inclourà la pàgina de l'esquema d'origen, el host i el port.
• origin-when-cross-origin: navegant a altres orígens es limitarà les dades de referència incloses en l'esquema, el host i el port, mentre que la navegació des del mateix origen inclourà la ruta completa de las referèncias.
• unsafe-url: El Referal header inclourà l'origen i la ruta d'accés, però no el fragment, contrasenya o nom d'usuari. Aquest cas no és segur, ja que pot filtrar-se orígens i trajectòries dels recursos protegits-TLS a orígens insegurs.

sizesHTML5

Una llista d'una o més cadenes separades per comes que indiquen un conjunt de mides de fonts. Cada mida de font es compon de:

1. una condició de mitjans. Això ha de ser omès per a l'últim element.
2. un valor de mida de font.

Els valors de mida de la Font especifiquen la mida de la pantalla desitjada de la imatge. Els agents d'usuari utilitzen la mida de la font actual per seleccionar una de les fonts subministrades per l'atribut srcset, quan aquestes fonts es descriuen utilitzant descriptors de l'amplada ('w'). La mida de la font seleccionada afecta la mida de la imatge (mida de visualització de la imatge si no s'aplica un estil CSS). Si l'atribut srcset està absent, o no conté valors amb un descriptor d'amplada (w), llavors l'atribut sizes no té cap efecte.

src

L'URL de la imatge. Aquest atribut és obligatori per a l'element <img>. En els navegadors amb suport srcset, src és tractat com un candidat de la imatge amb un descriptor de densitat de píxel 1 x llevat que una imatge amb aquest descriptor de densitat de píxels ja estigui definit en srcset o a meys que srcset contingui descriptors 'w'.

srcsetHTML5

Una llista d'una o més cadenes separades per comes que indiquen un conjunt de fonts d'imatge possibles per a l'agent d'usuari per al seu ús. Cada cadena es compon de:

1. un URL a una imatge, ,
2. opcionalment, espai en blanc seguit per un:
   • un descriptor d'amplada, o un enter positiu seguit directament per 'w'. El descriptor d'amplada es divideix per la mida de la font donada en l'atribut sizes per calcular la densitat de píxels efectius.
   • un descriptor de densitat de píxels, que és un nombre de coma flotant positiva seguit directament per 'x'.

Si no s'especifica un descriptor, la font s'assigna el descriptor per defecte: 1x.

No és correcte barrejar descriptors d'amplada i descriptors de densitat de píxels en el mateix atribut srcset. Descriptors duplicats (per exemple, dues fonts en la mateixa srcset que estan tots dos descrits amb '2x') tampoc no són vàlids.

L'agent d'usuari selecciona una de les fonts disponibles a la seva discreció. Això els proporciona un marge significatiu per adaptar la seva selecció en funció de coses com les preferències de l'usuari o les condicions d'ample de banda.

width

L'amplada intrínseca de la imatge en píxels. En HTML 4, un percentatge o píxels són valors acceptables. En HTML5, però, només els píxels són acceptables.

usemap

L'adreça URL parcial (que comença amb '#') d'un mapa d'imatge associada amb l'element.

Nota d'ùs: No es pot fer servir aquest atribut si l'element <img> és un descendent d'un element <a> o <button>.

vspace Deprecated since HTML4.01, Obsolete since HTML5

El nombre de píxels d'espai en blanc per inserir dalt i sota de la imatge. En HTML5, utilitzeu en el seu lloc la propietat CSS margin..

Formats d'imatge suportats

L'estàndard d'HTML no dóna una llista de formats d'imatge que ha de ser admès, així que cada agent d'usuari dóna suport a un conjunt diferent de formats. Gecko és compatible am:

• JPEG
• GIF, incloent GIFs animats
• PNG
• APNG
• SVG
• BMP
• BMP ICO
• PNG ICO

Interacció amb CSS

Pel que fa a CSS, <img> és un element reemplaçat. No té cap base, de manera que quan les imatges s'utilitzen en un context de format en línia amb vertical-align: baseline, es col·loca la part inferior de la imatge en la base del contenidor.

Depenent del seu tipus, una imatge pot tenir una amplada i alçada intrínseca. Per alguns tipus d'imatge, però, dimensions intrínseques no són necessaries. Les imatges SVG, per exemple, no tenen dimensions intrínseques.

Errors

Si es produeix un error en intentar carregar o processar una imatge, i un controlador d'esdeveniments onerror ha estat configurat per controlar l'esdeveniment error, aquest controlador d'esdeveniment serà cridat. Això pot ocórrer en diverses situacions, incloent:

• El atribut src està buit o és null.
• La URL especificada en src és la mateixa que la URL de la pàgina que l'usuari es troba actualment.
• La imatge especificada està danyada d'alguna manera que evita que sigui carregada.
• Les metadades de la imatge especificada està danyada de tal manera que és impossible recuperar les seves dimensions, i aquestes  dimensions no van ser especificades en els atributs de l'element <img>.
• La imatge especificada està en un format no suportat pel user agent.

Exemple 1:  Text alternatiu

<img src="mdn-logo-sm.png" alt="MDN">

Exemple 2: Enllaç d'imatge

<a href="https://developer.mozilla.org/">MDN<img src="mdn-logo-sm.png" alt="MDN"></a>

Exemple 3: Ús de l'atribut srcset

L'atribut src és un candidat 1x en agents d'usuari que suporten srcset.

 <img src="mdn-logo-sm.png" 
      alt="MDN" 
      srcset="mdn-logo-HD.png 2x">

Exemple 4: Ús dels atributs srcset i sizes

S'ignora l'atribut src en agents d'usuari que donen suport a srcset utilitzant descriptors 'w'. Quan les (min-width: 600px) condicions del suport coincideixen, la imatge serà 200px d'amplada, en cas contrari serà 50vw d'amplada (50% de l'amplada de la finestra gràfica).

 <img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

Especificacions

Navegadors compatibles

[1] Implementad com referrerpolicy i darrere d'una bandera. .

[2] Implementat darrere d'una preferència.

Veure

• Els elements <picture>, <object> i <embed>