Bildsyntax

Bilder sind wichtige visuelle Elemente in der Dokumentation. Markdown bietet eine prägnante Syntax zum Einfügen und Verwalten von Bildern.

Grundlegende Bildsyntax

Inline-Bilder

Verwenden Sie das Format ![Alt-Text](Bild-URL):

![Markdown-Logo](https://www.markdownlang.com/markdown-logo.png)

Bilder mit Titel

Fügen Sie einen optionalen Titel hinzu:

![Markdown-Logo](https://www.markdownlang.com/markdown-logo.png "Offizielles Markdown-Logo")

Wenn Sie mit der Maus über das Bild fahren, wird der Titeltext angezeigt.

Referenzstil-Bilder

Grundlegender Referenzstil

![Alt-Text][bild-ref]

[bild-ref]: https://www.markdownlang.com/image.jpg "Optionaler Titel"

Shortcut-Referenzstil

Wenn das Referenzlabel dem Alt-Text entspricht:

![Markdown-Logo][]

[Markdown-Logo]: https://www.markdownlang.com/markdown-logo.png

Bildpfadtypen

Absolute URL

![Web-Bild](https://www.markdownlang.com/images/photo.jpg)

Relativer Pfad

![Lokales Bild](./images/photo.jpg)
![Übergeordnetes Verzeichnis-Bild](../images/photo.jpg)
![Gleiches Verzeichnis-Bild](photo.jpg)

Root-relativer Pfad

![Root-Verzeichnis-Bild](/images/photo.jpg)

Erweiterte Bildfunktionen

Bild-Links

Ein Bild in einen Link einbetten:

[![Bildbeschreibung](image.jpg)](https://www.markdownlang.com)

Gerenderte Ausgabe: Ein Klick auf das Bild führt zum angegebenen Link.

Bilder mit HTML steuern

Größe angeben

<img src="image.jpg" alt="Beschreibung" width="300" height="200">

Bildausrichtung

<!-- Zentriert ausrichten -->
<div align="center">
  <img src="image.jpg" alt="Zentriertes Bild" width="400">
</div>

<!-- Rechts ausrichten -->
<div align="right">
  <img src="image.jpg" alt="Rechtsbündiges Bild" width="300">
</div>

Responsive Bilder

<img src="image.jpg" alt="Responsives Bild" style="max-width: 100%; height: auto;">

Bildkombinationsanzeige

Nebeneinander-Anzeige

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

Bildraster

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

Gemischte Bild- und Textanzeige

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

Dies ist ein Absatz mit einem Bild, das links schwebt. Der Text umfließt das Bild und erzeugt ein gemischtes Layout. Dies kann für persönliche Profile oder Produktvorstellungen verwendet werden.

<div style="clear: both;"></div>

Best Practices für Alt-Text

Beschreibender Text

✅ Empfohlen: Bildinhalt beschreiben
![Ein Benutzer arbeitet an einem Laptop in einem Arbeitsbereich](workspace.jpg)

❌ Nicht empfohlen: Bedeutungsloser Text
![Bild](workspace.jpg)
![Hier klicken](workspace.jpg)

Funktionale Bilder

✅ Empfohlen: Die Funktion des Bildes erklären
![Suchschaltfläche](search-icon.png)
![GitHub Repository-Link](github-logo.png)

❌ Nicht empfohlen: Wiederholung des umgebenden Textes
Klicken Sie auf ![Klicken](search-icon.png) zum Suchen

Dekorative Bilder

✅ Empfohlen: Leeren Alt-Text für dekorative Bilder verwenden
![](decorative-border.png)

❌ Nicht empfohlen: Unnötige Beschreibung
![Dekoratives Randmuster](decorative-border.png)

Gängige Bildformate

Webfreundliche Formate

Format	Verwendung	Eigenschaften
JPEG	Fotos, komplexe Bilder	Kleine Datei, verlustbehaftete Komprimierung
PNG	Icons, transparente Hintergründe	Verlustfreie Komprimierung, unterstützt Transparenz
WebP	Moderne Web-Bilder	Kleinere Größe, bessere Qualität
SVG	Vektorgrafiken, Icons	Skalierbar, kleine Datei
GIF	Einfache Animationen	Unterstützt Animation, begrenzte Farben

Format-Auswahlhinweise

✅ Empfohlene Verwendung:
![Foto](photo.jpg)           ← JPEG für Fotos
![Icon](icon.png)            ← PNG für Icons
![Vektor](logo.svg)          ← SVG für Vektorgrafiken
![Animation](animation.gif)  ← GIF für einfache Animationen

❌ Nicht empfohlen:
![Icon](icon.jpg)            ← JPEG nicht geeignet für Icons
![Foto](photo.png)           ← PNG-Dateien können groß sein

Bildoptimierungstipps

Dateigröße optimieren

1. Die richtige Auflösung wählen

   <!-- Empfohlen für Webanzeige -->
   <img src="image.jpg" width="800" alt="Beschreibung">  ← 2x Bild für hochauflösende Bildschirme

2. Geeignete Komprimierung verwenden

   <!-- JPEG-Qualität: 70-80% empfohlen -->
   ![Optimiertes Foto](optimized-photo.jpg)

3. Lazy Loading

   <img src="image.jpg" alt="Beschreibung" loading="lazy">

CDN und Bildhosting verwenden

<!-- CDN für Beschleunigung verwenden -->
![CDN-Bild](https://cdn.example.com/images/photo.jpg)

<!-- Bildhosting-Service -->
![Gehostetes Bild](https://img.example.com/upload/photo.jpg)

Häufige Fehler und Lösungen

1. Pfadfehler

❌ Fehler:
![Bild](images/photo.jpg)    ← Pfad existiert nicht

✅ Korrekt:
![Bild](./images/photo.jpg)  ← Dateipfad prüfen
![Bild](/assets/photo.jpg)   ← Korrektes relatives Verzeichnis verwenden

2. Fehlender Alt-Text

❌ Fehler:
![](important-chart.jpg)     ← Wichtiges Bild ohne Beschreibung

✅ Korrekt:
![Vergleichsdiagramm der Verkaufsdaten 2023](important-chart.jpg)

3. Größensteuerungsproblem

❌ Problem: Bild zu groß
![Großes Bild](huge-image.jpg)   ← Kann Layout zerstören

✅ Lösung:
<img src="huge-image.jpg" alt="Großes Bild" style="max-width: 100%;">

4. Bildlink-Problem

❌ Fehler:
[![Bild](image.jpg)(https://www.markdownlang.com)  ← Syntaxfehler

✅ Korrekt:
[![Bild](image.jpg)](https://www.markdownlang.com)

Praxisbeispiele

1. Technische Dokumentation

## Installationsschritte

1. Laden Sie das Installationsprogramm herunter

   ![Screenshot der Download-Seite](download-page.png)

2. Führen Sie das Installationsprogramm aus

   ![Installationsassistent-Oberfläche](installer-wizard.png)

3. Installation abschließen

   ![Bestätigung der abgeschlossenen Installation](installation-complete.png)

2. Produktpräsentation

## Produktfunktionen

### Modernes UI-Design

<div align="center">
  <img src="ui-screenshot.png" alt="Produkt UI Screenshot" width="600">
  <p><em>Saubere und intuitive Benutzeroberfläche</em></p>
</div>

### Multi-Plattform-Unterstützung

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
</table>

3. Persönliches Profil

## Über mich

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

Hallo! Ich bin ein Full-Stack-Entwickler mit Fokus auf moderne Webtechnologien. Ich habe über 5 Jahre Entwicklungserfahrung und kenne mich mit verschiedenen Programmiersprachen und Frameworks aus.

### Skill Stack

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4. Anleitung

## Code-Editor-Konfiguration

Folgen Sie diesen Schritten, um Ihre Entwicklungsumgebung zu konfigurieren:

1. **Einstellungen öffnen**

   ![VS Code Einstellungen Einstieg](vscode-settings-1.png)

2. **Nach Konfigurationselementen suchen**

   ![Konfiguration suchen](vscode-settings-2.png)

3. **Konfigurationswert ändern**

   ![Konfiguration ändern](vscode-settings-3.png)

> 💡 **Tipp**: Starten Sie den Editor nach der Konfiguration neu, damit die Einstellungen wirksam werden.

Barrierefreiheit

Aussagekräftigen Alt-Text schreiben

✅ Empfohlen: Detaillierte Beschreibung
![Balkendiagramm zeigt 15% Umsatzwachstum im Q3 2023 mit einem roten Aufwärtspfeil](revenue-chart-q3.png)

❌ Nicht empfohlen: Einfache Wiederholung
![Diagramm](revenue-chart-q3.png)

Strukturierte Beschreibungen verwenden

![Teamfoto: Erste Reihe von links Zhang San, Li Si, Wang Wu; hintere Reihe von links Zhao Liu, Sun Qi, Zhou Ba](team-photo.jpg)

HTML-Ausgabe

Markdown-Bilder werden in HTML umgewandelt:

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

Umgewandelt zu:

<img src="image.jpg" alt="Alt-Text" title="Bildtitel">

Referenzstil-Bilder:

![Alt-Text][ref]

[ref]: image.jpg "Titel"

Umgewandelt zu:

<img src="image.jpg" alt="Alt-Text" title="Titel">

Verwandte Syntax

• Link-Syntax – Links erstellen
• HTML-Syntax – HTML einbetten
• Fenced Code Blocks – Code-Highlighting

Übung

Versuchen Sie Folgendes zu erstellen:

1. Eine Produktpräsentationsseite mit mehreren Produktbildern
2. Ein technisches Tutorial mit Schritt-für-Schritt-Screenshots und Erklärungen
3. Eine Teamvorstellungsseite mit Mitglieder-Avataren und Informationen
4. Ein Vergleichsdiagramm, das Datentrends zeigt

Empfohlene Tools

Bildbearbeitungstools

• Online-Tools: Canva, Figma, Photopea
• Desktop-Software: GIMP, Paint.NET, Adobe Photoshop
• Screenshot-Tools: Snipaste, Lightshot, integrierte Screenshot-Tools

Bildoptimierungstools

• Komprimierungstools: TinyPNG, ImageOptim, Squoosh
• Formatkonvertierung: CloudConvert, Online-Convert
• Stapelverarbeitung: ImageMagick, XnConvert

Bildhosting-Dienste

• Kostenlose Dienste: GitHub, Gitee, sm.ms
• Kostenpflichtige Dienste: Qiniu Cloud, Alibaba Cloud OSS, Tencent Cloud COS
• CDN-Beschleunigung: jsDelivr, Cloudflare, AWS CloudFront