05. afbeeldingen
<figure>
De <figure> en <figcaption> elementen zijn twee nieuwe elementen in HTML5. Ze werden geïntroduceerd in HTML5 om illustraties zoals afbeeldingen, video's, codeblokken, svg, canvas, …, samen met een bijschrift als een geheel te kunnen identificeren. Kwestie van de juiste semantiek dus.
Met het <figcaption> element kan je een bijschrift plaatsen bij de illustratie. Dit is dus een aanvulling en geen vervanging van het alt of title attribuut.
Ook moet niet elke afbeelding in een <figure> staan met een <figcaption> als bijschrift. Het kan gebruikt worden om illustraties die meer uitleg vragen, verder toe te lichten.
De voordelen:
HTML code wordt semantisch. Het
<figure>element identificeert illustraties met hun bijschrift.Het
<figure>element kan ook meerdere afbeeldingen bevatten met één<figcaption>die een algemene omschrijving geeft van alle afbeeldingen.
try it youself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_figcaption
Afbeeldingen plaats je op een pagina met behulp van het <img> element. Voor het <img> element zijn er vele attributen beschikbaar.
Het src attribuut bepaalt welke afbeelding moet worden geladen. Het srcattribuut kan een absolute of een relatieve verwijzing bevatten. Met het alt attribuut geef je een omschrijving op, die in de plaats van de afbeelding wordt weergegeven in tekst-georiënteerde browsers, voor bijvoorbeeld slechtzienden. Het titleattribuut wordt dan weer gebruikt om meer informatie over de afbeelding weer te geven.
De plaatsing van het <img>element bepaalt veel over hoe de afbeelding zal worden weergegeven op de website. We gaan dit echter later leren beïnvloeden met CSS.
formaten
Afbeeldingen bestaan in verschillende formaten en afmetingen. Het is van groot belang om goed na te denken over welk formaat van afbeelding je nodig hebt op jouw website. Dit is voor elke afbeelding telkens weer nodig.
De meest voorkomende afbeeldingsformaten op het web zijn: jpg, jpeg, png, gif en svg.
afmetingen
Afbeeldingen moeten groot genoeg worden opgeslagen om correct te worden weergegeven op grotere schermen. Een grotere afbeelding zal echter trager laden, waardoor jouw website over het algemeen trager zal worden ervaren. Het is dus belangrijk om een goed evenwicht te vinden tussen de afmetingen van de afbeelding en de bestandsgrootte ervan.
rechtenvrije afbeeldingen
Pexels: https://www.pexels.com/nl-nl/
Unplash: https://unsplash.com
Burst: https://burst.shopify.com
Pixabay: https://pixabay.com/nl/
123RF: https://nl.123rf.com
Last updated