Afbeeldingen

Een schermafbeelding zegt vaak meer dan een alinea. Op deze pagina zie je hoe je ze plaatst, hoe groot ze worden en hoe je er tekst omheen laat lopen.

Waar de afbeeldingen staan

Elke map in docs/ heeft een eigen map afbeeldingen/. Een schermafbeelding komt in de map van het deel waar hij gebruikt wordt:

docs/deelnemers/
├── aanbod.md
└── afbeeldingen/
    ├── aanbod.png
    └── aanbod-telefoon.png

Geef bestanden een Nederlandse naam in kleine letters, met streepjes: aanbod-telefoon.png, niet Screenshot 2026-09-29 at 15.47.png.

Een afbeelding plaatsen

ResultaatMarkdown

![Het aanbod op de computer](afbeeldingen/aanbod.png)

Tussen de rechte haken staat de beschrijving: die leest een schermlezer voor en die zie je als de afbeelding niet laadt. Schrijf dus wat er te zien is, niet afbeelding of screenshot.

Het pad

Het pad gaat uit van de pagina waar je schrijft. Op deelnemers/aanbod.md is dat afbeeldingen/aanbod.png. Op deze pagina, in een andere map, staat er ../deelnemers/afbeeldingen/aanbod.png: .. betekent één map omhoog.

Een rand eromheen

Een witte pagina van EventOps valt weg tegen de witte achtergrond van deze site. Geef schermafbeeldingen daarom de klasse schermafbeelding: een dunne rand met ronde hoeken.

ResultaatMarkdown

![Het aanbod op de computer](afbeeldingen/aanbod.png){ .schermafbeelding }

Tussen de accolades zet je extra's voor de afbeelding: een klasse met een punt ervoor, en eigenschappen als width. Dat kan bij bijna alles, niet alleen bij afbeeldingen.

De grootte

Zonder breedte wordt een afbeelding zo breed als de tekst. Met width maak je hem kleiner:

ResultaatMarkdown

![De inlogpagina](afbeeldingen/inloggen.png){ .schermafbeelding width="400" }

Tekst eromheen laten lopen

Met align=right (of align=left) staat de afbeelding aan de kant en loopt de tekst ernaast door. Handig voor een smalle schermafbeelding van een telefoon.

ResultaatMarkdown

Op de telefoon staan de bijeenkomsten onder elkaar, en de filters erboven. Tik op Inschrijven om een plek te kiezen.

Deze tekst staat links van de afbeelding. Is de tekst korter dan de afbeelding, dan begint de volgende kop pas onder de afbeelding.

![Het aanbod op de telefoon](afbeeldingen/aanbod-telefoon.png){ .schermafbeelding width="200" align=right }

Op de telefoon staan de bijeenkomsten onder elkaar, en de filters erboven. Tik op
**Inschrijven** om een plek te kiezen.

Met een onderschrift

Een onderschrift maak je met <figure>. Let op markdown="span": zonder dat werkt de Markdown erin niet.

ResultaatMarkdown

Het venster waarmee je een nieuwe gebruiker uitnodigt.

<figure markdown="span">
  ![Het venster Uitnodigen](afbeeldingen/uitnodigen.png){ .schermafbeelding width="600" }
  <figcaption>Het venster waarmee je een nieuwe gebruiker uitnodigt.</figcaption>
</figure>

Licht en donker

Deze site heeft een lichte en een donkere modus (de knop in de kop). Heb je van een scherm twee versies, zet dan #only-light en #only-dark achter de bestandsnaam. De lezer ziet dan de versie die bij zijn modus past. Probeer het: zet de site op donker en kijk hieronder.

ResultaatMarkdown

![Het aanbod](afbeeldingen/aanbod.png#only-light){ .schermafbeelding }
![Het aanbod](afbeeldingen/aanbod-donker.png#only-dark){ .schermafbeelding }

Eén versie is ook prima; kies dan de lichte.

Goede schermafbeeldingen maken

• Breedte 1280 pixels voor de computer, 390 pixels voor de telefoon.
• Alleen testgegevens: log in met een testaccount, zodat er nooit een echte naam, een echt e-mailadres of een echt bedrag op staat.
• Het hele scherm, met het menu erbij, zodat de lezer ziet waar hij is. Snij alleen bij als het om één venster gaat.
• PNG, geen JPG: tekst blijft scherp.
• Geen pijlen of kaders erin tekenen; zeg in de tekst waar het om gaat. Verandert het scherm, dan maak je gewoon een nieuwe schermafbeelding.

Snel een schermafbeelding van één stuk

In Chrome en Edge: F12 opent de ontwikkelhulpmiddelen, Ctrl+Shift+P opent de opdrachten, en Capture node screenshot maakt een afbeelding van precies het element dat je hebt aangeklikt.