On va donc faire le tour des formats d'images pour que vous sachiez lequel choisir :

- JPEG : ce format est très répandu. Il est particulièrement adapté pour les photos. L'extensions est généralement ".jpg" ou ".jpeg", c'est pareil.
Voici une imageg jpeg :



- PNG : le PNG est le plus récent. Il est adapté à la plupart des images ( presque à tous ce qui n'est pas une photo ). Son avantage, c'est qu'il peut être transparents, ce qui est très pratique.
Il existe 2 versions de PNG :
       - Le PNG 8 bits : cette version est limitée à 256 couleur, ce qui est peu quand on sait que le jpeg peut en supporter quelques millions de couleurs... Mais ça suffit quand même pour les petits graphismes.

       - Le PNG 24 bits : c'est la version la plus évoluée. Elle comporte plusieurs millions de couleurs ( comme le JPEG ). Quel est l'intérêt de l'utiliser au lieu du JPEG ? La transparence !
Malheureusement, Internet Explorer est largement en ratrd : il affichera l'image en PNG, mais pas la transparence...
Nous n'allons donc pas utiliser des images en 24 bits pour que les utilisateurs d'Explorer ne soient pas génés...

- GIF : c'est un format assez bieux, mais qui a été très utilisé. Aujourd'huis, le PNG est meilleure que le GIF, il est donc préférable d'utiliser le PNG le plus possible.
Le format GIF est limité à 256 couleurs, mais son avantage est qu'il peut être animé !

Les autres formats sont déconseillés car trop lourd, pas du tout adapté au web.
En gros, vous devez adapter le format en fonction de l'image :
- Une photo ( ou avec beaucoup de couleur ) : utilisez un JPEG.
- Un graphisme avec peu de couleurs : utilisez un 8 bits si possible, sinon un GIF.
- Une image animé : utilisez un GIF animé.

Insérer une image

Maintenant, place au XHTML ! :)
Pour mettre une image, on utilise <img /> .
C'est une balise seule. Elle prend plusieurs attributs, mais 2 sont obligatoires :
- src : il indique ou se trouve l'image. Le lien peut soit être en relatif soit en absolu.
- alt : ça signifie " text alternatif ". Il doit toujours y avoir un text alternatif, souvent un text court décrivant l'image. Ce text sera affiché si l'image ne peut pas être télécharger ou sur les naviguateurs de personnes mal-voyantes qui ne peuvent pas voir l'image. Cela peut être embétant de mettre un alt, mais si vous n'en mettez pas, votre page ne sera pas valide et sera detectée comme non conforme aux normes.

Voila, insérer une image est très facile, mais n'oubliez pas de mettre <img /> à l'intérieur des balises <p> et </p>, sinon encore une fois votre page ne sera pas valide.

Un bulle d'aide :

Vous pouvez ajouter une bulle d'aide qui s'affichera quand la souris pointera sur l'image.
L'attribut utilisé est "title".
Cet attribut est facultatif.

Voila, c'est pas bien compliqué ! ;)

Une image cliquable :

L'image peut très bien servir de lien : il suffit de remplacer le text entre <a> et </a> par <img /> !

Le problème, c'est qu'un moche cadre bleu ou violet s'affiche autour de l'image ...
Heureusement, on va pouvoir régler tout ça grâce au CSS !

Préssé d'y être, n'est ce pas ? ^^
On y va !