De img-tag

De tag img creëert een afbeelding. Het pad naar de afbeelding wordt gespecificeerd in het attribuut src. Vereist geen sluitende tag.

Attributen

Attribuut	Beschrijving
src	Specificeert het pad naar de afbeelding. Verplicht attribuut.
alt	Alternatieve tekst die wordt getoond in plaats van de afbeelding, als deze niet wordt gevonden (bijvoorbeeld door een onjuist pad). Verplicht attribuut. Bij afwezigheid zal de validator (een programma dat de correctheid van HTML of CSS controleert) een fout melden.
width	Breedte van de afbeelding, in pixels (in dit geval worden meeteenheden niet gespecificeerd) of in procenten van de ouder van de afbeelding.
height	Hoogte van de afbeelding, in pixels (in dit geval worden meeteenheden niet gespecificeerd) of in procenten van de ouder van de afbeelding.

Nuances

Als voor een afbeelding noch breedte, noch hoogte is ingesteld - zal de afbeelding haar werkelijke grootte hebben. Als de hoogte is ingesteld - krijgt de afbeelding de opgegeven hoogte, en de breedte past zich aan zodat de verhoudingen niet worden vervormd.

Als alleen de breedte is ingesteld - past de afbeelding op dezelfde manier de hoogte aan, om de verhoudingen te behouden.

Als zowel breedte als hoogte zijn ingesteld - kunnen de verhoudingen van de afbeelding worden vervormd (of misschien niet, afhankelijk van wat u kiest). Als de breedte of hoogte (of beide samen) groter zijn dan de werkelijke grootte - zal de afbeelding vergroten, maar kwaliteit verliezen.

Het wordt aanbevolen om de breedte en hoogte van afbeeldingen in te stellen via attributen (en niet via CSS) - in dit geval laadt de browser afbeeldingen sneller - hij hoeft niet de grootte van elke afbeelding te berekenen na ontvangst.

Het wordt niet aanbevolen om de werkelijke afmetingen van een afbeelding onnodig te verkleinen. Bijvoorbeeld, de werkelijke grootte van een afbeelding is 1000 bij 1000 pixels, en u geeft haar een breedte van 100px. In dit geval zal de afbeelding op het scherm eruitzien als 100 pixels, maar de grootte hebben van de volledige duizend en dienovereenkomstig veel langer laden.

Voorbeeld

Laten we een afbeelding toevoegen aan de website en geen attributen height en width instellen. De afbeelding zal haar werkelijke grootte hebben:

:

Voorbeeld

Laten we proberen de afbeelding een breedte te geven met behulp van het attribuut width, de hoogte moet zich aanpassen om de verhoudingen van de afbeelding te behouden:

:

Voorbeeld

En laten we nu de afbeelding een hoogte geven met behulp van het attribuut height, de breedte past zich aan om de verhoudingen van de afbeelding te behouden:

:

Voorbeeld

Laten we de afbeelding tegelijkertijd zowel hoogte als breedte geven. De verhoudingen van de afbeelding moeten hierdoor vervormd raken (niet noodzakelijkerwijs, maar in dit geval zijn de hoogte en breedte zo gekozen dat de verhoudingen vervormen):

:

Voorbeeld

Laten we een onjuist pad naar de afbeelding instellen (voor de eenvoud laten we het leeg). In plaats van de afbeelding zullen we de inhoud van het attribuut alt zien (het lijkt gewone tekst - maar probeer het maar te kopiëren - het zal niet lukken, het wordt meegesleept als een afbeelding):

:

Zie ook