Softonic

Markdown-afbeeldingsgenerator

Stap 1 / 3
Volgende

De afbeeldingssyntaxis van Markdown, ![alt](src "title"), is snel verkeerd geschreven: een haakje vergeten, geen alt-tekst opgeven of ze verwarren met de linksyntaxis, en je document toont een kapotte plaatsaanduiding. Deze generator neemt de afbeeldings-URL, de alt-tekst, een optionele titel en een optioneel linkdoel, en levert zowel de inline- als de referentievariant van Markdown, zodat je de juiste in je document plakt.

Zo genereer je de Markdown-afbeeldingssyntaxis

  1. 1

    Plak de afbeeldings-URL

    Absolute URL (https://...) of relatief pad (/images/hero.png).

  2. 2

    Schrijf de alt-tekst

    Wat de afbeelding toont, in één zin. Vereist voor toegankelijkheid.

  3. 3

    Voeg een titel toe (optioneel)

    Wordt in de meeste renderers getoond bij het zweven met de muis.

  4. 4

    Verpak in een link (optioneel)

    Geef een URL op om de afbeelding klikbaar te maken.

  5. 5

    Kopieer het fragment

    Krijg de inline-uitvoer `![alt](src)` of de referentiestijl `![alt][ref]`.

De vier syntaxisvarianten

Inline, zonder titel:

![Hoofdafbeelding van het product](/images/hero.png)

Inline, met titel:

![Hoofdafbeelding](/images/hero.png "Hoofdafbeelding gemaakt in oktober 2026")

Klikbare afbeelding (afbeelding verpakt in een link):

[![Hoofdafbeelding](/images/hero.png)](https://example.com/buy)

Referentiestijl (houdt lange URL’s buiten de alinea):

![Hoofdafbeelding][hero]

[hero]: /images/hero.png "Hoofdafbeelding gemaakt in oktober 2026"

Alt-tekst is belangrijk

  • Toegankelijkheid. Schermlezers lezen de alt-tekst voor; een lege alt-tekst maakt de afbeelding feitelijk onzichtbaar voor een slechtziende gebruiker.
  • SEO. Zoekmachines gebruiken de alt-tekst om de inhoud van de afbeelding te begrijpen. Een ontbrekende alt-tekst schaadt het verkeer uit de afbeeldingszoekresultaten.
  • Nette degradatie. Als de afbeelding niet laadt, is de alt-tekst wat gebruikers zien.

Goede en slechte alt-tekst

Bedoeling Goede alt-tekst Slechte alt-tekst
Productfoto “Rode keramische mok op een houten bureau, oor naar links” “Afbeelding van een mok”
Screenshot “Inlogpagina met e-mail, wachtwoord en SSO-knoppen” “screenshot.png”
Decoratief "" (lege alt-tekst voor pure decoratie) “decoratieve afbeelding”
Infographic “Staafdiagram: de omzet groeide van € 1 mln in 2023 naar € 3 mln in 2026” “staafdiagram”

Valkuilen

  • Begin de alt-tekst niet met “Afbeelding van”, schermlezers kondigen die al aan als afbeelding.
  • Absolute versus relatieve paden. Relatieve paden breken wanneer het document buiten zijn map wordt gerenderd (bijvoorbeeld in de voorvertoning van GitHub). Gebruik bij twijfel absolute paden.
  • Spaties in URL’s hebben URL-codering nodig: %20 in plaats van een spatie, anders laadt de afbeelding niet.

Veelgestelde vragen

Niet in puur Markdown. De meeste renderers (GFM, Docusaurus, MkDocs) vallen terug op ruwe HTML voor de afmetingen, <img src="..." width="400" alt="...">. Sommige dialecten ondersteunen ![alt](url =400x), maar dat is niet universeel.

De alt-tekst wordt voorgelezen door schermlezers en verschijnt als de afbeelding faalt. De title is de tooltip die bij het zweven met de muis verschijnt: doorgaans optioneel en genegeerd op touchapparaten.

Wanneer de afbeelding meerdere keren voorkomt, of wanneer de URL lang is en de alinea overhoop haalt. De referentiestijl houdt de tekst leesbaar en maakt van een URL-wijziging één enkele bewerking.

Ja, een afbeelding in een link nesten ([![alt](img)](url)) is standaard CommonMark. De gerenderde uitvoer is een hyperlink die een <img> omhult.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

Changelog-generator

Maak een markdown-sectie in Keep a Changelog-stijl op basis van gecategoriseerde items. Plak de items onder Added, Changed, Fixed en Removed, kies Markdown of platte tekst en kopieer de uitvoer.

Tool beschikbaar in andere talen