H2 - Afbeeldingen

• Dit zijn oudere webformaten die je tegenwoordig liever niet meer als eerste keuze gebruikt:
• JPG - RGB - compressie
• GIF - 256 kleuren - animatie
• PNG - RGB - transparantie

• Tegenwoordig gebruik je op websites bij voorkeur:
• WEBP - lossy en lossless compressie - transparantie - animatie
• AVIF - lossy en lossless compressie - transparantie - animatie - ook geschikt voor HDR en bredere kleurweergave
• Deze moderne formaten leveren vaak kleinere bestanden op, waardoor je website sneller laadt.
• WEBP heeft brede browserondersteuning en is vaak een veilige moderne keuze.
• AVIF kan nog kleinere bestanden geven dan WEBP, maar is wat zwaarder om te maken en te bewerken.

• Gebruik liever geen spaties in bestandsnamen en mapnamen. Dat is ongewenst en niet aan te raden.

• Met het <img>-element plaats je een afbeelding op je pagina.
• Het <img>-element heeft geen sluit-tag.
• Bij HTML-elementen kun je een attribuut noemen.
• Attributen worden alleen in de open tag geplaatst.
• Meerdere attributen in een tag zijn met spaties van elkaar gescheiden.
• Het src-attribuut bij <img> verwacht een bestandsnaam en het pad naar de file.

<img src="koning.webp">

• Een attribuut dat verplicht is: het alt-attribuut.
• In het alt-attribuut geef je mee wat je op de afbeelding ziet.
• Hiermee wordt de website beter geschikt voor bijvoorbeeld slechtziende gebruikers.
• Als je geen alt-attribuut gebruikt, krijg je fouten op je pagina en dat is ook ongunstig voor de vindbaarheid in zoekmachines.
• Het title-attribuut is niet verplicht, maar toont een label als je met de muis over de afbeelding gaat.

<img src="koning.webp" alt="Koning met kroon tijdens Koningsdag" title="Koningsdag">

• De attributen width en height zijn niet verplicht, maar kunnen wel handig zijn.
• Ze helpen de browser om alvast ruimte voor de afbeelding te reserveren, waardoor de pagina rustiger laadt.
• Je geeft de waarde van deze attributen op als een getal in pixels.
• Alleen width opgeven mag ook, maar dan kiest de browser meestal automatisch een passende hoogte op basis van de afbeelding.
• Als de hoogte niet bij de breedte past, kan de afbeelding vervormd raken.

<img src="koning.webp" alt="eten-en-amusement" width="400" height="300">

• Afbeeldingen staan vaak in een aparte map, bijvoorbeeld img of images.
• Je moet dan in je HTML aangeven in welke map de afbeelding staat.
• Als je HTML-bestand en je afbeelding niet in dezelfde map staan, moet je door mappen navigeren.
• Begin de route naar de afbeelding, dus het pad, altijd vanaf de plek waar je HTML-bestand met de <img>-tag staat.
• Als er naast je HTML-bestand een map staat die img heet, en daarin zitten je afbeeldingen, dan voeg je eerst de mapnaam toe en daarna de bestandsnaam in het src-attribuut.
• Voor elke map die je dieper gaat, voeg je gewoon de mapnaam toe aan het pad.
• Met ../ ga je één map omhoog.
• Op deze manier maak je een relatief pad, en dat heeft meestal de voorkeur bij het plaatsen van afbeeldingen op een website.

<img src="img/panem-et-circenses.webp" alt="brood-en-spelen">

• Een relatief pad begint vanuit de map van het huidige HTML-bestand.
• Een absoluut pad verwijst vanaf de hoofdmap van de website of vanaf een volledig internetadres.
• Relatieve paden gebruik je vaak binnen je eigen project.
• Absolute paden gebruik je bijvoorbeeld bij een afbeelding die al online staat.

<img src="img/kerstboom.jpg" alt="Relatief pad">

<img src="https://example.com/img/pasen.jpg" alt="Absoluut pad">

• Bij HTML-nieuwsbrieven kun je in de praktijk alleen absolute paden gebruiken, omdat je geen losse afbeeldingen met de e-mail kunt meesturen zoals bij een gewone website.
• De afbeeldingen die in de nieuwsbrief staan, moeten daarom eerst online gepubliceerd zijn voordat de nieuwsbrief wordt verstuurd.