Insertion d'une image

   Il existe différents formats d'images : jpeg, png, gif, bmp, tif, etc. Nous aurons l'occasion d'étudier plus en détail ces formats au cours de la formation.

Pour résumer, 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

* N'importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.

* Une image animée : utilisez un GIF animé.

On utilise les balises <img / > et les attributs src et alt.

 L'attribut src indique l'endroit où se situe l'image.

L'attribut alt donne un texte alternatif à l'image au cas où l'image n'apparaît pas.

   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.

Code : HTML

Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe .;

Il faut éviter à tout prix les accents, majuscules et espaces dans les noms de fichiers et de dossiers. Voici un chemin qui va poser problème : "Images du site/Image toute bête.jpg". Il faudrait supprimer les espaces (ou les remplacer par le symbole « _ »), supprimer les accents et tout mettre en minuscules comme ceci : "images_du_site/image_toute_bete.jpg". Si votre image ne s'affiche pas, c'est très certainement parce que le chemin est incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers, et tout ira bien.

Exercices "Insertion d'une image"