10 Schritte zu deiner EPUB

10 Schritte zu deiner EPUB #7 Bilder in E-Books

5. April 2017

Heute möchte ich darüber reden, wie Bilder in E-Books eingebunden werden und wie sie beschaffen sein sollten.

Bilder in E-Books

E-Books enthalten ja mindestens ein Bild, nämlich das Cover. Manchmal noch ein Autorenfoto, das Logo des Verlages, gelegentlich auch Vignetten über den einzelnen Kapiteln oder Abbildungen im Text. Ein Grund Bilder zu verwenden, kann auch sein, dass man sicherstellen möchte, dass die Titelseite, bestimmte Überschriften oder Zwischentitel in einer ganz besonderen Schriftart dargestellt werden, unabhängig davon, ob der Leser die eventuell eingebundenen Schriftarten verwendet.

Print vs. E-Book

Nun gibt es an Bilder im E-Book ganz andere Anforderungen, als an Bilder, die für die Druckausgabe benutzt werden. Während man in der Druckausgabe für eine gute Wiedergabe mit einer sehr hohen Auflösung von mindestens 300 dpi arbeitet, um gute Ergebnisse zu erzielen, ist es beim E-Book genau umgekehrt. Für die Wiedergabe auf den meist kleinen Bildschirmen der Lesegeräte genügt eine geringe Auflösung von 72 dpi. Die geringere Datenmenge beschleunigt nicht nur den Download des E-Books, sondern nimmt auch weniger Speicherplatz auf dem Endgerät ein. Einige Plattformen begrenzen darüber hinaus die Größe eines E-Books auf 20MB.

Außerdem spart man Kosten. Bespielsweise behält Amazon eine sogenannte Transfergebühr für jeden Download ein, die nach der übertragenen Datenmenge berechnet wird.

Der zweite Unterschied ist, dass farbige Abbildungen in Büchern trotz digitaler Drucktechnik hohe Kosten verursachen, in E-Books nicht. Da viele Leser E-Books auf Smartphones oder Tablets lesen, würde ich immer empfehlen, farbige Abbildungen einzubinden.

Hinweis: Da I-ink Lesegeräte die Bilder nur im S/W Modus abbilden, teste ich vorher die Gradation- und den Kontrast der Bilder auf verschiedenen Lesegeräten und passe sie an. Dann kann eine farbige Abbildung auch in S/W auch sehr schön und kontrastreich rüberkommen. Hier ein Beispiel aus Katrin Bongards Roman »The World«. Einmal auf dem i-Pad und einmal auf einem Kindle Paperwhite.

    

Für eine bildschirmgroße Abbildung wähle ich eine Seitenlänge von ca. 600 bis 800 Pixeln und versuche, eine Dateigröße von 120 -180 KB zu erreichen.

Bildformate

JPEG, GIF, PNG und SVG

Für fotografische Abbildungen oder mehrfarbige Grafiken eignet sich am besten das jpeg-Format.

Gif sollte man nutzen, wenn es sich um flächige Grafiken handelt.

Mit png können Transparenzen hergestellt werden. Besonders geeignet für Grafiken und Abbildungen, die keine feste Umrahmung haben. Hier wird dann auch die freigestellte Grafik ohne weißes Rechteck wiedergegeben, wenn der Leser auf Sepia, grau oder schwarzen Hintergrund wechselt. Hier z.B. auf einem i-Pad.

   

Das SVG-Format nutze ich sehr selten für die Einbindung von Abbildungen mit vektorbasierten Schriften.

Der HTML-Code

Um ein Bild an die gewünschte Stelle im Text zu platzieren, erstelle ich mit den sogenannten <div></div> TAGS eine neuen Bereich.

<div class=“image“><img  src=“images/bildname.jpg“ /></div>

Standardmäßig werden Bilder linksbündig angezeigt. Ich kann sie aber auch zentrieren. Der CSS-Code lautet dann:

div.image {
text-align: center;
margin: 0em 0em 0em 0em;
display:inline-block;
}

Falls es eine Bildunterschrift gibt, sollte die natürlich nicht vom Bild getrennt werden. Sie wird in den <div> Container geschrieben, in dem sich auch das Bild befindet. Und mit der CSS-Regel display:inline-block; stelle ich sicher, dass sie nicht erst auf der nächsten Seite erscheint.

Um die Bildunterschrift vom Fließtext abzusetzen, bekommt sie auch eine eigenen CSS-Klasse. Der komplette HTML-Code lautet dann:

<div class=“image“><img  src=“images/das_tolle_bild.jpg“ />
<p class=“bildunterschrift“>Das tolle Bild</p></div>

So weit erst einmal für heute. In der nächsten Woche werde ich eine Möglichkeit beschreiben, wie man mit Hilfe von einfachen Tabellen Bilder von Text „umfließen“ lassen kann.

Bis dahin eine gute Woche!

Uwe

#rbpub #redbugwriting

You Might Also Like

No Comments

Leave a Reply