Bilder in E-Books: Größe, Format und Barrierefreiheit

Jedes Bild in Ihrem E-Book benötigt drei Dinge: das richtige Dateiformat, passende Abmessungen und Alt-Text. Wenn Sie eines davon falsch machen, drohen Konsequenzen, die von aufgeblähten Dateigrößen bis hin zur Unterdrückung des Amazon-Rankings reichen. Eine Analyse von über 10.000 EPUB-Scans durch Rahatt im Jahr 2025 ergab, dass 68 % der E-Books mit Bildern mindestens ein Bild ohne Alt-Text enthielten, was es zur häufigsten Verletzung der Barrierefreiheit in selbstverlegten Büchern macht.

Dieser Leitfaden behandelt die praktischen Regeln für Bilder in E-Books: welche Formate zu verwenden sind, wie man sie dimensioniert, wie man effektiven Alt-Text schreibt und wie man Cover-Images für alle wichtigen Einzelhändler handhabt.

Bildformate: Wann man was verwendet

E-Books unterstützen vier Bildformate, die jeweils für unterschiedliche Inhaltstypen geeignet sind.

JPEG: Ihr Standard für Fotos

Verwenden Sie JPEG für jedes fotografische Bild, Autorenfotos, Szenenfotos, realistische Illustrationen. Die JPEG-Komprimierung funktioniert, indem visuelle Informationen verworfen werden, für die das menschliche Auge weniger empfindlich ist. Bei Qualitätsstufen von 70-85 % ist die visuelle Beeinträchtigung für die meisten Betrachter nicht wahrnehmbar, während die Dateigrößen im Vergleich zu unkomprimierten Daten um 80-90 % sinken.

Anleitung für Qualitätseinstellungen:

• 85 %, Hohe Qualität, minimale sichtbare Artefakte. Verwenden Sie dies für Hero-Images und Fotos, die Leser genau studieren werden.
• 75 %, Gute Qualität, sehr kleine Artefakte in detaillierten Bereichen. Geeignet für die meisten Inline-Fotos.
• 60 %, Deutlicher Qualitätsverlust in Farbverläufen und feinen Details. Nur für kleine Thumbnails akzeptabel.

Verwenden Sie JPEG nicht für Bilder, die Text, scharfe Linien oder flache Farben enthalten. Die JPEG-Komprimierung erzeugt sichtbare Artefakte (Verschmieren, Ringing) um harte Kanten herum.

PNG: Scharfe Kanten und Transparenz

Verwenden Sie PNG für Screenshots, Illustrationen mit flachen Farben, Diagramme mit Textbeschriftungen und jedes Bild, das Transparenz erfordert. PNG ist verlustfrei, es speichert jedes Pixel exakt, aber Dateien sind in der Regel größer als JPEG-Äquivalente.

PNG ist die richtige Wahl, wenn:

• Das Bild lesbaren Text enthält (als Bilder gerenderte Kapitelüberschriften, kommentierte Diagramme)
• Sie einen transparenten Hintergrund benötigen
• Das Bild scharfe Linien oder geometrische Formen aufweist
• Das Bild weniger als 256 Farben hat (PNG-8 verarbeitet diese sehr effizient)

SVG: Skalierbare Grafiken

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format, das Formen mathematisch beschreibt und nicht als Pixel. Dies bedeutet, dass SVG-Bilder perfekt auf jede Bildschirmgröße skaliert werden, ohne an Qualität zu verlieren.

Verwenden Sie SVG für:

• Dekorative Elemente (Kapitelornamente, Abschnittstrenner)
• Einfache Diagramme und Flussdiagramme
• Icons und Logos
• Mathematische Figuren

Die SVG-Unterstützung in E-Readern hat sich seit 2023 deutlich verbessert. Alle Kindle-Geräte, die nach 2020 hergestellt wurden, alle Apple Books-Versionen und Kobo-E-Reader mit Firmware 4.30+ rendern SVG korrekt. Für maximale Kompatibilität sollten Sie immer einen Alt-Text oder ein Fallback-<img>-Element einfügen.

GIF: Im Allgemeinen vermeiden

GIF ist auf 256 Farben beschränkt und erzeugt für die meisten Anwendungsfälle größere Dateien als PNG. Das einzige Szenario, in dem GIF in einem E-Book sinnvoll ist, ist eine einfache animierte Grafik, aber animierte Inhalte werden von den meisten E-Readern nicht unterstützt. Verwenden Sie stattdessen PNG.

Bildgrößenregeln

Maximale Abmessungen

E-Reader haben begrenzte Bildschirmauflösungen. Es bringt keinen Vorteil, ein 4000 Pixel breites Foto in ein E-Book einzufügen. Der E-Reader skaliert es herunter, und die übergroße Datei bläht nur Ihren EPUB auf.

CSS-Größenanpassung: Die entscheidende Regel

Jedes Bild in Ihrem EPUB muss durch CSS begrenzt werden, um ein Überlaufen auf kleinen Bildschirmen zu verhindern. Ohne diese Regel erstreckt sich ein 1200 Pixel breites Bild auf einem 600 Pixel breiten Telefonbildschirm über den Viewport hinaus und unterbricht das Layout.

img {
  max-width: 100%;
  height: auto;
}

Diese einzelne CSS-Regel stellt sicher, dass Bilder auf die Bildschirmgröße skaliert werden, während ihr Seitenverhältnis beibehalten wird. Sie sollte in Ihrem Stylesheet für jedes E-Book enthalten sein, ohne Ausnahme.

Für Bilder, die sich nicht über ihre natürliche Größe hinaus dehnen sollen (z. B. kleine Icons), fügen Sie Folgendes hinzu:

img.inline-icon {
  max-width: 2em;
  height: auto;
}

Dateigrößenbudgets

Die gesamte EPUB-Dateigröße ist wichtig für die Download-Geschwindigkeit und die Upload-Limits der Einzelhändler. Amazon KDP hat ein Limit von 650 MB, aber die Versandkosten steigen mit der Dateigröße. Amazon berechnet ungefähr 0,15 $ pro MB, die von Ihren Tantiemen abgezogen werden.

Zieldateigrößen pro Bild:

• Cover-Image: unter 2 MB
• Ganzseitige Fotos: unter 1 MB pro Stück
• Inline-Bilder: unter 500 KB pro Stück
• Dekorative Elemente: unter 50 KB pro Stück

Gesamtgröße des E-Books:

• Reiner Textroman: unter 2 MB
• Roman mit einigen Illustrationen: unter 10 MB
• Bilderlastige Sachbücher: unter 50 MB
• Foto- oder Kunstbuch: unter 200 MB (Erwägen Sie ein EPUB mit festem Layout)

Einen umfassenderen Überblick darüber, wie die Bildverarbeitung in den EPUB-Formatierungsprozess passt, finden Sie in unserem vollständigen Leitfaden zur E-Book-Formatierung.

Alt-Text: Die Anforderung an die Barrierefreiheit

Alt-Text (Alternativtext) ist eine Textbeschreibung, die an ein Bild angehängt wird und seinen Inhalt an Personen vermittelt, die es nicht sehen können. Im HTML des EPUB erscheint es als alt-Attribut auf <img>-Elementen:

<img src="images/castle.jpg" alt="Eine mittelalterliche Burg auf einem Hügel bei Sonnenuntergang" />

Warum Alt-Text nicht verhandelbar ist

Gesetzliche Anforderung. Das Europäische Barrierefreiheitsgesetz (wirksam ab Juni 2025) schreibt Alt-Text für alle aussagekräftigen Bilder in E-Books vor, die in der EU verkauft werden. Nichteinhaltung setzt Sie Durchsetzungsmaßnahmen aus, die je nach Mitgliedstaat variieren.

Auswirkungen auf das Amazon-Ranking. Das Qualitätssystem von Amazon bestraft fehlenden Alt-Text. Jedes Bild ohne Alt-Text erhöht Ihr Unterdrückungsrisiko um etwa 10 Punkte, begrenzt auf 40 Punkte. Ein Buch mit vier oder mehr fehlenden Alt-Texten auf wichtigen Bildern kann von niedrigem zu mittlerem oder hohem Risiko übergehen.

Leseerlebnis. Ungefähr 2,2 Milliarden Menschen weltweit haben eine Form von Sehbehinderung. Screenreader geben Bilder aus, indem sie Alt-Text laut vorlesen. Ohne ihn hört der Leser entweder den nutzlosen Dateinamen ("IMG_2847.jpg") oder das Bild wird ganz übersprungen.

Die Regeln für guten Alt-Text

Seien Sie prägnant. Streben Sie weniger als 125 Zeichen an. Screenreader geben Alt-Text als einzelnen, ununterbrechbaren Block aus, lange Beschreibungen stören den Lesefluss.

Beschreiben Sie den Inhalt, nicht das Aussehen. "Ein Balkendiagramm, das zeigt, dass der Umsatz im vierten Quartal den Umsatz im dritten Quartal um 15 % übersteigt" ist nützlicher als "Ein farbenfrohes Balkendiagramm".

Passen Sie den Kontext an. Das gleiche Foto eines Hundes kann je nach Kontext unterschiedlichen Alt-Text erhalten. In einem Veterinärlehrbuch: "Golden Retriever mit Anzeichen von Hüftdysplasie". In einer Memoiren: "Haustier aus der Kindheit des Autors, Buddy, im Garten".

Überspringen Sie dekorative Bilder. Ornamentale Trennzeichen, Hintergrundtexturen und rein dekorative Elemente sollten einen leeren Alt-Text haben: alt="". Dies weist Screenreader an, sie zu überspringen.

Eine umfassende Behandlung von Techniken zum Schreiben von Alt-Text, einschließlich Beispielen für verschiedene Bildtypen, finden Sie in unserem Leitfaden zum Alt-Text.

Alt-Text für SVG-Bilder

SVG-Bilder in EPUBs erfordern einen anderen Ansatz. Verwenden Sie anstelle eines alt-Attributs (das <svg>-Elemente nicht unterstützen) eine Kombination aus <title> und aria-label:

<svg aria-label="Organigramm des Unternehmens" role="img">
  <title>Organigramm des Unternehmens</title>
  <!-- SVG content -->
</svg>

Für SVG-<image>-Elemente (Rasterbilder, die in SVG eingebettet sind):

<svg>
  <image href="photo.jpg" aria-label="Teamfoto beim Retreat 2025">
    <title>Teamfoto beim Retreat 2025</title>
  </image>
</svg>

KI-gestützte Alt-Text-Generierung

Das Schreiben von Alt-Text für Dutzende von Bildern ist zeitaufwändig. KI-Tools können erste Vorschläge generieren, die Sie dann überprüfen und verfeinern.

Rahatt enthält eine KI-Alt-Text-Funktion, die:

1. Extrahiert alle Bilder aus Ihrem EPUB
2. Analysiert jedes Bild mithilfe eines Vision-Modells
3. Liest den umgebenden Buchtext nach Kontext
4. Generiert Alt-Text-Vorschläge (unter 125 Zeichen)
5. Ermöglicht es Ihnen, jeden Vorschlag zu überprüfen, zu bearbeiten und zu genehmigen
6. Fügt den genehmigten Alt-Text wieder in den EPUB ein

Dieser Ansatz ist deutlich schneller als das manuelle Schreiben von Alt-Text, typischerweise 15-30 Minuten für ein Buch mit mehr als 20 Bildern, verglichen mit 1-2 Stunden für das manuelle Schreiben. Die KI übernimmt den ersten Entwurf, während Sie die volle redaktionelle Kontrolle behalten.

Cover-Image-Spezifikationen nach Einzelhändler

Ihr Cover-Image hat die strengsten Anforderungen aller Bilder in Ihrem E-Book, da es sowohl als Element im Buch als auch als Marketingmaterial auf den Websites der Einzelhändler dient.

Praktische Empfehlung: Erstellen Sie Ihr Cover im Format 2560 x 1600px im JPEG-Format, das die Anforderungen aller Einzelhändler erfüllt oder übertrifft. Diese einzelne Datei funktioniert auf allen Plattformen ohne Änderung.

Cover-Image im EPUB

Ihr Cover-Image sollte im OPF-Manifest mit der Eigenschaft cover-image referenziert werden:

<item id="cover-img" href="images/cover.jpg"
      media-type="image/jpeg" properties="cover-image"/>

Das Cover sollte auch als erster Inhalt in einer dedizierten Cover-XHTML-Datei erscheinen:

<body>
  <figure>
    <img src="images/cover.jpg"
         alt="Buchcover: Der Mitternachtsgarten von Jane Smith" />
  </figure>
</body>

Beachten Sie den Alt-Text auf dem Cover-Image. Viele Autoren vergessen dies, aber das Cover ist ein Bild wie jedes andere, es benötigt Alt-Text. Ein gutes Muster ist: "Buchcover: [Titel] von [Autor]".

Umgang mit häufigen Bildszenarien

Tabellen als Bilder

Wenn Ihr Buch Tabellen enthält, die für das HTML-Rendering in E-Readern zu komplex sind, müssen Sie diese möglicherweise in Bilder konvertieren. Gehen Sie dabei wie folgt vor:

1. Rendern Sie die Tabelle in hoher Auflösung (mindestens 1200 Pixel breit)
2. Verwenden Sie das PNG-Format, um die Textklarheit zu erhalten
3. Schreiben Sie einen beschreibenden Alt-Text, der die Daten der Tabelle zusammenfasst
4. Erwägen Sie, die Tabellendaten in ein <details>-Element für Benutzer von Screenreadern aufzunehmen

Versuchen Sie jedoch immer zuerst HTML-Tabellen. Moderne E-Reader verarbeiten grundlegende Tabellen gut, und HTML-Tabellen sind von Natur aus barrierefrei. Greifen Sie nur bei wirklich komplexen Layouts (verbundene Zellen, gedrehter Text, eingebettete Grafiken) auf Bilder zurück.

Karten und Diagramme

Karten und komplexe Diagramme profitieren von einem mehrschichtigen Ansatz:

1. Das Bild selbst (JPEG oder PNG mit 1200 Pixel Breite)
2. Alt-Text, der zusammenfasst, was die Karte oder das Diagramm zeigt
3. Eine längere Beschreibung im umgebenden Text oder in einer Bildunterschrift

Zum Beispiel:

<figure>
  <img src="images/trade-routes.png"
       alt="Karte der mittelalterlichen Handelsrouten, die London, Paris, Venedig und Konstantinopel verbinden" />
  <figcaption>Abbildung 3.1: Wichtige Handelsrouten im 13. Jahrhundert.
    Die Hauptroute verlief von London über Paris nach Venedig,
    wobei eine Nebenroute bis nach Konstantinopel verlief.</figcaption>
</figure>

Dekorative Inline-Elemente

Szenenumbruchornamente, Kapiteldekorationen und Schnörkel sind dekorativ, sie verleihen visuelles Interesse, vermitteln aber keine Informationen. Markieren Sie sie mit leerem Alt-Text:

<div class="scene-break">
  <img src="images/ornament.png" alt="" />
</div>

Das leere alt="" ist nicht dasselbe wie ein fehlendes alt-Attribut. Ein leeres Alt weist Screenreader an: "Dieses Bild ist dekorativ, überspringen Sie es." Ein fehlendes Alt-Attribut löst eine Verletzung der Barrierefreiheit aus.

Workflow zur Bildoptimierung

Bevor Sie Bilder zu Ihrem EPUB hinzufügen, führen Sie sie durch diesen Optimierungs-Workflow:

1. Größe ändern auf die entsprechenden maximalen Abmessungen (1200-1600px für Inline-Bilder)
2. Komprimieren mit einem Bildoptimierer:
   • Squoosh (kostenlos, webbasiert, ausgezeichnete Qualität)
   • ImageOptim (kostenlos, Mac)
   • TinyPNG (kostenloser Tarif, webbasiert, funktioniert auch für JPEG)
3. Konvertieren Sie in das entsprechende Format (JPEG für Fotos, PNG für Illustrationen)
4. Schreiben Sie Alt-Text, bevor Sie das Bild einfügen. Es ist einfacher, ein Bild zu beschreiben, während Sie es betrachten
5. Einfügen in Ihr EPUB mit Alt-Text und CSS-Größenbeschränkungen
6. Validieren Sie, indem Sie das EPUB durch Rahatt laufen lassen, um nach fehlendem Alt-Text und anderen Problemen mit der Barrierefreiheit zu suchen

Dieser Workflow dauert 1-2 Minuten pro Bild, kann aber später stundenlange Fehlersuche verhindern.

Testen von Bildern auf verschiedenen Geräten

Bilder, die auf Ihrem Computerbildschirm perfekt aussehen, werden auf E-Readern möglicherweise anders gerendert. Testen Sie auf mindestens zwei der folgenden Geräte:

• Kindle Previewer 3 (kostenlos), zeigt das Rendering auf Kindle-Geräten und in der App an
• Apple Books (Mac/iOS), rendert EPUB nativ
• Calibre Viewer (kostenlos), gut für schnelle Überprüfungen
• Thorium Reader (kostenlos), ausgezeichnete EPUB 3-Unterstützung
• Physischer E-Reader, Nichts ersetzt das Testen auf dem tatsächlichen Gerät, das Ihre Leser verwenden werden

Achten Sie besonders auf:

• Bilder auf kleinen Bildschirmen (Telefon, 6-Zoll-Kindle), werden sie richtig skaliert?
• Bilder mit Text, ist der Text bei kleinen Größen lesbar?
• Cover-Image, wird es auf dem Startbildschirm des E-Readers korrekt angezeigt?
• Dunkel-/Sepia-Modi, wirken Bilder mit weißen Hintergründen störend?

Häufig gestellte Fragen

Wie viele Bilder kann ich einfügen, bevor die Dateigröße zum Problem wird?

Es gibt keine feste Grenze, aber die Gesamtgröße des EPUB sollte für eine komfortable Verteilung unter 50 MB liegen. Bei optimierter Qualität sind das ungefähr 50-100 Fotos oder mehr als 200 Illustrationen. Die Versandkosten von Amazon (0,15 $/MB) sind die praktische Einschränkung für bildlastige Bücher, ein 50-MB-E-Book kostet 7,50 $ an Versandgebühren pro Verkauf, was Ihre Tantiemen erheblich schmälert. Überlegen Sie, ob Sie wirklich jedes Bild in maximaler Qualität benötigen.

Sollte ich das WebP-Format in E-Books verwenden?

Nein, noch nicht. Obwohl WebP im Vergleich zu JPEG und PNG eine überlegene Komprimierung bietet, ist die E-Reader-Unterstützung ab Anfang 2026 inkonsistent. Kindle-Geräte, die nach 2023 veröffentlicht wurden, unterstützen WebP, ältere Kindles, Kobo und einige Drittanbieter-Reader jedoch nicht. Bleiben Sie bei JPEG und PNG für eine zuverlässige geräteübergreifende Kompatibilität. Besuchen Sie WebP in den Jahren 2027-2028 erneut, wenn ältere Geräte auslaufen.

Wie füge ich Alt-Text hinzu, wenn mein Formatierungstool dies nicht unterstützt?

Zwei Optionen: (1) Öffnen Sie Ihren exportierten EPUB in Sigil und fügen Sie jedem <img>-Tag in den XHTML-Dateien manuell alt-Attribute hinzu. (2) Laden Sie es auf Rahatt hoch und verwenden Sie die KI-gestützte Alt-Text-Funktion, die kontextbezogene Vorschläge generiert und diese nach Ihrer Überprüfung einfügt. Option 2 ist für Bücher mit vielen Bildern schneller. Detaillierte Anleitungen zum Schreiben von Alt-Text finden Sie in unserem Leitfaden zum Alt-Text für E-Books.

Benötigen dekorative Bilder Alt-Text?

Dekorative Bilder benötigen ein alt-Attribut, aber es sollte leer sein: alt="". Dies ist nicht dasselbe wie das vollständige Weglassen des Alt-Attributs. Ein leeres Alt weist Screenreader an, das Bild zu überspringen. Ein fehlendes Alt-Attribut wird von EPUBCheck, DAISY Ace und den Qualitätssystemen von Amazon als Verletzung der Barrierefreiheit gekennzeichnet. Jedes <img>-Tag muss ein alt-Attribut haben, die Frage ist, ob es beschreibenden Text enthält oder leer ist.

Kann ich CMYK-Bilder in meinem E-Book verwenden?

Nein. E-Books benötigen den RGB-Farbraum. CMYK-Bilder (üblich in Druck-Workflows) werden möglicherweise mit verschobenen Farben angezeigt oder auf einigen E-Readern gar nicht gerendert. Wenn Sie Druckbilder für ein E-Book wiederverwenden, konvertieren Sie sie vor dem Einfügen in Ihrem Bildeditor von CMYK in sRGB. Photoshop, GIMP und die meisten Online-Bildtools verarbeiten diese Konvertierung. Weitere Informationen zum gesamten Formatierungsprozess finden Sie in unserem vollständigen Leitfaden zur E-Book-Formatierung.