Sites


Créer un Epub

Ajouter des images

Les images peuvent être des éléments importants du document. Dans le cas d'un roman, la seule image sera peut-être celle de couverture, dans d'autres cas (magazines, guides...) elles seront plus nombreuses et certainement plus variées.

Spécificités des images dans un livre électronique

Le livre électronique est technologiquement très différent du livre papier. L'un des éléments le plus frappants pour un débutant en création de documents epub est souvent l'absence partielle de contrôle sur le résultat final. En effet, c'est le lecteur qui en a les clés. De toute la chaîne de vie d'un livre électronique, le lecteur est celui qui a le moins de connaissance sur le sujet et qui a la liberté de choisir son achat.

Les terminaux de lecture, monochrome ou multicouleur, étant très variés en termes de dimensions (de 2 à 30 pouces de diagonale) et les logiciels pouvant varier dans leur interprétation du fichier epub, le lecteur pourra avoir sous les yeux un document bien différent de celui qui a été conçu par l'éditeur.

Les formats d'images utilisables en epub

Tous les types d'images ne sont pas utilisables et leur rendu pourra varier. Donc, oubliez vos fichiers Photoshop au format PSD et exportez dans un des formats suivants :

  • jpeg ;
  • png ;
  • gif ;
  • svg.

La balise servant à placer une image est img, suivie de l'attribut src, sous la forme : 

  <img src="chemin/nomImage" alt="Texte alternatif" title="Titre" />

par exemple : 

<img src="#/Images/Fra_Carnevale_-_The_Ideal_City_-_Walters_37677.jpg" width="1160px" />

Les images doivent être placées au préalable dans le dossier Images de votre structure epub de manière à y faire référence par un simple chemin d'accès ../Images. Si vous codez votre epub vous-même, n'oubliez pas de rajouter votre ressource dans le fichier content.opf.

Dans Sigil, un simple clic droit sur le dossier Images > Ajouter fichiers..., pour la rendre disponible puis utilisez le bouton d'insertion d'image pour la placer dans le document.

Ajouter une couverture

L'insertion de la couverture est obligatoire. Certaines plateformes ont des spécificités précises en ce qui concerne ses dimensions. Pendant longtemps, la norme a été du 600px par 800px. Désormais Amazon demande du 1000px de large et Apple du 1400px. Il se peut que la couverture ne s'affiche pas du tout à cause de son poids ou de ses dimensions. Il est donc important de la tester sur plusieurs supports.

Vous pouvez par exemple définir ainsi la classe CSS de votre couverture, avec une indentation nulle et un alignement centré : 

 .cover {
text-indent:0;
text-align:center;
} 

ce qui donne dans le code Epub/HTML5: 

<div class="cover"><img src="#/Images/Fra_Carnevale_-_The_Ideal_City_-_Walters_37677.jpg" width="1160px" /></div>

Si vous avez une image en mode portrait et que vous voulez qu'elle prenne toute la tout l'écran, modifiez "width=100" en "height=100%".  Le <div> peut éventuellement être remplacé par un <p> si nécessaire.

Pensez qu'une couverture d'epub doit être lisible dans une très petite taille, car les plateformes de vente d'epub affichent des tailles miniatures. Le titre, le nom de l'auteur et l'éditeur doivent donc être formatés en assez grands caractères. 

Dans le fichier content.opf, pour vous assurer que votre couverture passe partout, et notamment chez Apple, vérifiez votre ligne de code, générée parfois automatiquement, notamment par Sigil, et assurez-vous que votre <meta content> définisse le nom de votre fichier image de couverture et que son nom soit "cover" (name="cover"). Vérifiez toujours l'extension et la casse des noms de vos fichiers image. En cas d'erreur elle ne sera pas affichée. 

<meta content="cover.png" name="cover" /> 

 En Epub3, la spécification propose d'ajouter l'attribut properties avec la valeur cover-image. Cette méthode tend à se répandre est se retrouve utilisée par de nombreux logiciels de lecture, y compris gratuits. 

<meta name="cover" content="cover.png" properties="cover-image" />

Insertion d'images redimensionnables et zoomables

L'epub, en tant que proposition basée sur des standards du web, définit le SVG (scalable vector graphic) comme format de représentation graphique sous forme vectorielle.

Les avantages du SVG

Si vos images étaient au format .ai, .eps, .cdr ou autre, oubliez-les, elles ne remplissent pas les objectifs de l'édition web :

  • du contenu léger pour faciliter le téléchargement sur des appareils éventuellement mobiles et économiser la batterie des périphériques de lecture ;
  • permettre l'indexation du contenu par les moteurs de recherche si celui-ci est important ;
  • permettre une interaction entre le contenu de la page et le contenu de l'image ;
  • créer des animations ou transitions éventuelles.

SVG remplit tous ces objectifs et fournit en plus d'autres avantages liés aux fontes ou à quelques autres sujets. Le logiciel le plus compétent à l'heure actuelle dans la création de fichier SVG est Inkscape, mais Illustrator peut également enregistrer au format SVG même si les résultats sont moins concluants.

Pour plus d'informations sur Inkscape et le SVG reportez-vous aux manuels spécifiques :

Dans quel cas utiliser des SVG ?

En impression, l'utilisation de fichiers vectoriels permet de laisser le RIP générer le bitmap à sa résolution de sortie sans perte et assure alors la qualité maximale. En édition électronique, de façon identique, le SVG permettra à l'image de s'adapter à la résolution du logiciel ou matériel de lecture de votre livre epub. Il conviendra parfaitement pour les :

  • logos ;
  • cartes et plans ;
  • graphiques ;
  • contenus interactifs ;
  • contenus devant s'adapter à la page (bandes dessinées, mangas, présentations type diaporama...).

En utilisant un logiciel de création, produire des SVG est très simple. Vous pouvez aussi créer ou personnaliser directement dans le code, qui ressemble beaucoup à du code HTML. Si vous souhaitez du contenu interactif ou animé, l'étape de modification de code sera nécessaire.

Attention cependant, si vous souhaitez réaliser des documents complexes, à veiller aux points suivants :

  • l'intégralité des capacités offertes par le SVG n'est pas nécessairement utile pour un livre (par exemple les contenus animés). Epub définit donc un sous-ensemble utile et exclut certaines parties de la recommandation ;
  • il faudra faire de nombreux tests, car le rendu du fichier est entièrement assuré par le logiciel de lecture du livre et la qualité d'affichage peut varier très sensiblement.

Insérer un fichier SVG dans un livre epub sous forme d'image liée

Le type d'insertion le plus simple est d'utiliser le fichier SVG comme une image "classique". Pour cela, il suffit d'utiliser l'élément img et de passer l'adresse et le nom du fichier SVG en valeur de l'attribut src : 

  <img src="#/Images/plan_appartement.svg" alt="page 6"  />

Le rendu ne sera pas purement vectoriel, car un cache bitmap semble être réalisé sur plusieurs logiciels de lecture. Mais cette solution est la plus universelle et simple à mettre en œuvre.

Insertion d'un fichier SVG sous forme native

L'insertion d'un fichier SVG directement dans le code de l'epub est l'autre forme pour assurer la préservation vectorielle maximale, mais elle aura l'inconvénient d'alourdir le code de la page HTML de l'epub et d'en complexifier sa mise à jour. Cependant elle permet d'éviter des problèmes de relation et d'insérer le code svg directement dans la page HTML, à l'endroit voulu, par un simple copier-coller. Dans l'exemple qui suit, vous trouverez un panneau "sens interdit" produit dans Inkscape. Il suffira d'afficher le code svg dans un éditeur de texte de la même façon qu'avec une page web, de copier la partie du code qui est entre <svg> et </svg> et de le coller dans la page epub.  

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="67"
   height="67"
   id="svg3199"
   version="1.1">
  <g
     id="layer1"
     transform="translate(-103.57143,-255.93361)">
    <g
       transform="translate(-142.85715,-232.14286)"
       id="ico_dont">
      <path
         transform="matrix(1.46875,0,0,1.46875,40.803571,213.49128)"
         d="m
185.71429,209.80876 c 0,12.62365 -10.23349,22.85714
-22.85714,22.85714 C 150.2335,232.6659 140,222.43241 140,209.80876 c
0,-12.62365 10.2335,-22.85714 22.85715,-22.85714 12.62365,0
22.85714,10.23349 22.85714,22.85714 z"
         ry="22.857143"
         rx="22.857143"
         cy="209.80876"
         cx="162.85715"
         id="path2992"
         style="fill:#483737"
/>
      <rect
         style="fill:#ffffff;fill-opacity:1;stroke:none"
         id="btn_dont"
         width="50.357143"
         height="16.785715"
         x="254.28571"
         y="514.14789"
/>
    </g>
  </g>
</svg>

Ce code montre aussi la personnalité du SVG et la façon de le construire. Dans l'exemple ci-dessus, l'utilisation de certaines fonctions d'Inkscape a complexifié légèrement certaines portions, mais on peut voir que le SVG :

  • permets de créer des formes géométriques (rect) ;
  • permets de créer à partir de vecteur (path) ;
  • définis la position et la taille des éléments (x, y, width, height) ;
  • définis l'aspect des éléments par l'utilisation du CSS (ici écrit directement dans l'attribut style, mais qui pourrait aussi être lié à une feuille de style externe). 

Dans bien des cas, quand il s'agit de dessins, plans... un fichier SVG va s'avérer bien plus léger qu'un équivalent en JPG ou PNG avec une qualité de rendu supérieur. Dans le cas du plan ci-dessous, le fichier SVG occupe 47 ko, et peut être agrandi à volonté pour laisser le lecteur analyser des détails. Pour arriver à un taux d'agrandissement à peu près équivalent sur cette page à 1200 pixels, notre image enregistrée en PNG ferait 1000 ko soit 1Mo, 20 fois plus.

Page incorporant un plan en SVG, une image en jpg

Voici le résultat obtenu en agrandissant dans Readium, l'extension au navigateur Chrome validée par l'IDPF :

Et le même rendu avec une image png, mais dont le poids sera 20 fois supérieur !

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.