Markdown Afbeeldingen

Afbeeldingen maken je inhoud boeiender en helpen je punten te illustreren. Markdown biedt eenvoudige syntax voor het toevoegen van afbeeldingen, hoewel je soms HTML nodig hebt voor meer geavanceerde functies.

Basis Afbeelding Syntax

De basissyntax voor afbeeldingen in Markdown is vergelijkbaar met links, maar met een uitroepteken aan het begin: 

![Alt tekst](afbeelding-url.jpg)
![Lokale afbeelding](./images/foto.jpg)
![Externe afbeelding](https://example.com/afbeelding.jpg)

Afbeeldingen met Titels

Je kunt titels toevoegen die verschijnen wanneer gebruikers over de afbeelding zweven: 

![Alt tekst](afbeelding.jpg "Afbeelding titel")

Alt Tekst Beste Praktijken

Alt tekst is cruciaal voor toegankelijkheid en SEO:

1. Wees Beschrijvend

❌ Niet behulpzaam: 

![Afbeelding](foto.jpg)
![Plaatje](pic.png)

✅ Beschrijvend: 

![Vrouw aan het programmeren op laptop in café](programmeren-café.jpg)
![Staafdiagram met verkoopcijfers van 2020 tot 2024](verkoop-grafiek.png)

2. Houd Het Beknopt

❌ Te lang: 

![Dit is een heel lange beschrijving van een afbeelding die een persoon laat zien die aan een computer zit in wat een moderne kantooromgeving lijkt met witte muren en grote ramen](kantoor.jpg)

✅ Beknopt: 

![Persoon werkend aan computer in modern kantoor](kantoor.jpg)

3. Vermijd "Afbeelding van" of "Plaatje van"

❌ Overbodig: 

![Afbeelding van een hond spelend in het park](hond.jpg)

✅ Direct: 

![Hond spelend in het park](hond.jpg)

Referentie-Stijl Afbeeldingen

Net als links kun je referentie-stijl syntax gebruiken voor afbeeldingen: 

![Alt tekst][afbeelding-referentie]  

[afbeelding-referentie]: afbeelding.jpg "Optionele titel"

Voorbeeld

Hier is ons logo: ![Bedrijfslogo][logo]

En hier is een screenshot: ![App Screenshot][screenshot]

[logo]: /images/logo.png "Mijn Bedrijfslogo"
[screenshot]: /images/app.png "App Dashboard Screenshot"

Afbeelding Paden en URL's

Lokale Afbeeldingen

![Lokale afbeelding](./images/foto.jpg)
![Relatief pad](../assets/icoon.png)
![Absoluut pad](/public/images/banner.jpg)

Externe Afbeeldingen

![Externe afbeelding](https://example.com/afbeelding.jpg)
![Unsplash foto](https://images.unsplash.com/photo-123/foto.jpg)

Veelgebruikte Patronen

Afbeelding met Bijschrift

![Teammeeting in vergaderruimte](meeting.jpg)
*Figuur 1: Wekelijkse teammeeting met bespreking van projectmijlpalen*

Voor/Na Afbeeldingen

## Voor
![Oud website ontwerp](oud-ontwerp.png)

## Na
![Nieuw website ontwerp](nieuw-ontwerp.png)

Stap-voor-Stap Instructies

1. Klik op het instellingen icoon
   ![Instellingen icoon rechts bovenin](instellingen-icoon.png)

2. Selecteer "Account Instellingen"
   ![Account instellingen menu optie](account-menu.png)

3. Werk je profielinformatie bij
   ![Profielformulier met bewerkbare velden](profiel-formulier.png)

Afbeelding Galerij

## Project Screenshots

![Startpagina](startpagina.png) ![Dashboard](dashboard.png) ![Instellingen](instellingen.png)

Problemen Oplossen met Afbeeldingen

Veelvoorkomende Problemen

  1. Afbeelding wordt niet weergegeven: Controleer bestandspad en bestandsnaam

  2. Gebroken afbeelding icoon: Verifieer dat afbeelding URL toegankelijk is
  3. Afbeelding te groot: Verklein of comprimeer de afbeelding
  4. Verkeerd formaat: Zorg dat browser het afbeeldingsformaat ondersteunt

Afbeeldingen Testen

  • •
    Voorbeeld in je Markdown editor

  • •
    Controleer in verschillende browsers
  • •
    Verifieer op mobiele apparaten
  • •
    Test met langzame internetverbindingen

Geavanceerde Technieken

Afbeelding Links

Combineer afbeeldingen met links: 

[![Klik om groter te bekijken](thumbnail.jpg)](volledige-grootte.jpg)

Afbeeldingen zijn een krachtige manier om je Markdown documenten te verbeteren. Gebruik ze doordacht om je inhoud te ondersteunen en gebruikerservaring te verbeteren!

Moet je tekst benadrukken in je inhoud? Leer over doorhaal opmaak als volgende.