Inhalt

• Bildrichtlinien
• Technische Details

Bildrichtlinien

• Detailreiche Bilder (z. B. Fotografien, historische Bilder), sollten nicht so unscharf, verwischt oder undeutlich sein, dass sie den Leser vom Erzähltext ablenken. Diese Bilder sollten mindestens 60 % der Bildschirmbreite einnehmen, um auf kleineren Geräten gut erkennbar zu sein.
• Bilder mit Text, der Buchstaben, Zahlen oder Symbole enthält, sollten gut lesbar sein (z. B. Grafiken, technische Diagramme oder Karten). Diese Bilder sollten mindestens 80 % der Bildschirmbreite einnehmen, um auf kleineren Geräten gut erkennbar zu sein.
• Computergenerierte Grafiken werden am besten als Scalable Vector Graphics (SVG) dargestellt. Allerdings können SVG-Tags zu Fehlern führen. Wir empfehlen, SVG-Tags zu entfernen und für Bilder das img-Tag in HTML zu verwenden.
• Stellen Sie Text nicht in Bildform dar. Wenn Text von den umgebenden Grafiken getrennt werden kann, sollte er nicht als Bild eingefügt werden. Verwenden Sie stattdessen HTML.
• Bildunterschriften, Tabellen und Titelbilder sollten im HTML-Format vorliegen. Weitere Informationen zu Tabellen finden Sie im Abschnitt Tabellenrichtlinien – mitfließend.
• Aus Gründen der Barrierefreiheit müssen alle Bilder im Alt-Attribut des HTML-Tags Text enthalten. Legen Sie bei dekorativen Bildern alt = "" oder role = "presentation" im Bild-Tag fest, damit sie von assistiver Technologie ignoriert werden können.
• Verwenden Sie für die bestmögliche Benutzererfahrung auf Kindle-Geräten und in Kindle-Anwendungen immer Farbbilder, wenn es möglich und relevant ist.
  
  

Technische Details

1. Bildtypen
   1. Blockbilder: Ein Blockbild beginnt immer in einer neuen Zeile. Der Großteil der Bilder in Kindle eBooks sollte Blockbilder sein. Beispiel für ein Blockbild, gefolgt von HTML:
      

      

      HTML:

      <p>Lorem ipsum dolor ...</p> <img src="img.jpg" alt="Ein Blick auf den Canyonlands-Nationalpark"> <p>Lorem ipsum dolor ...</p>

      CSS:

      <style> img { display: block; width: 100%; object-fit: contain; } </style>

   2. Fließbilder: Fließbilder werden links oder rechts vom Text in einem Container angeordnet.
      HTML:

      <img src="Earthworm.jpg" alt="Bild mit dem Querschnitt eines Regenwurms">

      CSS:

      <style> img { float: left; width: 20%; object-fit: contain; } </style>

   3. Inline-Bilder: Ein Inline-Element beginnt nicht in einer neuen Zeile, sondern wird in derselben Zeile wie der Text wiedergegeben. Legen Sie die Höhe von Inline-Bildern in EM-Einheiten so fest, dass sie proportional zum umgebenden Textinhalt angezeigt und skaliert werden. Stellen Sie nach Möglichkeit Inline-Bilder in einem verlustfreien Format bereit.

      

      HTML:

      <p> Ja <img src="checkbox.png" alt="Check Box"/> Nein <img src="checkbox.png" alt="Check Box"/> Lorem ipsum dolor ... </p>

      CSS:

      <style> img { height: 1em; vertical-align: bottom; object-fit: contain; } </style>

   4. Buchcoverbilder: Coverbilder sollten immer ein ganzseitiges Layout haben und mindestens 1.200 Pixel breit und hoch sein.

2. Bildqualität
   1. Unscharfe und verwischte Bilder: Amazon kennzeichnet eBooks, die unscharfe Bilder enthalten, mit einer Inhaltsqualitätswarnung auf der Amazon-Detailseite des eBooks. Beispiel für ein unscharfes Bild:

      

   2. Unleserlicher Text in Bildern: Bilder mit Text, der Buchstaben, Zahlen oder Symbole enthält, müssen gut lesbar sein. Wenn Bilder mit unleserlichem Text vorhanden sind, wird auf der Amazon-Detailseite des eBooks eine Inhaltsqualitätswarnung angezeigt. Beispiel für ein unleserliches Bild:

      

   3. Bilder mit Bildunterschriften: Bitte verwenden Sie für Bilder mit Bildunterschriften Abbildungsblöcke und achten Sie darauf, dass Sie die Bildunterschrift nicht mit dem Bild rastern. Am besten ist es, wenn die Bildunterschrift im Text- und nicht im Bildformat vorliegt. Beispiel für ein Bild mit Bildunterschrift:

      

      HTML:

      <figure> <img src="img.jpg" alt=" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." /> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</figcaption> </figure>

      CSS:

      <style> figure {width: 100%; } img { display: block; width: 100%; object-fit: contain; } figcaption { margin: 0.5em 0 0 0; text-align: center; text-indent: 0; } </style>

3. Barrierefreiheit: Aus Gründen der Barrierefreiheit müssen alle Bilder im Alt-Attribut des HTML-Tags Text enthalten. Legen Sie bei dekorativen Bildern alt = "" oder role = "presentation" im Bild-Tag fest, damit sie von assistiver Technologie ignoriert werden können. Der Alt-Text muss kurz, prägnant und spezifisch sein. Der Alt-Text sollte eine Beschreibung des Bildes und gegebenenfalls dessen Bedeutung im Kontext bieten. Geben Sie bei verlinkten Bildern den Zweck des Links und nicht die Beschreibung des Bilds im Alt-Text an.
   HTML:

   <img src="img.jpg" alt="Ein Weißkopfseeadler sitzt auf einem Baum in seinem natürlichen Lebensraum">

   HTML für dekorative Inhalte:

   <img src="DecorativeImg.jpg" role="presentation" alt=""> ODER <img src="DecorativeImg.jpg" alt=""> ODER <img src="DecorativeImg.jpg" role="presentation">

4. Unterstützte Eingabeformate: Kindle-Geräte und -Leseanwendungen unterstützen weder TIFF-Bilder noch GIFs mit mehreren Frames oder Bilder mit transparenten Bereichen. Wenn Bilder mit transparenten Hintergründen versehen sind, konvertieren wir den transparenten Hintergrund in Weiß.
5. Farbprofil oder Farbraum: Verwenden Sie für all Ihre Bilder das sRGB-Farbprofil. Kindle bietet keine Unterstützung für CMYK. Wenn Bilder im CMYK-Farbraum bereitgestellt werden, konvertiert Kindle die Bilder automatisch in den sRGB-Farbraum.