Softonic

Markdown-bildgenerator

Steg 1 / 3
Nästa

Markdowns bildsyntax, ![alt](src "title"), är lätt att skriva fel: du missar en parentes, glömmer alt-texten eller blandar ihop den med länksyntaxen, och då visar dokumentet en trasig platshållare. Den här generatorn tar bildens URL, alt-texten, en valfri titel och ett valfritt länkmål och skapar både inline- och referensvarianten av Markdown, så att du klistrar in den som passar ditt dokument.

Så genererar du Markdown-bildsyntax

  1. 1

    Klistra in bildens URL

    Absolut URL (https://...) eller relativ sökväg (/images/hero.png).

  2. 2

    Skriv alt-texten

    Vad bilden visar, i en mening. Krävs för tillgänglighet.

  3. 3

    Lägg till en titel (valfritt)

    Visas vid hovring i de flesta renderare.

  4. 4

    Slå in i en länk (valfritt)

    Ange en URL för att göra bilden klickbar.

  5. 5

    Kopiera kodsnutten

    Få inline-utdata `![alt](src)` eller referensstilen `![alt][ref]`.

De fyra syntaxvarianterna

Inline, utan titel:

![Huvudbild av produkten](/images/hero.png)

Inline, med titel:

![Huvudbild](/images/hero.png "Huvudbild tagen i oktober 2026")

Klickbar bild (bild inslagen i en länk):

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

Referensstil (håller långa URL:er utanför stycket):

![Huvudbild][hero]

[hero]: /images/hero.png "Huvudbild tagen i oktober 2026"

Alt-texten är viktig

  • Tillgänglighet. Skärmläsare läser upp alt-texten; en tom alt-text gör bilden i praktiken osynlig för en synskadad användare.
  • SEO. Sökmotorer använder alt-texten för att förstå bildens innehåll. En saknad alt-text skadar trafiken från bildsök.
  • Snygg nedgradering. Om bilden inte laddas är alt-texten det användarna ser.

Bra och dålig alt-text

Avsikt Bra alt-text Dålig alt-text
Produktfoto “Röd keramikmugg på ett träbord, örat åt vänster” “Bild på en mugg”
Skärmdump “Inloggningssida med e-post, lösenord och SSO-knappar” “screenshot.png”
Dekorativ "" (tom alt-text för ren dekoration) “dekorativ bild”
Infografik “Stapeldiagram: intäkterna ökade från 1 mkr 2023 till 3 mkr 2026” “stapeldiagram”

Fallgropar

  • Inled inte alt-texten med “Bild på”, skärmläsare aviserar den redan som en bild.
  • Absoluta kontra relativa sökvägar. Relativa sökvägar går sönder när dokumentet renderas utanför sin mapp (till exempel i GitHubs förhandsvisning). Använd absoluta sökvägar vid tvekan.
  • Mellanslag i URL:er kräver URL-kodning: %20 i stället för ett mellanslag, annars laddas inte bilden.

Vanliga frågor

Inte i ren Markdown. De flesta renderare (GFM, Docusaurus, MkDocs) faller tillbaka på rå HTML för storleken, <img src="..." width="400" alt="...">. Vissa dialekter stöder ![alt](url =400x), men det är inte universellt.

Alt är texten som läses upp av skärmläsare och visas om bilden inte laddas. Titeln är verktygstipset som dyker upp vid hovring: oftast valfritt och ignoreras på pekskärmar.

När bilden förekommer flera gånger, eller när URL:en är lång och belamrar stycket. Referensstilen håller texten läsbar och gör en URL-ändring till en enda redigering.

Ja, att bädda in en bild i en länk ([![alt](img)](url)) är standard-CommonMark. Den renderade utdatan är en hyperlänk som omsluter ett <img>.

Relaterade verktyg

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

YAML till JSON

Omvandla YAML-konfiguration till JSON för verktyg och API:er som bara accepterar JSON. Hanterar ankare, merge-nycklar och nästlade strukturer.

XML-formaterare

Snygga till XML-dokument med konsekvent indrag och fånga formfel med exakta radnummer.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Verktyget finns på andra språk