Markdown Images

Bilder gjør innholdet ditt mer engasjerende og hjelper til med å illustrere poengene dine. Markdown gir enkel syntaks for å legge til bilder, selv om du noen ganger trenger HTML for mer avanserte funksjoner.

Grunnleggende bildesyntaks

Den grunnleggende syntaksen for bilder i Markdown ligner på lenker, men med et utropstegn i begynnelsen: 

![Alt-tekst](bilde-url.jpg)
![Lokalt bilde](./images/photo.jpg)
![Eksternt bilde](https://example.com/image.jpg)

Bilder med titler

Du kan legge til titler som vises når brukere holder musepekeren over bildet: 

![Alt-tekst](image.jpg "Bildetittel")

Beste praksis for alt-tekst

Alt-tekst er avgjørende for tilgjengelighet og SEO:

1. Vær beskrivende

❌ Ikke hjelpsomt: 

![Bilde](photo.jpg)
![Bilde](pic.png)

✅ Beskrivende: 

![Kvinne som koder på en laptop i en kafé](coding-coffee.jpg)
![Stolpediagram som viser salgsøkning fra 2020 til 2024](sales-chart.png)

2. Hold det kortfattet

❌ For langt: 

![Dette er en virkelig lang beskrivelse av et bilde som viser en person som sitter ved en datamaskin i det som ser ut til å være et moderne kontormiljø med hvite vegger og store vinduer](office.jpg)

✅ Kortfattet: 

![Person som jobber ved datamaskin på moderne kontor](office.jpg)

3. Ikke inkluder "Bilde av" eller "Bilde av"

❌ Overflødig: 

![Bilde av en hund som leker i parken](dog.jpg)

✅ Direkte: 

![Hund som leker i parken](dog.jpg)

Referansestil-bilder

Som lenker kan du bruke referansestil-syntaks for bilder: 

![Alt-tekst][bilde-referanse]  

[bilde-referanse]: image.jpg "Valgfri tittel"

Eksempel

Her er logoen vår: ![Firmalogo][logo]

Og her er et skjermbilde: ![App-skjermbilde][screenshot]

[logo]: /images/logo.png "Mitt firmalogo"
[screenshot]: /images/app.png "App Dashboard-skjermbilde"

Bildestier og URLer

Lokale bilder

![Lokalt bilde](./images/photo.jpg)
![Relativ sti](../assets/icon.png)
![Absolutt sti](/public/images/banner.jpg)

Eksterne bilder

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

Vanlige mønstre

Bilde med bildetekst

![Teammøte i konferanserom](meeting.jpg)
*Figur 1: Ukentlig teammøte som diskuterer prosjektmilepæler*

Før/etter-bilder

## Før
![Gammelt nettstedsdesign](old-design.png)

## Etter
![Nytt nettstedsdesign](new-design.png)

Trinn-for-trinn-instruksjoner

1. Klikk på innstillingsikon
   ![Innstillingsikon i øvre høyre hjørne](settings-icon.png)

2. Velg "Kontoinnstillinger"
   ![Kontoinnstillinger menyalternativ](account-menu.png)

3. Oppdater profilinformasjonen din
   ![Profilskjema med redigerbare felt](profile-form.png)

Bildegalleri

## Prosjektskjermbilder

![Hjemmeside](homepage.png) ![Dashboard](dashboard.png) ![Innstillinger](settings.png)

Feilsøking av bilder

Vanlige problemer

  1. Bilde vises ikke: Sjekk filsti og filnavn

  2. Ødelagt bildeikon: Bekreft at bilde-URL er tilgjengelig
  3. Bilde for stort: Endre størrelse eller komprimer bildet
  4. Feil format: Sørg for at nettleseren støtter bildeformatet

Testing av bilder

  • •
    Forhåndsvis i Markdown-editoren din

  • •
    Sjekk i forskjellige nettlesere
  • •
    Bekreft på mobile enheter
  • •
    Test med treg internettforbindelse

Avanserte teknikker

Bildelenker

Kombiner bilder med lenker: 

[![Klikk for å se større](thumbnail.jpg)](full-size.jpg)

Bilder er en kraftig måte å forbedre Markdown-dokumentene dine. Bruk dem gjennomtenkt for å støtte innholdet ditt og forbedre brukeropplevelsen!

Trenger du å fremheve tekst i innholdet ditt? Lær om gjennomstrekingsformatering neste gang.