Bilder

Zwei Schreibweisen

![Beschreibung](assets/beispiel-breit.png)
![[beispiel-breit.png]]

Die erste ist Standard-Markdown, die zweite Obsidians Wikilink-Form. Beide funktionieren; nur die erste kennt einen Alternativtext.

Der Alternativtext ist nicht optional

Was in den eckigen Klammern steht, wird vorgelesen, wenn das Bild nicht ankommt oder nicht gesehen wird. „Bild“ oder „Screenshot“ steht dort besser nicht — beschreibe, was zu sehen ist. Ein rein schmückendes Bild bekommt ![]() mit leerer Klammer; dann wird es übersprungen statt mit dem Dateinamen vorgelesen.

Die Formate

Format	Wofür	Beispiel
PNG	Flächen, Text, scharfe Kanten, Transparenz	14 KB für 960 × 540
JPEG	Fotos und Verläufe	40 KB für 1200 × 800
WebP	dasselbe wie JPEG, kleiner	9 KB für 800 × 800
GIF	kurze Bewegtbilder ohne Ton	14 KB, 12 Bilder
SVG	Diagramme, Logos, alles Gezeichnete	3 KB, beliebig skalierbar

JPEG — für Fotos

WebP — dasselbe kleiner

GIF — Bewegung ohne Videodatei

Ein GIF spielt automatisch und endlos. Für alles über ein paar Sekunden ist ein Video besser: Ein GIF kennt keine Kompression über die Zeit und wird schnell größer als ein MP4 desselben Inhalts.

Automatische Bewegung ist eine Zugänglichkeitsfrage

Ein endlos laufendes GIF lässt sich nicht anhalten. Bei Inhalten, die länger als fünf Sekunden laufen, verlangt WCAG eine Möglichkeit zum Stoppen — dafür ist ein Video mit Bedienelementen die richtige Wahl.

SVG — gezeichnet statt fotografiert

Ein SVG ist Text. Es bleibt bei jeder Größe scharf, lässt sich versionieren und kann seine Farben aus CSS beziehen.

Größe steuern — nur mit der Wikilink-Form

![[beispiel-breit.png|300]]

Auch Breite × Höhe ist möglich, verzerrt aber, wenn das Verhältnis nicht stimmt:

![[beispiel-klein.png|200x120]]

Größe oder Alternativtext — beides geht nicht

Gemessen an dieser Seite:

Schreibweise	Ergebnis
![[bild.png|300]]	<img width="300" height="auto" alt> — Größe, kein Alternativtext
	alt="Text|300" — Alternativtext, keine Größe

Die Markdown-Form kennt die Größenangabe nicht: Der ganze String hinter dem Ausrufezeichen wird zum Alternativtext, |300 eingeschlossen. Die Wikilink-Form setzt die Größe, lässt alt aber leer.

Wer beides braucht, schreibt HTML: <img src="assets/bild.png" alt="Beschreibung" width="300">

Und genau so, mit beidem:

In dieser Vorlage

Jedes Bild bekommt einen zarten Rahmen und runde Ecken. Ohne den Rahmen sieht ein Bild mit weißem Hintergrund auf dem warmen Grund dieser Seite wie ein Loch aus — von Haus aus steht es rahmenlos.

Eine ausdrücklich gesetzte Breite bleibt erhalten; die Vorlage begrenzt nur nach oben auf die Spaltenbreite.