Sommario

• Linee guida per le immagini
• Dettagli tecnici

Linee guida per le immagini

• Le immagini illustrate (ad es. fotografie e immagini storiche) non devono essere sfocate, macchiate o poco chiare al punto da distrarre il lettore dalla narrazione. È consigliabile che questo tipo di immagini occupi almeno il 60% della larghezza dello schermo per offrire una lettura di qualità sui dispositivi più piccoli.
• Le immagini contenenti lettere, numeri o simboli devono essere chiare e leggibili (ad es., grafici, diagrammi tecnici o mappe). È consigliabile che questo tipo di immagini occupi almeno l'80% della larghezza dello schermo per offrire una lettura di qualità sui dispositivi di dimensioni inferiori.
• Gli elementi grafici generati dal computer sono rappresentati al meglio nel formato SVG (Scalable Vector Graphics), tuttavia i tag SVG possono causare errori. Per le immagini consigliamo di rimuovere i tag SVG e di utilizzare il tag image in HTML.
• Non rappresentare il testo sotto forma di immagini. Se il testo può essere separato dalle immagini circostanti, non deve far parte di un'immagine, ma deve essere in formato HTML.
• Didascalie delle figure, tabelle e immagine del titolo devono essere in formato HTML. Puoi trovare dettagli sulle tabelle nella sezione Linee guida per le tabelle - Contenuti adattabili.
• Ai fini dell'accessibilità, tutte le immagini devono contenere testo nell'attributo alt del tag HTML. Per le immagini decorative, imposta alt = "" o role = "presentation" nel tag dell'immagine in modo che l'impostazione venga ignorata dalla tecnologia assistiva.
• Per garantire agli utenti un'esperienza ottimale sui dispositivi e sulle applicazioni Kindle, usa immagini a colori quando possibile e pertinente.
  
  

Dettagli tecnici

1. Tipi di immagine
   1. Immagini di blocco. Un'immagine di blocco inizia sempre su una nuova riga. Ci aspettiamo che la maggior parte delle immagini negli eBook Kindle sia costituita da immagini di blocco. Di seguito è mostrato l'esempio di un'immagine di blocco insieme al codice HTML:
      

      

      HTML:

      <p> Lorem ipsum dolor ….</p> <img src="img.jpg" alt="A view of Canyonlands national park"> <p>Lorem ipsum dolor ….</p>

      CSS:

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

   2. Immagini mobili. Le immagini mobili sono posizionate a sinistra o destra del testo in un contenitore.
      HTML:

      <img src="Earthworm.jpg" alt="Image illustrating a cross section of an Earthworm">

      CSS:

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

   3. Immagini in linea. Un elemento in linea non inizia su una nuova riga e viene visualizzato sulla stessa riga del testo. Imposta l'altezza delle immagini in linea in unità "EM" in modo che vengano visualizzate e ridimensionate proporzionalmente al testo circostante. Utilizza immagini in linea in formato lossless, ove possibile.

      

      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. Immagini di copertina dei libri. Le immagini di copertina devono essere caratterizzate da un layout a pagina intera e devono avere dimensioni minime pari a 1200 pixel in larghezza o in altezza.

2. Qualità delle immagini
   1. Immagini sfocate e macchiate. Amazon contrassegna gli eBook contenenti immagini sfocate con un avviso sulla qualità dei contenuti nella pagina dei dettagli dell'eBook. Esempio di immagine sfocata:

      

   2. Testo illeggibile nelle immagini. Le immagini che contengono lettere, numeri o simboli devono essere leggibili. Se sono presenti immagini con testo illeggibile, viene visualizzato un avviso sulla qualità dei contenuti nella pagina dei dettagli dell'eBook Amazon. Esempio di immagine illeggibile:

      

   3. Immagini con didascalie. Usa blocchi di figure per le immagini con didascalie e assicurati di non ingrandire la didascalia con l'immagine. È consigliabile inserire una didascalia in formato testo e non in formato immagine. Esempio di immagine con didascalia:

      

      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. Accessibilità. Ai fini dell'accessibilità, tutte le immagini devono contenere testo nell'attributo alt del tag HTML. Per le immagini decorative, imposta alt = "" o role = "presentation" nel tag dell'immagine in modo che l'impostazione venga ignorata dalla tecnologia assistiva. Il testo alternativo deve essere breve, conciso e specifico. Il testo alternativo deve fornire una descrizione dell'immagine e, a seconda dei casi, del suo significato nel contesto. Per le immagini collegate, specifica lo scopo del collegamento e non la descrizione dell'immagine nel testo alternativo.
   HTML:

   <img src="img.jpg" alt="A Bald Eagle perched in a tree in its native habitat">

   HTML per elementi decorativi.

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

4. Formati di input supportati. Le applicazioni di lettura e i dispositivi Kindle non supportano i formati TIFF, GIF a fotogrammi multipli o le immagini con aree trasparenti. Quando le immagini vengono fornite con sfondi trasparenti, convertiamo lo sfondo trasparente in bianco.
5. Profilo colore o spazio colore. Utilizza il profilo colore sRGB per tutte le immagini. Kindle non supporta lo spazio colore CMYK. Quando le immagini vengono fornite nello spazio colore CMYK, Kindle le converte automaticamente nello spazio colore sRGB.