Markdown Bilder

Bilder machen Ihren Inhalt ansprechender und helfen dabei, Ihre Punkte zu veranschaulichen. Markdown bietet eine einfache Syntax zum Hinzufügen von Bildern, obwohl Sie manchmal HTML für erweiterte Funktionen benötigen.

Grundlegende Bild-Syntax

Die grundlegende Syntax für Bilder in Markdown ist ähnlich wie bei Links, aber mit einem Ausrufezeichen am Anfang: 

![Alt-Text](bild-url.jpg)
![Lokales Bild](./bilder/foto.jpg)
![Externes Bild](https://example.com/bild.jpg)

Bilder mit Titeln

Sie können Titel hinzufügen, die erscheinen, wenn Benutzer mit der Maus über das Bild fahren: 

![Alt-Text](bild.jpg "Bildtitel")

Bewährte Praktiken für Alt-Text

Alt-Text ist entscheidend für Barrierefreiheit und SEO:

1. Beschreibend sein

❌ Nicht hilfreich: 

![Bild](foto.jpg)
![Foto](pic.png)

✅ Beschreibend: 

![Frau programmiert an einem Laptop in einem Café](programmieren-cafe.jpg)
![Balkendiagramm zeigt Umsatzsteigerung von 2020 bis 2024](umsatz-diagramm.png)

2. Prägnant halten

❌ Zu lang: 

![Das ist eine wirklich lange Beschreibung eines Bildes, das eine Person zeigt, die an einem Computer in einer modernen Büroumgebung mit weißen Wänden und großen Fenstern sitzt](buero.jpg)

✅ Prägnant: 

![Person arbeitet am Computer im modernen Büro](buero.jpg)

3. "Bild von" oder "Foto von" nicht einschließen

❌ Redundant: 

![Bild von einem Hund, der im Park spielt](hund.jpg)

✅ Direkt: 

![Hund spielt im Park](hund.jpg)

Referenz-Stil-Bilder

Wie bei Links können Sie Referenz-Stil-Syntax für Bilder verwenden: 

![Alt-Text][bild-referenz]  

[bild-referenz]: bild.jpg "Optionaler Titel"

Beispiel

Hier ist unser Logo: ![Firmenlogo][logo]

Und hier ist ein Screenshot: ![App-Screenshot][screenshot]

[logo]: /bilder/logo.png "Mein Firmenlogo"
[screenshot]: /bilder/app.png "App-Dashboard-Screenshot"

Bildpfade und URLs

Lokale Bilder

![Lokales Bild](./bilder/foto.jpg)
![Relativer Pfad](../assets/icon.png)
![Absoluter Pfad](/public/bilder/banner.jpg)

Externe Bilder

![Externes Bild](https://example.com/bild.jpg)
![Unsplash Foto](https://images.unsplash.com/photo-123/foto.jpg)

Häufige Muster

Bild mit Beschriftung

![Team-Meeting im Konferenzraum](meeting.jpg)
*Abbildung 1: Wöchentliches Team-Meeting zur Besprechung von Projektmeilensteinen*

Vorher/Nachher-Bilder

## Vorher
![Altes Website-Design](altes-design.png)

## Nachher
![Neues Website-Design](neues-design.png)

Schritt-für-Schritt-Anleitungen

1. Klicken Sie auf das Einstellungs-Symbol
   ![Einstellungs-Symbol in der oberen rechten Ecke](einstellungs-icon.png)

2. Wählen Sie "Kontoeinstellungen"
   ![Kontoeinstellungen Menüoption](konto-menu.png)

3. Aktualisieren Sie Ihre Profilinformationen
   ![Profilformular mit bearbeitbaren Feldern](profil-formular.png)

Bildergalerie

## Projekt-Screenshots

![Homepage](homepage.png) ![Dashboard](dashboard.png) ![Einstellungen](einstellungen.png)

Fehlerbehebung bei Bildern

Häufige Probleme

  1. Bild wird nicht angezeigt: Überprüfen Sie Dateipfad und Dateiname

  2. Defektes Bild-Symbol: Stellen Sie sicher, dass die Bild-URL zugänglich ist
  3. Bild zu groß: Bild verkleinern oder komprimieren
  4. Falsches Format: Stellen Sie sicher, dass der Browser das Bildformat unterstützt

Bilder testen

  • •
    Vorschau in Ihrem Markdown-Editor

  • •
    Überprüfen Sie in verschiedenen Browsern
  • •
    Testen Sie auf mobilen Geräten
  • •
    Testen Sie mit langsamen Internetverbindungen

Erweiterte Techniken

Bild-Links

Kombinieren Sie Bilder mit Links: 

[![Klicken Sie für größere Ansicht](miniaturansicht.jpg)](vollgroesse.jpg)

Bilder sind ein mächtiger Weg, Ihre Markdown-Dokumente zu verbessern. Verwenden Sie sie durchdacht, um Ihren Inhalt zu unterstützen und die Benutzererfahrung zu verbessern!

Müssen Sie Text in Ihrem Inhalt betonen? Lernen Sie als nächstes über Durchstreichungsformatierung.