--- title: ': element Imatge Incrustada' slug: Web/HTML/Element/img tags: - Contingut - Element - Gràfics - HTML - Imatge - Multimedia - Referencia - Web - embedded translation_of: Web/HTML/Element/img ---

Sumari

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

Els navegadors no sempre mostren la imatge referenciada per l'element. Aquest és el cas dels navegadors no gràfics (inclosos els utilitzats per les persones amb problemes de visió), o si l'usuari opta per no mostrar imatges, o si el navegador no pot mostrar la imatge, ja que no és vàlid o un tipus no suportat. En aquests casos, el navegador pot reemplaçar la imatge amb el text definit en l'atribut alt d'aquest element. Ha de, per aquestes i altres raons, proporcionar un valor útil sempre que sigui possible.

Categories de contingut	Contingut dinàmic, phrasing content, contingut incrustat, contingut palpable. Si l'element té un atribut {{htmlattrxref("usemap", "img")}}, o sinó que també és una part de la categoria de contingut interactiu.
Contingut permès	Cap, és un {{Glossary("empty element")}}.
Omissió de l'etiqueta	Ha de tenir una etiqueta d'inici i no una etiqueta de tancament.
Elements pares permesos	Qualsevol element que accepti contingut incrustat.
Interfície DOM	{{domxref("HTMLImageElement")}}

Atributs

Aquest element inclou els atribust globals.

{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}

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

{{htmlattrdef("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ó.

{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}

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

{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}

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 {{HTMLElement("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 {{HTMLElement('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.

{{htmlattrdef("height")}}

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

{{htmlattrdef("hspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','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 {{cssxref('margin')}} .

{{htmlattrdef("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 {{htmlelement("a")}} amb un atribut vàlid {{htmlattrxref("href","a")}}

{{htmlattrdef("longdesc")}}

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

{{htmlattrdef("name")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','HTML5')}}

Un nom per l'element. És suportat en {{HTMLVersionInline(4)}} només per compatibilitat amb versions anteriors. Utilitzeu en el seu lloc l'atribut id.

{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}

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.

{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}

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:

una condició de mitjans. Això ha de ser omès per a l'últim element.
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.

{{htmlattrdef("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'.

{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}

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:

un URL a una imatge, ,
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.

{{htmlattrdef("width")}}

L'amplada intrínseca de la imatge en píxels. En {{HTMLVersionInline(4)}}, un percentatge o píxels són valors acceptables. En {{HTMLVersionInline(5)}}, però, només els píxels són acceptables.

{{htmlattrdef("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 {{htmlelement("a")}} o {{HTMLElement("button")}}.

{{htmlattrdef("vspace")}} {{deprecatedGeneric('inline','HTML4.01')}}, {{obsoleteGeneric('inline','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 {{cssxref('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 {{gecko_minversion_inline("1.9.2")}}
SVG {{gecko_minversion_inline("2.0")}}
BMP
BMP ICO
PNG ICO {{gecko_minversion_inline("9.0")}}

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 {{cssxref ("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 {{htmlattrxref("onerror")}} ha estat configurat per controlar l'esdeveniment {{event("error")}}, aquest controlador d'esdeveniment serà cridat. Això pot ocórrer en diverses situacions, incloent:

El atribut {{htmlattrxref("src", "img")}} 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 {{Glossary("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

Especificació	Estat	Comentari
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}	{{Spec2('Referrer Policy')}}	Afegeix l'atribut `referrerpolicy`.
{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}	{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}	{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}	{{Spec2('HTML4.01')}}

Navegadors compatibles

Característica	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Suport bàsic	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}
`srcset`	{{CompatChrome(34.0)}}	{{CompatVersionUnknown}}	{{CompatGeckoDesktop("32.0")}}^[2]	{{CompatNo}}	{{CompatOpera(21)}}	{{CompatSafari(7.1)}}
`referrerpolicy`	{{CompatChrome(46.0)}}^[1]	{{CompatUnknown}}	{{CompatGeckoDesktop("50.0")}}	{{CompatUnknown}}	{{CompatUnknown}}	{{CompatUnknown}}
`onerror` event handler	{{CompatVersionUnknown}}	{{CompatUnknown}}	{{CompatGeckoDesktop(51)}}	{{CompatUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}

Característica	Android	Android Webview	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Suport bàsic	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}
`srcset`	{{CompatUnknown}}	{{CompatChrome(34.0)}}	{{CompatNo}}	{{CompatNo}}	21	iOS 8	{{CompatChrome(34.0)}}
`referrerpolicy`	{{CompatUnknown}}	{{CompatChrome(46.0)}} [1]	{{CompatGeckoMobile("50.0")}}	{{CompatUnknown}}	{{CompatUnknown}}	{{CompatUnknown}}	{{CompatChrome(46.0)}}^[1]
`onerror` event handler	{{CompatUnknown}}	{{CompatVersionUnknown}}	{{CompatGeckoMobile(51)}}	{{CompatUnknown}}	{{CompatUnknown}}	{{CompatVersionUnknown}}	{{CompatVersionUnknown}}

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

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

Veure

Els elements {{HTMLElement("picture")}}, {{HTMLElement("object")}} i {{HTMLElement("embed")}}