Markdown Billeder

Billeder gør dit indhold mere engagerende og hjælper med at illustrere dine pointer. Markdown giver simpel syntaks til at tilføje billeder, selvom du nogle gange har brug for HTML til mere avancerede funktioner.

Grundlæggende billede syntaks

Den grundlæggende syntaks for billeder i Markdown ligner links, men med et udråbstegn i begyndelsen: 

![Alt tekst](billede-url.jpg)
![Lokalt billede](./billeder/foto.jpg)
![Eksternt billede](https://example.com/billede.jpg)

Billeder med titler

Du kan tilføje titler, der vises, når brugere holder musen over billedet: 

![Alt tekst](billede.jpg "Billede titel")

Alt tekst bedste praksis

Alt tekst er afgørende for tilgængelighed og SEO:

1. Vær beskrivende

❌ Ikke hjælpsomt: 

![Billede](foto.jpg)
![Billede](pic.png)

✅ Beskrivende: 

![Kvinde der koder på en laptop i en kaffebar](kodning-kaffe.jpg)
![Søjlediagram der viser salgsstigning fra 2020 til 2024](salgs-diagram.png)

2. Hold det kortfattet

❌ For langt: 

![Dette er en virkelig lang beskrivelse af et billede, der viser en person, der sidder ved en computer i hvad der ligner et moderne kontormiljø med hvide vægge og store vinduer](kontor.jpg)

✅ Kortfattet: 

![Person der arbejder ved computer i moderne kontor](kontor.jpg)

3. Inkluder ikke "Billede af" eller "Foto af"

❌ Redundant: 

![Billede af en hund der leger i parken](hund.jpg)

✅ Direkte: 

![Hund der leger i parken](hund.jpg)

Reference-stil billeder

Ligesom links kan du bruge reference-stil syntaks til billeder: 

![Alt tekst][billede-reference]  

[billede-reference]: billede.jpg "Valgfri titel"

Eksempel

Her er vores logo: ![Firmalogo][logo]

Og her er et skærmbillede: ![App skærmbillede][skaermbillede]

[logo]: /billeder/logo.png "Mit firmalogo"
[skaermbillede]: /billeder/app.png "App dashboard skærmbillede"

Billede stier og URL'er

Lokale billeder

![Lokalt billede](./billeder/foto.jpg)
![Relativ sti](../assets/ikon.png)
![Absolut sti](/public/billeder/banner.jpg)

Eksterne billeder

![Eksternt billede](https://example.com/billede.jpg)
![Unsplash foto](https://images.unsplash.com/photo-123/foto.jpg)

Almindelige mønstre

Billede med billedtekst

![Teammøde i konferencerum](moede.jpg)
*Figur 1: Ugentligt teammøde hvor projektmilepæle diskuteres*

Før/efter billeder

## Før
![Gammel hjemmeside design](gammelt-design.png)

## Efter
![Nyt hjemmeside design](nyt-design.png)

Trin-for-trin instruktioner

1. Klik på indstillinger ikonet
   ![Indstillinger ikon i øverste højre hjørne](indstillinger-ikon.png)

2. Vælg "Kontoindstillinger"
   ![Kontoindstillinger menu mulighed](konto-menu.png)

3. Opdater dine profiloplysninger
   ![Profil formular med redigerbare felter](profil-form.png)

Billede galleri

## Projekt skærmbilleder

![Hjemmeside](hjemmeside.png) ![Dashboard](dashboard.png) ![Indstillinger](indstillinger.png)

Fejlfinding af billeder

Almindelige problemer

  1. Billede vises ikke: Tjek filsti og filnavn

  2. Ødelagt billede ikon: Verificer at billede URL er tilgængelig
  3. Billede for stort: Ændre størrelse eller komprimer billedet
  4. Forkert format: Sikr at browseren understøtter billedformatet

Test billeder

  • •
    Forhåndsvisning i din Markdown-editor

  • •
    Tjek i forskellige browsere
  • •
    Verificer på mobile enheder
  • •
    Test med langsom internetforbindelse

Avancerede teknikker

Billede links

Kombiner billeder med links: 

[![Klik for at se større](miniature.jpg)](fuld-storrelse.jpg)

Billeder er en kraftfuld måde at forbedre dine Markdown-dokumenter. Brug dem gennemtænkt til at understøtte dit indhold og forbedre brugeroplevelsen!

Har du brug for at fremhæve tekst i dit indhold? Lær om gennemstregning formatering næste gang.