Markdown bilder: Så lägger du in en bild i texten

En bild i Markdown skrivs med ett utropstecken, klammerparentes med alternativtext och en vanlig parentes med webbadressen till bilden: . Det är hela metoden. Publicering är ett verktyg för att publicera en sida direkt: klistra in titel och Markdown och få en live-länk på sekunden. Då behöver du veta hur en bild sätts in, så att sidan blir mer än bara text.

Den här artikeln visar hur du lägger in en bild i Markdown, vilken alternativtext som behövs, hur du gör bilden klickbar och vilka misstag som är vanligast.

Vad Markdown är

Markdown är ett märkspråk för ren text som sedan kan konverteras till många olika format, till exempel HTML, PDF och Word-filer. Syftet är att texten ska vara lättläst även innan den konverteras, och samtidigt kunna bli strukturerad, rik text. Var man i HTML skriver <h1>Rubriktext</h1> med start- och sluttaggar, skriver man # Rubriktext i Markdown. [Källa: https://sv.wikipedia.org/wiki/Markdown]

Markdown skapades av John Gruber 2004 och finns i flera varianter, till exempel CommonMark, Markdown Extra, Pandoc Markdown och GitHub Flavored Markdown. Gemensamt för dem alla är att de tar ren text och gör om den till ett mer strukturerat format. Det är just det som gör Markdown användbart för webpublicering: du skriver i en enkel textredigerare och får ett publiceringsklart resultat.

Så ser bildsyntaxen ut

En bild i Markdown ser nästan ut som en länk, men med ett utropstecken framför:

Delarna är tre:

• Utropstecknet (!) säger åt Markdown-tolken att det är en bild, inte en länk. Utan utropstecknet blir det en vanlig textlänk.
• Klammerparenteserna ([ ]) innehåller alternativtexten, alltså en kort beskrivning av bilden.
• De vanliga parenteserna (( )) innehåller webbadressen till bilden, så att läsarens webbläsare vet var den ska hämtas.

Ett fullt exempel:

Webbadressen kan vara absolut (hela adressen med https://) eller relativ (en adress i förhållande till den sida som publiceras). En absolut adress fungerar oavsett var sidan ligger; en relativ adress bryts om bilden eller sidan flyttar.

Alternativtexten är viktigare än du tror

Alternativtexten i klammerparenteserna har två uppgifter. För det första visas den om bilden av någon anledning inte går att ladda. För det andra läser skärmläsare upp den för personer med nedsatt syn, så att de förstår vad bilden visar även om de inte kan se den.

Beskriv vad bilden föreställer, inte filnamnet. Dåligt: . Bra: . Ju mer specifik alternativtexten är, desto bättre är det för både tillgänglighet och för den som råkar hamna på en sida där bilden inte syns.

Gör bilden till en klickbar länk

Om du vill att bilden själv ska vara klickbar sätter du bildsyntaxen inom vanliga länkparenteser:

Då blir hela bilden en länk till https://exempel.se/galleri. Besökaren kan klicka på bilden och tas vidare till ett galleri, en produktbild i stort format eller en annan sida. Det är ett smidigt sätt att kombinera bild och länk utan att behöva skriva separat text.

Storlek och placering

Vanlig Markdown har inget sätt att styra bildens storlek eller placering. Syntaxen bestämmer bara att en bild ska visas på den platsen i texten. Behöver du en mindre bild, en centrerad bild eller text som löper runt bilden får du använda HTML eller CSS på den plats där sidan publiceras.

Det är en medveten begränsning i Markdown. Märkspråket är byggt för att vara enkelt och läsbart i ren text, inte för att vara ett helt layoutverktyg. Om du behöver exakt kontroll över hur bilden ser ut på sidan får du komplettera med annan kod där publiceringen sker.

Vanliga misstag

Här är de vanligaste felen när man lägger in en bild i Markdown:

• Felaktig bildadress. Kontrollera att webbadressen är helt skriven och att den pekar på själva bildfilen, inte på sidan bilden ligger på. Adressen brukar sluta på .jpg, .png, .gif eller .webp.
• Saknat utropstecken. Skriver du alternativtext istället för blir det en länk, inte en bild.
• Mellanslag direkt efter utropstecknet. fungerar inte; det får inte finnas något mellanrum mellan ! och [.
• Glömda parenteser. Både klammerparenteserna för alternativtexten och de vanliga parenteserna för adressen måste vara med.

Steg-för-steg: lägg in en bild i Publicering

Så här gör du när du publicerar en sida med Publicering:

1. Spara bilden på en webbplats eller i en tjänst som ger en direkt länk till bildfilen. Det räcker inte att bilden ligger på din dator; den måste finnas på webben med en egen adress.
2. Kopiera webbadressen till bilden, inte till sidan bilden ligger på. Högerklicka på bilden och välj "Kopiera bildadress" eller motsvarande.
3. Klistra in syntaxen på den plats i texten där du vill ha bilden.
4. Förhandsgranska sidan så att bilden visas och att alternativtexten stämmer.
5. Publicera sidan och få en live-länk på sekunden.

När du klistrar in hela sidan i Publicering, titel och Markdown tillsammans, omvandlas texten direkt till en publicerad webbsida. Bilderna visas på samma sätt som övrigt innehåll, så länge adresserna till dem är korrekta.

Frågor och svar

Fungerar Markdown-bilder överallt?

De flesta Markdown-tolkar stöder bilder, men det finns enklare varianter som hanterar det annorlunda eller inte alls. Om du är osäker, testa syntaxen i den publiceringstjänst du använder.

Kan jag ändra storlek på bilden direkt i Markdown?

Nej, inte med ren Markdown. Storlek och placering styrs med HTML eller CSS där sidan publiceras.

Måste bilden ha en webbadress?

Ja. Markdown laddar inte upp bilden åt dig; den visar bara bilden på den adress du anger. Bilden måste alltså finnas på webben innan du kan bädda in den.

Vad händer om webbadressen till bilden ändras?

Då visas inte längre bilden på din sida, även om texten i övrigt är kvar. Kontrollera då och då att adresserna fortfarande fungerar, särskilt om du länkar till bilder på andras webbplatser.

Länkar på den här sidan

Om du vill läsa mer om grunderna har vi skrivit Vad är Markdown? Enkel guide och Omfattande Markdown syntax guide för webbpublicering. Båda artiklarna finns på den här webbplatsen och utgör en bra startpunkt om du är ny på Markdown.