Bilder in ePub einbinden

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.

Softwaretipp: Egal ob man ein exportiertes EPUB bearbeiten möchte oder ein eBook selbst kodiert, empfehle ich das Open-Source-Programm Sigil, in dem man den Code des eBooks mit WYSIWYG-Unterstützung direkt bearbeiten kann.

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. Die Webseite publishinglab.nl erklärt, wie man SVGs optimal für eBooks aufbereitet.
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.

Softwaretipp: Bilder lassen sich am besten in Photoshop bearbeiten. Alternativ online mit pixlr.com/editor oder fotor.com.

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.
  • Icon Sigil Bild einfügen 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:

<img src="../Images/XYZ.png" alt="hier steht ein Beschreibender Bildtext" />.

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.

Schwarz-Weiß Einstellungen

 

Am 6. September gibt es den zweiten Teil meines Artikels mit Tipps & Tricks zur Formatierung von Bildern im EPUB.

Lust auf mehr Tipps & Tricks zur eBook-Gestaltung?
Am 5. November 2016 halte ich aufgrund großer Nachfrage den Workshop „Professionell eBooks Erstellen“ in Köln ab, veranstaltet von den Bücherfrauen Köln/Bonn.

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

GastautorIn
Letzte Artikel von GastautorIn (Alle anzeigen)

4 thoughts on “Bilder in ePub einbinden

  1. Herzlichen Dank für diesen informativen Beitrag. Als Autorin unter anderem von illustrierten Kinder-E-Books werde ich mich gerne intensiver damit befassen, da ich bisher anders vorgegangen bin. Zudem überarbeite ich derzeit mehrere Covers und Illustrationen. Ich freue mich auf die Fortsetzung!

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.