Hoe je afbeeldingen toevoegt in Markdown

Wanneer je een website bezoekt, valt het meteen op dat afbeeldingen pagina’s aantrekkelijker en visueel interessanter maken. Als content alleen uit tekst zou bestaan, zou deze saai en eentonig aanvoelen. Visuele elementen helpen gebruikers om informatie beter te begrijpen en te onthouden en maken de interface gebruiksvriendelijker.

Markdown is een eenvoudige en gebruiksvriendelijke opmaaktaal waarmee je met minimale inspanning tekst kunt schrijven. Het wordt veel gebruikt voor documentatie, artikelen en blogposts. Markdown maakt het ook mogelijk om afbeeldingen toe te voegen, wat een cruciale rol speelt bij het visualiseren van content en deze helderder en memorabeler maakt.

Belangrijke methoden om afbeeldingen toe te voegen

Link kopiëren

Er zijn twee hoofdmethoden om afbeeldingen in Markdown te gebruiken: lokale afbeeldingen en externe links.

Lokale afbeeldingen

Link kopiëren

Om lokaal opgeslagen afbeeldingen toe te voegen, moet het bestandspad correct worden opgegeven. Het wordt aangeraden afbeeldingen in dezelfde map als het Markdown-bestand of op hetzelfde hiërarchische niveau te bewaren.

Als de afbeelding in dezelfde map staat als het .md-bestand, volstaat de bestandsnaam:

• 

Als de afbeelding zich in een submap bevindt (bijvoorbeeld /img):

• 

De tekst tussen vierkante haken ([Computer]) is de alt-tekst. Deze wordt weergegeven wanneer de afbeelding niet geladen kan worden en helpt schermlezers de afbeelding te beschrijven voor slechtziende gebruikers.

Het afbeeldingspad staat tussen haakjes. Controleer dit goed om problemen met de weergave te vermijden wanneer de content op een server wordt geplaatst.

Externe afbeeldingen

Link kopiëren

Om een afbeelding via internet toe te voegen, gebruik je de URL:

• 

Voordelen van externe afbeeldingen:

• Bespaart opslagruimte in het repository

• Handig bij afbeeldingen die vaak worden bijgewerkt

Nadelen:

• Afhankelijkheid van de externe bron

• Als de afbeelding wordt verwijderd of de URL verandert, wordt de afbeelding niet meer weergegeven

Afbeeldingsgrootte

Link kopiëren

Standaard Markdown ondersteunt geen instellingen voor afbeeldingsgrootte (met uitzondering van sommige platforms zoals GitHub). Je kunt hiervoor HTML gebruiken:

• <img src="/img/computer.png" alt="Computer" width="500" height="300">

Uitgebreide opmaak

Link kopiëren

Uitgebreide opmaak helpt om aandacht te trekken en maakt de content toegankelijker en gemakkelijker te lezen.

Onderschrift bij een afbeelding

Link kopiëren

Onderschriften bieden extra informatie aan de lezer:

• 

Klikbare afbeelding

Link kopiëren

Om van een afbeelding een klikbare link te maken, plaats je de afbeelding binnen een link:

• [](https://site)

Effectieve alt-tekst

Link kopiëren

De alt-tekst moet de afbeelding duidelijk beschrijven zodat alle gebruikers deze kunnen begrijpen.

Slechte alt-tekst:

• 

Goede alt-tekst:

• 

Waarom is alt-tekst belangrijk?

Link kopiëren

Toegankelijkheid:
Schermlezers lezen alt-teksten voor mensen met een visuele beperking.

SEO:
Zoekmachines indexeren alt-teksten, waardoor de content beter vindbaar wordt.

Tips voor het werken met afbeeldingen

Link kopiëren

• Gebruik zo klein mogelijke afbeeldingsbestanden om de laadtijd te verbeteren.

• Optimaliseer afbeeldingen vóór het uploaden.

• Zorg dat de alt-tekst uniek en nauwkeurig is.

• De bestandsnaam moet relevant zijn en zoekwoorden bevatten.
  Bijvoorbeeld: gebruik computer-setup.png in plaats van img123.png.

Methoden voor het invoegen van afbeeldingen — vergelijking

Link kopiëren

Conclusie

Link kopiëren

Je weet nu hoe je afbeeldingen in Markdown invoegt, hun grootte aanpast, onderschriften toevoegt en de toegankelijkheid verbetert met alt-tekst. Afbeeldingen maken je content visueler en helpen lezers informatie beter te verwerken.

Bekijk ook onze betrouwbare en krachtige WordPress-hostingoplossingen voor jouw WordPress-websites.