Conteúdo

• Diretrizes para imagens
• Detalhes técnicos

Diretrizes para imagens

• Imagens com uma natureza pictórica (por exemplo, fotografias, imagens históricas) não devem estar borradas, embaçadas ou confusas ao ponto de distrair o leitor da narrativa. Recomendamos que esse tipo de imagens ocupem pelo menos 60% de largura da tela para uma leitura de alta qualidade em dispositivos menores.
• Imagens com texto contendo letras, números ou símbolos devem ser legíveis (por exemplo, gráficos, diagramas técnicos ou mapas). Recomendamos que esse tipo de imagens ocupem pelo menos 80% de largura da tela para uma leitura de alta qualidade em dispositivos menores.
• Visualizações geradas por computador são melhor representadas como gráficos vetoriais escaláveis (SVG), portanto, forneça SVGs sempre que possível. Para line-art, recomendamos fornecer SVGs.
• Não renderize textos como imagens. Se o texto puder ser separado da arte à sua volta, não deve ser uma imagem. Deve ser HTML.
• A legenda da figura, a tabela e a imagem do título devem estar em HTML. Você pode encontrar detalhes sobre tabelas com formato dinâmico na seção Diretrizes para tabelas - Formato dinâmico.
• Para fins de acessibilidade, todas as imagens devem ter texto no atributo alt na tag HTML. Para imagens decorativas, defina alt = "" ou função = "presentation" na tag imagem para que ela possa ser ignorada pela tecnologia assistiva.
• Para contribuir para a melhor experiência do usuário possível em todos os dispositivos e aplicativos Kindle, use imagens coloridas sempre que for possível e relevante.
  
  

Detalhes técnicos

1. Tipos de imagem
   1. Imagens em bloco: Uma imagem em bloco sempre começa em uma nova linha. Esperamos que a maioria das imagens em eBooks Kindle sejam imagens em bloco. Exemplo de uma imagem em bloco, juntamente com o HTML abaixo:
      

      

      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. Imagens flutuantes: Imagens flutuantes são posicionadas à esquerda ou à direita do texto em um contêiner.
      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. Imagens embutidas: Um elemento embutido não inicia em uma nova linha e renderiza na mesma linha que o texto. Defina a altura das imagens embutidas em unidades "EM" de modo que elas sejam exibidas e dimensionadas proporcionalmente em relação ao conteúdo do texto à sua volta. Forneça imagens embutidas em formato sem perdas, como SVGs, quando possível.

      

      HTML:

      <p> Sim <mg src='checkbox.png' alt='Check Box'/> Não <img src='checkbox.png' alt='Check Box'/> Lorem ipsum dolor.. </p>

      CSS:

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

   4. Imagens da capa de livro: As imagens da capa sempre devem ter um layout de página inteira e ter pelo menos 1200 pixels de largura ou altura.

2. Qualidade das imagens
   1. Imagens borradas e embaçadas: A Amazon sinalizará eBooks com imagens desfocadas com um aviso de problema de qualidade de conteúdo na página de detalhes do eBook Amazon. Exemplo de imagem embaçada:

      

   2. Texto ilegível nas imagens: Imagens com texto contendo letras, números ou símbolos devem estar legíveis. Se houver imagens com texto ilegível, um aviso de problema de qualidade de conteúdo aparecerá na página de detalhes do eBook da Amazon. Exemplo de imagem ilegível:

      

   3. Imagens com legendas: Use blocos de figuras para imagens com legendas e certifique-se de não usar raster na legenda com a imagem. É melhor ter legenda no texto e não no formato de imagem. Exemplo de imagem com legenda:

      

      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. Acessibilidade: Para fins de acessibilidade, todas as imagens devem ter texto no atributo alt na tag HTML. Para imagens decorativas, defina alt = "" ou função = "presentation" na tag imagem para que ela possa ser ignorada pela tecnologia assistiva. O texto alternativo deve ser curto, conciso e específico. O texto alternativo deve fornecer uma descrição da imagem e seu significado no contexto, conforme apropriado. Para imagens vinculadas, forneça a finalidade do link em vez da descrição da imagem no texto alternativo.
   HTML:

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

   HTML para decoração:

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

4. Formatos de entrada aceitos: Os dispositivos Kindle e aplicativos de leitura não são compatíveis com arquivos TIFF, GIFs ou imagens com áreas transparentes. Quando as imagens são fornecidas com plano de fundo transparente, nós convertemos o plano de fundo transparente para branco.
5. Perfil de cor ou espaço de cores: Use o perfil de cor sRGB para todas as imagens. O Kindle não é compatível com CMYK. Quando as imagens são fornecidas no espaço de cores CMYK, o Kindle converterá automaticamente as imagens para o espaço de cores sRGB.