Images et Figures

Il existe plus d’une centaine de formats de fichiers images, dont beaucoup sont des formats natifs utilisés par une seule application. Voici les plus standards

• JPEG (Joint Photographic Expert Group) : format avec compression à choisir au moment de la sauvegarde. Palette millions de couleurs bits). vaut mieux enregistrer les fichiers JPEG à partir de l’image originale et non à partir d’un fichier JPEG enregistré précédemment. La transparence n’est pas conservée en JPEG.
• GIF (Graphic Interchange Format) : créé par Compuserve, palette 256 couleurs (8 bits), avec conservation de la transparence (fond invisible). Idéal pour téléchargement rapide d’images contrastées. Et possibilité de faire des GIF Animées. Souvent utilisé pour les puces.
• PNG (Portable Network Graphic) : créé pour le Web, il combine les avantages de GIF et JPEG : couleurs 32 bits, transparence et compression sans perte de qualité.
• SVG (Scalable Vector Graphics) : format vectoriel pour le web, mais nécessite un lecteur SVG.
• TIFF (Tagged Image File Format) : possibilité de compression LZW (Lempel‐Ziv‐Welch) sans perte de qualité, un peu lourd. Le bon format pour toute utilisation standard si on a assez de place. Garde également les calques.
• BMP : format standard PC, accepté par la plupart des logiciels PC

Insérer une image

<p>
Une photo de souvenir:<br />
<img src="images/montagne.jpg" alt="Photo souvenir" />
</p>

évitez les accents et supprimer les espaces dans les noms de fichiers

Ajout d’une infobulle

<p>
Une photo de souvenir:<br />
<img src="images/montagne.jpg" alt="Photo souvenir" />
title="C'est une photo de souvenir !"
</p>

Image miniature cliquable
Si votre image est très grosse, il est conseillé d’en afficher la miniature sur votre site.
Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l’image en taille originale.

<p> Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br />
<a href="img/petite_image.jpg">
<img src="img/grande_image.jpg"
     alt="Photo de souvenir" 
     title="Cliquez pour agrandir" />
</a> 
</p>

Création d’une figure

<figure>
   <img src="firefox.png" alt="Firefox" /> 
   <figcaption>Le navigateur Firefox</figcaption>
</figure>

Figure avec plusieurs images

<figure>
   <img src="firefox.png" alt="Firefox" />
   <img src="chrome.png" alt="Google Chrome" />
   <img src="explorer png" alt="Internet Explorer" />
   
   <figcaption>Les navigateurs Internet</figcaption>
</figure>