Het element <img>

Definieert tekst die de afbeelding op de pagina kan vervangen.

Als dit attribuut wordt ingesteld op een lege string (alt=""), geeft dit aan dat deze afbeelding geen essentieel onderdeel van de inhoud is (het is decoratie of een trackingpixel), en dat niet-visuele browsers deze mogen weglaten uit de weergave. Visuele browsers verbergen ook het pictogram voor een gebroken afbeelding als het alt-attribuut leeg is en de afbeelding niet kon worden weergegeven.

Dit attribuut wordt ook gebruikt wanneer de afbeelding wordt gekopieerd en als tekst geplakt, of wanneer een gelinkte afbeelding als bladwijzer wordt opgeslagen.

Geeft aan dat je wilt dat de browser een Attribution-Reporting-Eligible-header meestuurt met het afbeeldingsverzoek.

Aan de serverzijde wordt dit gebruikt om het verzenden van een Attribution-Reporting-Register-Source- of Attribution-Reporting-Register-Trigger-header in het antwoord te activeren, om respectievelijk een op afbeeldingen gebaseerde attributiebron of attributietrigger te registreren. Welke response-header teruggestuurd moet worden, hangt af van de waarde van de Attribution-Reporting-Eligible-header die de registratie activeerde.

Het bijbehorende bron- of triggerevent wordt geactiveerd zodra de browser het antwoord met het afbeeldingsbestand ontvangt.

Er zijn twee versies van dit attribuut die je kunt instellen:

• Boolean, dat wil zeggen alleen de naam attributionsrc. Dit geeft aan dat je wilt dat de Attribution-Reporting-Eligible-header wordt verzonden naar dezelfde server waar het src-attribuut naar verwijst. Dit is prima wanneer je de registratie van de attributiebron of -trigger op dezelfde server afhandelt. Bij het registreren van een attributietrigger is deze eigenschap optioneel, en wordt een boolean-waarde gebruikt als deze wordt weggelaten.
• Een waarde die een of meer URL's bevat, bijvoorbeeld:

<img
  src="image-file.png"
  alt="My image file description"
  attributionsrc="https://a.example/register-source
                     https://b.example/register-source" />

Dit is nuttig in gevallen waarin de opgevraagde bron zich niet op een server bevindt die je beheert, of wanneer je gewoon de registratie van de attributiebron op een andere server wilt afhandelen. In dat geval kun je een of meer URL's opgeven als waarde van attributionsrc. Wanneer het bronverzoek plaatsvindt, wordt de Attribution-Reporting-Eligible-header verzonden naar de URL('s) die zijn opgegeven in attributionSrc, naast de bronoorsprong zelf. Deze URL's kunnen vervolgens naar behoefte reageren met een Attribution-Reporting-Register-Source- of Attribution-Reporting-Register-Trigger-header om de registratie te voltooien.

Geeft aan of het ophalen van de afbeelding moet gebeuren met een CORS-verzoek. Afbeeldingsdata van een CORS-ingeschakelde afbeelding, teruggegeven door een CORS-verzoek, kan opnieuw gebruikt worden in het <canvas>-element zonder als "besmet" te worden gemarkeerd.

Als het crossorigin-attribuut niet is opgegeven, wordt een niet-CORS-verzoek verzonden (zonder de Origin-requestheader), en markeert de browser de afbeelding als besmet en beperkt de toegang tot de afbeeldingsdata, waardoor gebruik in <canvas>-elementen wordt voorkomen.

Als het crossorigin-attribuut wel is opgegeven, wordt een CORS-verzoek verzonden (met de Origin-requestheader); maar als de server niet toestaat dat de site van herkomst cross-origin toegang krijgt tot de afbeeldingsdata (door geen Access-Control-Allow-Origin-responseheader te sturen, of door de herkomst van de site niet op te nemen in een Access-Control-Allow-Origin-responseheader die wel wordt verstuurd), blokkeert de browser het laden van de afbeelding en registreert een CORS-fout in de devtools-console.

Toegestane waarden:

• anonymous
  • : Er wordt een CORS-verzoek verzonden zonder credentials (dat wil zeggen zonder cookies, X.509-certificaten of de Authorization-requestheader).
• use-credentials
  • : Het CORS-verzoek wordt verzonden met eventuele credentials (dat wil zeggen cookies, X.509-certificaten en de Authorization-requestheader). Als de server het delen van credentials met de site van herkomst niet toestaat (door de responseheader Access-Control-Allow-Credentials: true niet terug te sturen), markeert de browser de afbeelding als besmet en beperkt de toegang tot de afbeeldingsdata.

Als het attribuut een ongeldige waarde heeft, behandelen browsers dit alsof de waarde anonymous werd gebruikt. Zie CORS-instellingsattributen voor meer informatie.

Dit attribuut geeft de browser een hint of hij het decoderen van de afbeelding moet uitvoeren samen met het weergeven van de overige DOM-inhoud, in één presentatiestap die er "correcter" uitziet (sync), of dat hij eerst de overige DOM-inhoud rendert en presenteert en de afbeelding pas later decodeert en toont (async). In de praktijk betekent async dat de volgende paint niet wacht tot de afbeelding is gedecodeerd.

Het is vaak lastig om een merkbaar effect waar te nemen bij het gebruik van decoding op statische <img>-elementen. Ze worden waarschijnlijk aanvankelijk weergegeven als lege afbeeldingen terwijl de afbeeldingsbestanden worden opgehaald (hetzij van het netwerk, hetzij uit de cache), en vervolgens toch onafhankelijk afgehandeld, waardoor de "synchronisatie" van inhoudsupdates minder merkbaar is. Toch kan het blokkeren van rendering tijdens het decoderen, hoewel vaak vrij klein, worden gemeten — zelfs als het moeilijk is om met het blote oog waar te nemen. Zie What does the image decoding attribute actually do? voor een gedetailleerdere analyse (tunetheweb.com, 2023).

Het gebruik van verschillende decoding-typen kan resulteren in meer merkbare verschillen bij het dynamisch invoegen van <img>-elementen in de DOM via JavaScript — zie HTMLImageElement.decoding voor meer details.

Toegestane waarden:

• sync
  • : Decodeer de afbeelding synchroon samen met het weergeven van de overige DOM-inhoud, en presenteer alles samen.
• async
  • : Decodeer de afbeelding asynchroon, na het weergeven en presenteren van de overige DOM-inhoud.
• auto
  • : Geen voorkeur voor de decodeermodus; de browser bepaalt wat het beste is voor de gebruiker. Dit is de standaardwaarde.

• high
  • : Haal de afbeelding op met een hoge prioriteit ten opzichte van andere afbeeldingen.
• low
  • : Haal de afbeelding op met een lage prioriteit ten opzichte van andere afbeeldingen.
• auto
  • : Stel geen voorkeur in voor de ophaalprioriteit. Dit is de standaardwaarde. Deze wordt gebruikt als er geen waarde of een ongeldige waarde is ingesteld.

De intrinsieke hoogte van de afbeelding, in pixels. Moet een geheel getal zijn zonder eenheid.

Dit boolean-attribuut geeft aan dat de afbeelding deel uitmaakt van een server-side map. Als dit het geval is, worden de coördinaten waarop de gebruiker op de afbeelding klikte naar de server verzonden.

• eager
  • : Laadt de afbeelding onmiddellijk, ongeacht of de afbeelding zich momenteel binnen de visual viewport bevindt (dit is de standaardwaarde).
• lazy

  • : Stelt het laden van de afbeelding uit totdat deze een door de browser berekende afstand tot de viewport bereikt.

    Lazy loading vermijdt de netwerk- en opslagbandbreedte die nodig is om de afbeelding te verwerken totdat het redelijk zeker is dat deze nodig zal zijn. Dit verbetert de prestaties in de meeste gangbare gebruikssituaties.

    Hoewel expliciete width- en height-attributen voor alle afbeeldingen worden aanbevolen om verschuivingen in de pagina-indeling te voorkomen, zijn ze vooral belangrijk voor lazy-loaded afbeeldingen. Lazy-loaded afbeeldingen worden nooit geladen als ze geen zichtbaar deel van een element overlappen, zelfs niet als het laden ervan dat zou veranderen, omdat niet-geladen afbeeldingen een width en height van 0 hebben. Dit zorgt voor een nog storendere gebruikerservaring wanneer de zichtbare inhoud in de viewport herschikt terwijl deze gelezen wordt.

    Lazy-loaded afbeeldingen die zich in de visuele viewport bevinden, zijn mogelijk nog niet zichtbaar wanneer het load-event van het Window-object wordt geactiveerd. Dit komt doordat het event wordt geactiveerd op basis van eager-loaded afbeeldingen — lazy-loaded afbeeldingen worden niet meegeteld, zelfs niet als ze zich bij het initieel laden van de pagina binnen de visuele viewport bevinden.

    Het laden wordt alleen uitgesteld wanneer JavaScript is ingeschakeld. Dit is een anti-trackingmaatregel, omdat als een user agent lazy loading zou ondersteunen wanneer scripting is uitgeschakeld, het nog steeds mogelijk zou zijn voor een site om de ongeveer scrollpositie van een gebruiker gedurende een sessie te volgen, door afbeeldingen strategisch in de markup van een pagina te plaatsen, zodat een server kan bijhouden hoeveel afbeeldingen worden opgevraagd en wanneer.

• no-referrer: De Referer-header wordt niet verzonden.
• no-referrer-when-downgrade: De Referer-header wordt niet verzonden naar origins zonder TLS (HTTPS).
• origin: De verzonden referrer wordt beperkt tot de oorsprong van de verwijzende pagina: het schema, de host en de port.
• origin-when-cross-origin: De referrer die naar andere oorsprongen wordt verzonden, wordt beperkt tot het schema, de host en de poort. Navigaties binnen dezelfde oorsprong bevatten nog steeds het pad.
• same-origin: Er wordt een referrer verzonden voor dezelfde oorsprong, maar cross-origin-verzoeken bevatten geen referrer-informatie.
• strict-origin: Verzend alleen de oorsprong van het document als referrer wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS), maar verzend deze niet naar een minder veilige bestemming (HTTPS→HTTP).
• strict-origin-when-cross-origin (standaard): Verzend een volledige URL bij een verzoek binnen dezelfde oorsprong, verzend alleen de oorsprong wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS), en verzend geen header naar een minder veilige bestemming (HTTPS→HTTP).
• unsafe-url: De referrer bevat de oorsprong en het pad (maar niet het fragment, wachtwoord of gebruikersnaam). Deze waarde is onveilig, omdat deze oorsprongen en paden van door TLS beschermde bronnen lekt naar onveilige oorsprongen.

• bronformaat (source size)

  • : Een bronformaat bestaat uit:

    1. Een media-conditie, weggelaten voor het laatste item in de lijst.
    2. Een bronformaatwaarde.

    Het volgende bronformaat stelt bijvoorbeeld voor een 1000px brede afbeeldingsbron te gebruiken als de breedte van de viewport 500px of minder is.

    CSSKopieer code

    (width <= 500px) 1000px

    Media-condities beschrijven eigenschappen van de viewport, niet van de afbeelding. Omdat een bronformaatdescriptor de breedte specificeert die tijdens de layout voor de afbeelding gebruikt moet worden, is de media-conditie doorgaans (maar niet noodzakelijk) gebaseerd op @media/width.

    Bronformaatwaarden specificeren de beoogde weergavegrootte van de afbeelding. User agents gebruiken het huidige bronformaat om een van de bronnen te selecteren die door het srcset-attribuut worden opgegeven, wanneer die bronnen beschreven zijn met breedtedescriptoren (w). De w-waarde die in sizes is gedefinieerd, bepaalt de standaard layoutbreedte van de afbeelding. Bij afwezigheid van CSS rendert de browser de afbeelding op deze grootte, ongeacht de fysieke pixelafmetingen van het gedownloade bestand.

    Een bronformaatwaarde kan elke niet-negatieve lengte zijn. Er mogen geen CSS-functies gebruikt worden anders dan de wiskundige functies. Eenheden worden op dezelfde manier geïnterpreteerd als bij media queries, wat betekent dat alle relatieve lengte-eenheden relatief zijn aan de document-root en niet aan het <img>-element. Een em-waarde is bijvoorbeeld relatief aan de root-lettergrootte, niet aan de lettergrootte van de afbeelding. Percentage-waarden zijn niet toegestaan. Als het sizes-attribuut niet is opgegeven, heeft het een standaardwaarde van 100vw (de breedte van de viewport).

• auto

  • : Het sleutelwoord auto geeft aan dat de browser de verwachte layoutbreedte van het element moet gebruiken om te bepalen welke afbeelding weergegeven wordt. Dat wil zeggen, hij moet de concrete grootte van de afbeelding gebruiken, berekend na toepassing van de layout op basis van HTML en CSS. Dit is alleen geldig in combinatie met loading="lazy", omdat verwacht wordt dat de pagina op het moment dat de afbeelding wordt geladen al beschikt over CSS en andere layoutinformatie.

    Door auto te gebruiken, hoef je je layout-media-condities niet twee keer op te geven: één keer voor de layout en één keer voor het selecteren van een geschikte afbeelding om op te halen en weer te geven.

    Als auto niet kan worden opgelost — hetzij omdat de browser het niet ondersteunt, hetzij omdat de afbeelding nog geen layoutgrootte heeft — valt de browser terug op de bronformaten in de lijst om de breedte te bepalen, vervolgens op de width/height-attributen die op het element zijn gedefinieerd, en ten slotte op de standaard intrinsieke grootte voor <img>-elementen die is gedefinieerd in het stylesheet van de user agent (300px bij 150px).

    Voor betere achterwaartse compatibiliteit met browsers die auto niet ondersteunen, kun je terugvalformaten na auto in het sizes-attribuut opnemen. Je zou ook de width- en height-attributen van het element moeten instellen op de intrinsieke afmetingen van de grootste afbeelding in je srcset, zodat de browser ruimte kan reserveren met de juiste beeldverhouding:

    HTMLKopieer code

    <img
      loading="lazy"
      width="200"
      height="200"
      sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
      srcset="
        swing-200.jpg   200w,
        swing-400.jpg   400w,
        swing-800.jpg   800w,
        swing-1600.jpg 1600w
      "
      src="swing-400.jpg"
      alt="Kettlebell Swing" />

• als terugval voor browsers die srcset niet ondersteunen.
• als srcset de "x"-descriptor gebruikt, dan is src gelijkwaardig aan een bron met de dichtheidsdescriptor 1x; dat wil zeggen, de door src opgegeven afbeelding wordt gebruikt op schermen met een lage pixeldichtheid (zoals gebruikelijke 72 DPI- of 96 DPI-schermen).

Een of meer door komma's gescheiden strings, die mogelijke afbeeldingsbronnen aangeven die de user agent kan gebruiken.

Elke string bestaat uit:

1. Een URL naar een afbeelding
2. Optioneel, witruimte gevolgd door een van de volgende:
   • Een breedtedescriptor (een positief geheel getal direct gevolgd door w). Deze moet overeenkomen met de intrinsieke breedte van de gerefereerde afbeelding. De breedtedescriptor wordt gedeeld door het bronformaat dat is opgegeven in het sizes-attribuut om de effectieve pixeldichtheid te berekenen. Gebruik bijvoorbeeld de breedtedescriptor 450w om een afbeeldingsbron op te geven die gebruikt moet worden wanneer de renderer een 450 pixel brede afbeelding nodig heeft. Wanneer een srcset "w"-descriptoren bevat, gebruikt de browser die descriptoren samen met het sizes-attribuut om een bron te kiezen.
   • Een pixeldichtheidsdescriptor (een positief drijvendekommagetal direct gevolgd door x). Deze specificeert de voorwaarde waaronder de bijbehorende afbeeldingsbron gebruikt moet worden als de pixeldichtheid van het scherm. Gebruik bijvoorbeeld de pixeldichtheidsdescriptor 2x of 2.0x om een afbeeldingsbron op te geven die gebruikt moet worden wanneer de pixeldichtheid dubbel de standaarddichtheid is.

Als er geen descriptor is opgegeven, krijgt de bron de standaarddescriptor 1x. Het is onjuist om breedtedescriptoren en pixeldichtheidsdescriptoren te mengen in hetzelfde srcset-attribuut. Dubbele descriptoren (bijvoorbeeld twee bronnen in dezelfde srcset die beide met 2x zijn beschreven) zijn ook ongeldig.

Spatietekens, anders dan de witruimte die de URL van de bijbehorende conditiedescriptor scheidt, worden genegeerd; dit geldt zowel voor voorloop- als volgspaties, als voor spaties vóór of na elke komma. Als een afbeeldingskandidaat-string echter geen descriptoren en geen witruimte na de URL bevat, moet de volgende afbeeldingskandidaat-string, indien aanwezig, beginnen met een of meer witruimtetekens, anders wordt de komma als onderdeel van de URL beschouwd.

Wanneer de srcset van het <img>-element x-descriptoren gebruikt, beschouwen browsers ook de URL in het src-attribuut (indien aanwezig) als een kandidaat, en kennen deze de standaarddescriptor 1x toe. Als het srcset-attribuut daarentegen breedtedescriptoren gebruikt, wordt src niet meegenomen en wordt in plaats daarvan het sizes-attribuut gebruikt.

De user agent kiest naar eigen goeddunken een van de beschikbare bronnen. Dit geeft hen aanzienlijke vrijheid om hun selectie af te stemmen op zaken zoals gebruikersvoorkeuren of bandbreedte-omstandigheden. Zie onze tutorial Responsieve afbeeldingen voor een voorbeeld.

De gedeeltelijke URL (beginnend met #) van een afbeeldingskaart die aan het element gekoppeld is.

• top
  • : Gelijkwaardig aan vertical-align: top of vertical-align: text-top
• middle
  • : Gelijkwaardig aan vertical-align: -moz-middle-with-baseline
• bottom
  • : De standaardwaarde, gelijkwaardig aan vertical-align: unset of vertical-align: initial
• left
  • : Gelijkwaardig aan float: left
• right
  • : Gelijkwaardig aan float: right

Een link naar een meer gedetailleerde beschrijving van de afbeelding. Mogelijke waarden zijn een URL of een element-id.