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

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

EditorConfig-generator

Generera en .editorconfig-fil med dina regler för indragsstil och -storlek, radslut, teckenuppsättning och blanksteg för enhetlig formatering i alla IDE:er och editorer.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk