Einfache Pixelgrafiken

(Auszug aus "E-Books mit ePUB ─ Von Word zum E-Book mit XML" von Dr. Victor Wang)

XHTML und DTBook unterscheiden sich in der Strukturierung von Grafikreferenzen nur geringfügig: Eine Grafik wird mittels des aus HTML bekannten Inline-Elements <img> markiert, das die beiden Pflichtattribute src und alt enthalten muss. Das src-Attribut referenziert die eigentliche Grafikdatei, das Attribut alt ist für Alternativtexte gedacht, die eingeblendet werden, wenn die Grafik nicht angezeigt werden kann. Breite und Höhe einer Grafik können über die Attribute width und height angegeben werden. Im folgenden Beispiel soll die Grafik als Block zentriert dargestellt werden und wird daher mit einem <div>-Rahmen mit entsprechendem Klassenattribut versehen.

Darstellung der Block-Grafik in XHTML (Adobe Digital Editions)

Darstellung der Block-Grafik in XHTML (iBooks)

Abbildungen: Darstellung der Block-Grafik in XHTML (Adobe Digital Editions bzw. iBooks)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <title>Abbildungen und Grafiken XHTML</title>
  </head>
  <body>
    <div class="Gliederungsebene">
      <h1>JPG-Grafik</h1>
      <p>
        <strong>img</strong>: XHTML kennt nur die Bildreferenz</p>
      <div class="grafik-mitte">
        <img src="img/laokoon.jpg" alt="Laokoongruppe" width="198" height="261" longdesc="Römische Marmorkopie der Laokoon-Gruppe"/>
      </div>
      <p>Die Laokoon-Gruppe, eine römische Marmorkopie des verschollenen Originals, die heute in den Vatikanischen Museen steht.</p>
      <p class="Quelle">Quelle: <cite>Wilhelm Lübke, Max Semrau: Grundriß der Kunstgeschichte. Paul Neff Verlag, Esslingen, 14. Auflage 1908</cite>.</p>
      <p>Grafik stammt aus http://de.wikipedia.org/wiki/Laokoon_%28Lessing%29</p>
    </div>
  </body>
</html> 

Code-Beispiel: Pixelgrafik in XHTML

In DTBook gibt es für Blockgrafiken oder eine Gruppe von Grafiken einen eigenen Container <imggroup>. Innerhalb einer Bildgruppe sind Abbildungsüberschrift in <caption> und Quellenangabe in <prodnote> möglich. Die oben aufgeführte Block-Passage würde – analog zu dem <div>-Element – in DTBook wie folgt aussehen:

<imggroup>
  <img src="img/laokoon.jpg" alt="Laokoongruppe" width="198" height="261" longdesc="Römische Marmorkopie der Laokoon-Gruppe"/>
  <caption>Die Laokoon-Gruppe, eine römische Marmorkopie des verschollenen Originals, die heute in den Vatikanischen Museen steht.</caption>
  <prodnote render="required">Quelle: <cite>Wilhelm Lübke, Max Semrau: Grundriß der Kunstgeschichte. Paul Neff Verlag, Esslingen, 14. Auflage 1908</cite> (http://de.wikipedia.org/wiki/Laokoon_%28Lessing%29)</prodnote>
</imggroup> 

Code-Beispiel: Block-Grafik in DTBook

In welchen Fällen wird nun sinnvollerweise welches Grafikformat angewendet? Die drei Rastergrafikformate JPEG, GIF und PNG haben unterschiedliche Eigenschaften, die hier nur ganz knapp beschrieben werden:

  • GIF (Graphics Interchange Format): pixelorientieres Grafikformat mit geringer Farbanzahl (maximal 256 Farben) und verlustfreier Kompression. Ein Farbeintrag kann als transparent definiert werden, einfache Animationen sind möglich.

  • PNG (Portable Network Graphics): Das Grafikformat wurde aus lizenzrechtlichen Gründen als Ersatz für das GIF-Format entwickelt und hat daher ähnliche Eigenschaften wie GIF, mit den folgenden Unterschieden: meist eine bessere Kompression, keine Animierfähigkeit sowie der zusätzlichen Möglichkeit, Transparenzinformationen in Form eines Alphakanals anzugeben. Dadurch lässt sich steuern, inwieweit der Hintergrund eines Bildes durchscheinen soll. Schließlich lassen sich auch Metadaten zur Bildherkunft hinterlegen.

  • JPEG/JFIF (JPEG File Interchange Format): pixelorientiertes Grafikformat mit großem Farbraum (24 Bit = über 16,7 Millionen Farben) und verlustbehafteter Kompression. Der Kompressionsfaktor kann jedoch bei der Erzeugung gesteuert werden. Transparenzinformationen können nicht gespeichert werden.

Damit ist die praktische Anwendung der Grafikformate eigentlich relativ vorgegeben: Bilder mit zahlreichen Farben (Fotos) oder Farbverläufen sollten sinnvollerweise im JPEG-Format gespeichert werden. Für Strich-, Schwarz-Weiß- oder Graustufen-Zeichnungen kommen hingegen nur GIF oder PNG in Frage. Grenzfälle sind Grafiken mit wenigen Farben (Cartoons, Logos etc.). Hier ist fallweise zu entscheiden. Kommt es hierbei zusätzlich auf feinere Transparenz-Eigenschaften an, so ist möglicherweise das PNG-Format eine gute Wahl. Generell ist bei Farbgrafiken zu bedenken, dass viele E-Book-Lesegeräte lediglich ein Schwarz-Weiß-Display besitzen und dort auch nur begrenzt Graustufen abgebildet werden können. Animierte GIFs werden nur von wenigen Readern/Lesegeräten, beispielsweise von iBooks, unterstützt.

Nachdem klar ist, welches Format verwendet wird, sollte nach der Grafikgröße bzw. der Auflösung geschaut werden. Während für den Print in der Regel höher aufgelöste Grafiken gewünscht und verwendet werden, ist dies beim elektronischen Medium nicht unbedingt der Fall. Die Bildschirm-Auflösung ist aufgrund der beschränkten Bildschirmpunkte sehr viel geringer, so dass bei übergroßen Auflösungen – beispielsweise bei Original-Foto-Daten, die heutzutage leicht Dimensionen von mehreren 1000 Pixeln annehmen können – nur noch ein kleiner Ausschnitt angezeigt wird. Daher empfiehlt es sich hier, eine Reduzierung der Auflösung der Grafik durchzuführen. Im Moment gilt der im Einzelfall zu verifizierende Richtwert, dass eine Grafik maximal 500–600 Pixel breit sein sollte. Beachtet man diese Empfehlung, so entschärft sich auch das Problem der Dateigröße, die bei hoch aufgelösten Fotos leicht mehrere Megabytes betragen kann. In der Praxis ist das Verhalten der Reader bei großen Grafikdaten zu prüfen. Eine JPEG-Datei von "nur" 860 KB und einer Auflösung von 1688 x 2232 Pixel wird beispielsweise im Sony PRS-600 nicht mehr angezeigt.

Um den unterschiedlichen Bildschirmgrößen der Reader gerecht zu werden, ist schließlich auch ein weiterer Ansatz denkbar: Zunächst wird die Grafik in einer reduzierten Breite angezeigt. Ein Vergrößerungslink verweist dann auf eine eigene Anzeigeseite, in der die Grafik mit 100 Prozent Breite angezeigt wird. Auf diese Weise können Reader mit großen Bildschirmen (wie beispielsweise das iPad mit einem 1024-Punkt-Display) in den Genuss von großen Bildern kommen.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema ePub bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © mitp 2011
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "E-Books mit ePUB" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Verlagsgruppe Hüthig Jehle Rehm GmbH, Im Weiher 10, 69121 Heidelberg, kundenbetreuung(at)hjr-verlag.de