Inhoudsopgave

• Richtlijnen voor afbeeldingen
• Technische gegevens

Richtlijnen voor afbeeldingen

• Voor illustrerende afbeeldingen aard zijn (zoals foto's, historische afbeeldingen) mogen niet dermate wazig, vertekend of onduidelijk zijn dat dit de lezer afleidt van het verhaal. We raden aan dat dit soort afbeeldingen ten minste 60% van de breedte van het scherm beslaan voor een goede leesbaarheid ook op kleinere apparaten.
• Afbeeldingen met tekst die letters, cijfers of symbolen bevatten, moeten leesbaar en afleesbaar zijn (bijv. grafieken, technische diagrammen of kaarten). We raden aan dat dit soort afbeeldingen ten minste 80% van de breedte van het scherm beslaan voor een goede leesbaarheid ook op kleinere apparaten.
• Computergegenereerde afbeeldingen worden het beste weergegeven als SVG (Scalable Vector Graphics); SVG-tags kunnen echter tot fouten leiden. We raden aan om SVG-tags te verwijderen en de afbeeldingstag in HTML te gebruiken voor afbeeldingen.
• Geef tekst niet weer als afbeeldingen. Als tekst van de omliggende illustraties kan worden gescheiden, hoort deze geen afbeelding te zijn maar HTML.
• Bijschriften voor afbeeldingen, tabellen en titelafbeelding moet in HTML zijn. Meer informatie over tabellen vind je in het gedeelte over tabellen met aanpasbare opmaak Richtlijnen voor tabellen - Aanpasbare opmaak.
• Ten behoeve van de toegankelijkheid moeten alle afbeeldingen tekst hebben in het alt-kenmerk in de HTML-tag. Geef voor decoratieve afbeeldingen alt = "" of role = "presentation" aan in de afbeeldings-tag zodat dit kan worden genegeerd door de ondersteunende technologie.
• Gebruik kleurenafbeeldingen als dit mogelijk en relevant is voor een optimale klantervaring op Kindle-apparaten en -applicaties.
  
  

Technische gegevens

1. Afbeeldingstypen
   1. Blokafbeeldingen: Een blokafbeelding begint altijd op een nieuwe regel. We verwachten dat de meeste afbeeldingen in Kindle e-books blokafbeeldingen zijn. Hieronder een voorbeeld van een blokafbeelding, met de bijbehorende HTML-code:
      

      

      HTML:

      <p> Lorem ipsum dolor ….</p> <img src="img.jpg" alt="Een blik op het nationale park Canyonlands"> <p>Lorem ipsum dolor ….</p>

      CSS:

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

   2. Zwevende afbeeldingen: Zwevende afbeeldingen worden links of rechts van de tekst in een apart vak geplaatst.
      HTML:

      <img src="Earthworm.jpg" alt="Afbeelding ter illustratie van de doorsnede van een regenworm">

      CSS:

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

   3. Afbeeldingen in de tekst: Een afbeelding in de tekst begint niet op een nieuwe regel en wordt weergegeven in dezelfde regel als de tekst. Stel de hoogte van afbeeldingen in de tekst in in EM-eenheden, zodat de afbeelding proportioneel wordt weergegeven ten opzichte van de omliggende tekstcontent. Verstrek afbeeldingen in de tekst in een bestandstype met kwaliteitsbehoud.

      

      HTML:

      <p> Yes <img src='checkbox.png' alt='Check Box'/> No <img src='checkbox.png' alt='Check Box'/> Lorem ipsum dolor.. </p>

      CSS:

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

   4. Omslagafbeeldingen: Omslagafbeeldingen moeten altijd een volledige pagina beslaan en minimaal 1200 pixels breed of hoog zijn.

2. Kwaliteit van afbeeldingen
   1. Wazige, onduidelijke of vertekende afbeeldingen: Amazon plaatst voor e-books met wazige afbeeldingen een kwaliteitswaarschuwing voor de content op de Amazon-gegevenspagina van het e-book. Voorbeeld van een wazige afbeelding:

      

   2. Onleesbare tekst in afbeeldingen: Afbeeldingen met tekst die letters, cijfers of symbolen bevatten, moeten leesbaar zijn. Als er afbeeldingen zijn met onleesbare tekst, verschijnt er een kwaliteitswaarschuwing voor de content op de Amazon-gegevenspagina van het e-book. Voorbeeld van een onleesbare afbeelding:

      

   3. Afbeeldingen met bijschriften: Gebruik afbeeldingsblokken voor afbeeldingen met bijschriften en zorg ervoor dat je het bijschrift scheidt van de afbeelding. Het is het beste om een bijschrift in tekst te hebben en niet in afbeeldingsindeling. Voorbeeld van een afbeelding met bijschrift:

      

      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. Toegankelijkheid: Ten behoeve van de toegankelijkheid moeten alle afbeeldingen tekst hebben in het alt-kenmerk in de HTML-tag. Geef voor decoratieve afbeeldingen alt = "" of role = "presentation" aan in de afbeeldings-tag zodat dit kan worden genegeerd door de ondersteunende technologie. Alt-tekst moet kort, beknopt en specifiek zijn. Alt-tekst moet een beschrijving van de afbeelding bevatten en indien van toepassing de betekenis in de betreffende context. Geef voor gekoppelde afbeeldingen in de alt-tekst de bedoeling van de koppeling aan; geef geen beschrijving van de afbeelding.
   HTML:

   <img src="img.jpg" alt="Een Amerikaanse zeearend rustend op een boomtak in zijn natuurlijke leefomgeving">

   HTML voor decoratieve elementen:

   <img src="DecorativeImg.jpg" role="presentation" alt=”> OR <imgsrc="DecorativeImg.jpg" alt=””> OR <img src="DecorativeImg.jpg" role="presentation">

4. Ondersteunde invoerindelingen: Kindle-apparaten en -leesapps ondersteunen geen TIFF, GIF's uit meerdere frames, of afbeeldingen met transparante gebieden. Wanneer afbeeldingen een transparante achtergrond hebben, converteren we de transparante achtergrond naar wit.
5. Kleurprofiel of kleurruimte: Gebruik voor al je afbeeldingen het sRGB-kleurprofiel. Kindle biedt geen ondersteuning voor de CMYK-kleurruimte. Wanneer afbeeldingen in CMYK worden geleverd, worden de afbeeldingen automatisch geconverteerd naar sRGB.