HTML
Afbeeldingen

Syntaxis

• <img src="" alt="">

parameters

Een afbeelding maken

Gebruik de afbeeldingstag om een afbeelding aan een pagina toe te voegen.

Afbeeldingstags ( img ) hebben geen sluitingstags. De twee belangrijkste kenmerken die u aan de img tag geeft, zijn src , de afbeeldingsbron en alt , dit is alternatieve tekst die de afbeelding beschrijft.

<img src="images/hello.png" alt="Hello World">

U kunt ook afbeeldingen krijgen van een web-URL:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Opmerking: afbeeldingen worden technisch niet ingevoegd in een HTML-pagina, afbeeldingen worden gekoppeld aan HTML-pagina's. De tag <img> creëert een opslagruimte voor de afbeelding waarnaar wordt verwezen.

Het is ook mogelijk om afbeeldingen rechtstreeks in de pagina in te sluiten met base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Tip: om een afbeelding aan een ander document te koppelen, nestelt u eenvoudig de <img> tag in <a> tags.

Beeldbreedte en -hoogte

Opmerking: de breedte- en hoogtekenmerken zijn niet verouderd op afbeeldingen en zijn dat nooit geweest. Het gebruik ervan is echter veel strenger gemaakt.

De afmetingen van een beeld kan worden opgegeven met de width en height attributen van de afbeeldingstag:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Door de width en height van een afbeelding op te geven, geeft uw structuur de browser een hint over hoe de pagina moet worden ingedeeld, zelfs als u alleen de werkelijke afbeeldingsgrootte opgeeft. Als de afbeeldingsafmetingen niet zijn opgegeven, moet de browser de lay-out van de pagina opnieuw berekenen nadat de afbeelding is geladen, waardoor de pagina kan "springen" tijdens het laden.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Alt-tekst kiezen

Alt-tekst wordt gebruikt door schermlezers voor slechtziende gebruikers en door zoekmachines. Het is daarom belangrijk om goede alt-tekst voor uw afbeeldingen te schrijven.

De tekst moet er correct uitzien, zelfs als u de afbeelding vervangt door het alt-kenmerk. Bijvoorbeeld:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Zonder de afbeeldingen zou dit er als volgt uitzien:

Anonieme gebruiker avatar Een anonieme gebruiker schreef:

Lorem ipsum dolor sed.

Pictogram Bewerken / Pictogram Verwijderen

Om dit te corrigeren:

• Verwijder de alt-tekst voor de avatar. Deze afbeelding voegt informatie toe voor ziende gebruikers (een gemakkelijk identificeerbaar pictogram om aan te tonen dat de gebruiker anoniem is) maar deze informatie is al beschikbaar in de tekst. ¹
• Verwijder het "pictogram" uit de alt-tekst voor de pictogrammen. Wetende dat dit een pictogram zou zijn als het er was, helpt niet om het werkelijke doel ervan over te brengen.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Een anonieme gebruiker schreef:

Lorem ipsum dolor sed.

Bewerken / Verwijderen

voetnoten

¹ Er is een semantisch verschil tussen het opnemen van een leeg alt-kenmerk en het helemaal uitsluiten. Een leeg alt-kenmerk geeft aan dat de afbeelding geen belangrijk onderdeel van de inhoud is (zoals in dit geval het geval is - het is gewoon een additieve afbeelding die niet nodig is om de rest te begrijpen) en dus kan worden weggelaten uit weergave. Echter, het ontbreken van een alt attribuut geeft aan dat het beeld is een belangrijk onderdeel van de inhoud en dat er gewoon geen tekstuele gelijkwaardig beschikbaar voor rendering.

Responsieve afbeelding met het srcset-kenmerk

Gebruik srcset met maten

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes zijn vergelijkbaar met mediaquery's die beschrijven hoeveel ruimte de afbeelding inneemt van de viewport.

• Als de viewport groter is dan 1200 px, is de afbeelding exact 580 px (onze inhoud is bijvoorbeeld gecentreerd in een container die maximaal 1200 px breed is. Afbeelding neemt de helft ervan minus marges in).
• als de viewport tussen 640 px en 1200 px ligt, neemt de afbeelding 48% van de viewport in (bijvoorbeeld de afbeelding wordt op onze pagina geschaald en neemt de helft van de viewport-breedte minus marges).
• als viewport een andere grootte heeft, in ons geval minder dan 640 px, neemt de afbeelding 98% van de viewport in (bijvoorbeeld afbeeldingsschalen met onze pagina en neemt de volledige breedte van viewport minus marges in). Mediavoorwaarde moet voor het laatste item worden weggelaten.

srcset vertelt de browser alleen welke afbeeldingen we beschikbaar hebben en wat hun afmetingen zijn.

• img/hello-300.jpg is 300 px breed,
• img/hello-600.jpg is img/hello-600.jpg breed,
• img/hello-900.jpg is 900 px breed,
• img/hello-1200.jpg is 1200 pixels breed

src is altijd een verplichte afbeeldingsbron. In het geval van gebruik met srcset , zal src fallback-afbeelding weergeven als de browser srcset niet ondersteunt.

Gebruik srcset zonder maten

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset biedt een lijst met beschikbare afbeeldingen, met apparaat-pixelverhouding x descriptor.

• als apparaat-pixelverhouding 1 is, gebruik dan img/hello-300.jpg
• als apparaat-pixelverhouding 2 is, gebruik dan img/hello-600.jpg
• als apparaat-pixelverhouding 3 is, gebruik dan img/hello-1200.jpg

src is altijd een verplichte afbeeldingsbron. In het geval van gebruik met srcset , zal src fallback-afbeelding weergeven als de browser srcset niet ondersteunt.

Responsieve afbeelding met behulp van afbeeldingselement

Code

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

Gebruik

Als u verschillende afbeeldingen onder een verschillende schermbreedte wilt weergeven, moet u alle afbeeldingen met de brontag in een afbeeldingstag opnemen, zoals in het bovenstaande voorbeeld.

Resultaat

• Op schermen met een schermbreedte> 600 px, wordt large_image.jpg weergegeven
• Op schermen met een schermbreedte> 450 px, wordt small_image.jpg weergegeven
• Op schermen met een andere schermbreedte wordt default_image.jpg weergegeven