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

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 voor gewoon JavaScript, React of Vue: TypeScript, Babel, CSS of Sass, afbeeldingen, HtmlWebpackPlugin, een devserver en de npm install-regel.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Decimaal naar hexadecimaal converter

Voer een decimaal geheel getal in en ontvang direct de hexadecimale waarde, inclusief negatieve waarden als 64-bits tweecomplement.

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.

JSON-editor online

Bewerk JSON lokaal in de browser, bekijk de opgemaakte structuur, formatteer of minimaliseer tekst, sorteer sleutels en download een JSON-bestand.

Tool beschikbaar in andere talen