Bilder | adoc Studio Lernpfad

Bilder einfügen

Das Auge isst mit. Daher sind Bilder und andere Visualisierungen ein absoluter Mehrwert für Ihre Texte. Sie können sie in adoc Studio mit wenigen Klicks einfügen.

Sie fügen Bilder über die klassischen Wege ein:

Drag & Drop: Ziehen Sie das Bild direkt an die gewünschte Textstelle.
Copy & Paste: Mit ⌘+C das Bild kopieren und mit ⌘+V an die gewünschte Stelle einfügen.

Alle Bilder werden im Medienordner gespeichert. Der Ordner ist in der Seitenleiste einsehbar. Wenn Sie den Dateinamen eines Bildes anpassen möchten, tun Sie dies im Medienordner. Es öffnet sich dann ein Fenster, das Ihnen vorschlägt, den Dateinamen in allen Instanzen im Text automatisch anzupassen.

Bilder anpassen

In AsciiDoc gibt es eine Vielzahl an Parametern, um Bilder anzupassen. Die wichtigsten sind:

Parameter Beschreibung

Parameter	Beschreibung
`width=300` oder `width=50%`	Breite in Pixeln oder Prozent
`align=center`	Ausrichtung (left, center, right)
`alt="Beschreibung"`	Alternativtext für Barrierefreiheit

width=300 oder width=50%

Breite in Pixeln oder Prozent

align=center

Ausrichtung (left, center, right)

alt="Beschreibung"

Alternativtext für Barrierefreiheit

Ein Bild mit Parametern sieht so aus:

image::screenshot.png[alt="Screenshot der App", width=80%, align=center]

Um eine Bildunterschrift hinzuzufügen, schreiben Sie einen Titel mit einem Punkt direkt über das Bild:

.Abbildung 1: Die Benutzeroberfläche
image::screenshot.png[]

Der adoc Coach

Um bei der Anzahl der Parameter nicht den Überblick zu verlieren, nutzen Sie den adoc Coach.

Mit Klick auf die ESC-Taste öffnet sich das Menü und zeigt Ihnen alle Parameter, die an der aktuellen Textstelle möglich sind. Wenn Sie zwischen den Klammern eines Bildes auf ESC klicken, sehen Sie alle verfügbaren Parameter zur Bildgestaltung.

Bildauflösung optimieren

Ein wichtiges Thema beim Export sind Dateigrößen. Oft liefert das Produktteam Bilder in maximaler Auflösung – was grundsätzlich gut ist. Aber ein Leser auf dem iPhone braucht keine Bilder mit hunderten Megabytes.

Mit speziellen Attributen steuern Sie die Auflösung Ihrer Bilder in der Ausgabe:

Attribut Wirkung

Attribut	Wirkung
`:ads-max-image-resolution:`	Maximale Ausgabeauflösung (in dpi, dpcm oder dppx), wenn Höhe oder Breite im Quellcode definiert sind
`:ads-max-image-width:`	Begrenzt die Bildbreite in der HTML-Ausgabe, wenn keine feste Höhe oder Breite angegeben ist
`:ads-rasterizing-resolution:`	PDF, SVG-Bilder und STEM-Formeln werden in PNG konvertiert und auf die angegebene Auflösung gesetzt
`:ads-static-stem:`	STEM-Formeln werden als SVG eingebettet statt mit JavaScript gerendert

:ads-max-image-resolution:

Maximale Ausgabeauflösung (in dpi, dpcm oder dppx), wenn Höhe oder Breite im Quellcode definiert sind

:ads-max-image-width:

Begrenzt die Bildbreite in der HTML-Ausgabe, wenn keine feste Höhe oder Breite angegeben ist

:ads-rasterizing-resolution:

PDF, SVG-Bilder und STEM-Formeln werden in PNG konvertiert und auf die angegebene Auflösung gesetzt

:ads-static-stem:

STEM-Formeln werden als SVG eingebettet statt mit JavaScript gerendert

Beispiel für ein Dokument mit optimierter Dateigröße:

= Mein Handbuch
:ads-max-image-resolution: 150dpi
:ads-rasterizing-resolution: 72dpi

Für Web-Dokumente reichen oft 72–150 dpi. Für Druckausgaben empfehlen sich 300 dpi.

Neben Bildern können Sie auch Audio- und Videodateien einbetten. Die Syntax ist ähnlich: audio::datei.mp3[] und video::datei.mp4[]. Mehr dazu finden Sie im Handbuch.