Bilder im ePub einbinden

Ihr wollt Bilder im epub einbinden? Dann ist diese Blogreihe genau das richtige für euch!

Mit fundiertem gestalterischen wie auch technischen Handwerk umgesetzt, sind eBooks ein echtes Lesevergnügen mit Mehrwert. Um ansprechende, gut lesbare, technisch einwandfreie eBooks mit einem individuellen Charakter zu erstellen, bedarf es einer sorgfältigen Formatierung, die die Eigenheiten des Mediums berücksichtigt. Das hebt ein gutes eBook erfreulich aus der automatisch generierten Masse hervor.

In diesem zweiteiligen Blogbeitrag erzählt Ingeborg Helzle von der eBookerei von ihren Erfahrungen über das Einbinden und Formatieren von Bildern in eBooks. Im ersten Teil gibt sie Tipps & Tricks zum Einbinden von Bildern in EPUB.

Bildformate

Laut OPS 2.0-Spezifikation können die Bildformate JPEG, GIF, PNG und SVG in einem EPUP verwendet werden. Fotos speichert man am besten als JPEG oder PNG ab, Grafiken mit Text und Flächen als GIF. SVG ist optimal für Grafiken, Tabellen und andere vektorbasierte Bilder. Da man bei SVG Textelemente im Bild mit Beschreibungen hinterlegen kann, ist dieses Format besonders für barrierefreie eBooks interessant.

Bildgröße

Bildschirmfüllende Bilder sollten nicht größer als 768 x 1024 Pixel sein – diese Größe wird auch auf einem Tablet oder im Desktop-Reader gut dargestellt. Kleinere Bilder im Text sollten nicht breiter als 400 Pixel sein.
Damit das EPUB kein übermäßiges Dateivolumen bekommt, hilft es, Bilder weboptimiert abzuspeichern. Ein weboptimiertes JPEG in 60er-Qualität ist für die meisten Fotos ausreichend, für Bilder mit Textinhalt würde ich mindestens 80% empfehlen.

Ich lege immer eine grundsätzliche CSS-Regel für alle Bilder an, damit Bilder, die größer als das Display sind, nicht abgeschnitten werden:

img { max-width: 100%; }

Auf diese Weise kann man auch weitere CSS-Regeln anlegen, um verschiedenen Bildarten gerecht zu werden.
Vignetten am Anfang oder Ende eines Kapitels wirken z.B. in voller Breite viel zu mächtig. Hier könnte man beispielsweise folgende Regel anlegen:

img.vignette {width: 50%;}

Bilder in Sigil einfügen

Es gibt in Sigil verschiedene Möglichkeiten, Bilder in das EPUB einzubinden:

• Per WYSIWYG: Cursor an die Stelle setzen, an der das Bild eingebettet werden soll. Über Insert → File das Bild auswählen. Damit wird das Bild automatisch im Images-Ordner des EPUB abgespeichert und an der entsprechenden Stelle eingefügt.
•  Mit einem Klick auf diesen Button in der Werkzeugleiste kann man ebenso ein Bild einfügen.
• Alternativ kann man alle Bilder direkt in den Images-Ordner laden; per rechtem Mausklick auf den Images-Ordner → Add Existing Files.

Die hinzugefügten Bilder können nun per Code oder WYSIWYG eingebaut werden.

Der HTML Code für Bilder sollte wie folgt aussehen:

.

Im Attribut „alt“ sollte im Sinne der Barrierefreiheit ein beschreibender Bildtext stehen. Falls es sich um ein rein dekoratives Bild handelt, bleibt „alt“ unbeschriftet.

Farbigkeit

Die gängigsten eReader sind eInk-Geräte, die Bilder nur in Graustufen darstellen. Möglicherweise sind unter den Lesern auch Nutzer von Tablets oder Desktop-Computern, die Bilder in Farbe angezeigt bekommen. Ausgehend von der Mehrheit der Leser sollten Bilder entweder in Graustufen angelegt sein, oder so kontrastreich in Farbe, dass auch die Graustufendarstellung der Farbbilder optimal angezeigt wird.

In Photoshop können Farbbilder sehr gut in Graustufen umgewandelt werden: Über Image → Adjustments → Black & White lässt sich der beste Schwarz-Weiß-Kontrast auswählen.
Hier ein Vergleich verschiedener Einstellungsmöglichkeiten in Photoshop. Im Vergleich zur automatischen Umwandlung wirken manuell ausgewählte Optionen eindrucksvoller. Für welche man sich dann entscheidet, ist Geschmacksache.

Ich freue mich auf eure Fragen und Kommentare – vielleicht inspiriert ihr mich zu einem weiteren Beitrag…