Les images.
Il existe différents formats d'image que l'on peut utiliser sur des sites web, et on ne doit pas les choisir au hasard.
En effet, les images sont parfois volumineuses à télécharger, ce qui ralentit le temps de chargement de la page.
- Il existe un format adapté à chaque image -
Si on résume, voici quel format adopter en fonction de l'image que vous avez :
• Une photo : utilisez un JPEG.
• N'importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits ou éventuellement un GIF.
• N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
• Une image animée : utilisez un GIF animé.
Choisissez bien le nom de votre image
Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules,
sans espace ni accent,
par exemple : mon_image.png.
Vous pouvez remplacer les espaces par le tiret du 8 => "_"
- Insertion d'une image -
Quelle est la fameuse balise qui va nous permettre d'insérer une image ?
Il s'agit de… <img />
C'est une balise de type orpheline (comme <br />).
Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici.
En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis.
La balise doit être accompagnée de deux attributs obligatoires :
• src : il permet d'indiquer où se trouve l'image que l'on veut insérer.
Vous pouvez soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png),
soit mettre le chemin en relatif (ce qu'on fait le plus souvent).
Ainsi, si votre image est dans un sous-dossier images, vous devrez taper : src="images/fleur.png"
• alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image,
c'est-à-dire un court texte qui décrit ce que contient l'image.
Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (cela arrive),
ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image.
Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour la fleur, on mettrait par exemple : alt="Une fleur".
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p> et </p>).
Voici un exemple d'insertion d'image :
<img src="picture/MOHW1.jpg" alt="capture_de_jeux">
Ce qui donne:
- Ajouter une infobulle à l’image -
L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de <title>.
Cet attribut est facultatif (contrairement à alt).
Voici ce que cela peut donner :
<img src="picture/divers/MOHW1.jpg" alt="capture_de_jeux" title="C'est un bon jeux!" >
Ce qui donne:
- 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.
Il existe des millions de logiciels permettant de créer des miniatures d'images.
J'utilise personnellement Format Factory qui converti vraiment tous.
Un redimentionnement de : Largeur max. 640 Hauteur max. 480 en jpg me convient bien.
Je vais ainsi disposer de deux versions de ma photo, la miniature et l'image d'origine.
Je les place toutes les deux dans un dossier appelé par exemple "picture".
J'affiche la version MOHW1_mini.jpg sur ma page et je fais un lien vers MOHW1.jpg pour que l'image agrandie s'affiche lorsqu'on clique sur la miniature.
Voici le code HTML que je vais utiliser pour cela :
<a href="picture/MOHW1.jpg"> <img src="picture/MOHW1_mini.jpg" alt="capture d'ecran d'un celebre jeux" title="Cliquez pour agrandir"></a>
Ce qui donne:
Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très esthétique autour de votre image cliquable.
Heureusement, nous pourrons retirer ce cadre dans peu de temps grâce au CSS.
- Les figures. -
Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.
Les figures peuvent être de différents types :
- images ;
- codes source ;
- citations ;
- etc.
Tout ce qui vient illustrer le texte est une figure.
Nous allons ici nous intéresser aux images mais, contrairement à ce que l'on pourrait croire, les figures ne sont pas forcément des images
Création d'une figure
En HTML5, on dispose de la balise <figure>, voici comment on pourrait l'utiliser :
<figure>
<img src="picture/MOHW1.jpg" alt="capture_de_jeux">
</figure>
Ce qui donne:
Création d'une légende
Une figure est le plus souvent accompagnée d'une légende.
Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure>, comme ceci :
<figure>
<img src="picture/MOHW1.jpg" alt="capture_de_jeux">
<figcaption>Une capture d'un célèbre jeux</figcaption>
</figure>
Ce qui donne:
==> NOTE: <==
La balise <figure> a un rôle avant tout sémantique.
Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte.
Cela peut permettre à un programme de récupérer toutes les figures du texte et de les référencer dans une table des figures, par exemple.
En résumé
Si une image illustre le texte (et n'est pas seulement décorative),
il est conseillé de la placer au sein d'une balise </figure>.
La balise </figcaption> permet d'écrire la légende de l'image.