• Introduction
• Introduction au HTML5
• Présentation
• Prise en main
• Utiliser des balises
• Utiliser des attributs
• Structurer un document avec HTML5
• Le doctype : définir l'utilisation du HTML
• L'en-tête
• Structure de l'information
• Organiser le contenu
• Ecrire du texte
• Des caractères spéciaux
• Listes
• Tableaux
• Naviguer grâce aux liens
• Le multimédia
• Images
• Video
• Audio
• Sous-titrage HTML
• Fallbacks
• Interface avec l'utilisateur
• Les formulaires
• Les balises d'interface
• Annexes
• Différences en xHTML et HTML5
• Glossaire
• test

Ajouter des images

Les images peuvent être des éléments importants du document. Une page web contenant des images est immédiatement plus attractives que vide de toute illustration.

Les formats d'images souvent utilisés

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

• jpeg ;
• png ;
• gif ;
• svg (générés avec Inkscape).

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" />

La balise img est particulière utilisée pour les 3 premier formats. En ce qui concerne le SVG, format spécifique au dessin vectoriel, à l'inverse des précédents, d'autres possibilités d'insertion existent conduisant parfois à des différences d'affichage ou de potentiel.

L'attribut alt est considéré comme obligatoire est doit contenir un petit descriptif du contenu de l'image. Il est aussi utilisé par certains navigateurs en place de l'image en cas d'erreur de chargement.Cependant, on peut voir sur l'illustration suivante que selon les navigateurs, la valeur de l'attribut alt peut être affichée différemment.

<nav>
  <ul>
    <li><a href="http://google.fr" title="Google c'est les meilleurs"  target="toto">Google</a></li>
    <li><a href="http://linuxfr.org/toto.pdf" download="http://linuxfr.org/toto.pdf"  target="toto">LinuxFr</a></li>
    <li><a href="http://en.flossmanuals.net" hreflang="en" target="toto">flossmanuals</a></li>
    <li><a href="#citation" >Aller à la citation</a></li>
  </ul>
  </nav>
  
  <img src="http://www.activdesign.eu/images/site/logo.png"   
     alt="logo de l'école de graphisme"   /> 

Ajout de légendes aux images

Il a longtemps été difficile d'associer des textes aux images. Diverses solutions ont eu cours, mais rien n'était officiel ce qui posait évidemment des problèmes de référencement, car les légendes peuvent être des sources d'informations non négligeables pour préciser le contenu d'une image qui est par nature par référençable.

Comme pour les h1 placés dans des header ou hgroup, on placera l'image dans un élément parent figure et on y rajoutera donc la balise img ainsi que figcaption qui en contiendra la légende. Cela donnera le code suivant :

<figure>
   <img src="/_templates/fm_resources/FM-header.png" alt="son descriptif" />
   <figcaption>légende : logo Fmfr</figcaption>
</figure>

ce qui donnera :

Pour rappel, les noms de fichier des images et le contenu des attributs alt sont essentiels pour assurer un référencement correct.

Insertion d'images redimensionnables et zoomables

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

• du contenu léger pour ne pas ralentir l'affichage de la page ;
• 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 fichiers 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 :

• manuel Inkscape : http://fr.flossmanuals.net/initiation-inkscape/
• manuel SVG : http://fr.flossmanuals.net/SVG/

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. 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 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 navigateurs. 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. 

<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 :

• permet de créer des formes géométriques (rect) ;
• permet de créer à partir de vecteur (path) ;
• définit la position et la taille des éléments (x, y, width, height) ;
• définit 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.

Voici le résultat obtenu en agrandissant dans Readium, une extension au navigateur Chrome.

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