Les images

• JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos, et c'est d'ailleurs souvent dans ce format-là qu'est l'image de votre fond d'écran Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" (ça revient au même).
  Voici un exemple d'image au format JPEG :
  
  
  
  palmiers.jpg
  
  
  
• PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable.
  Le PNG existe en 2 versions :
  
  • PNG 8 bits : le PNG 8 bits est la version du PNG limitée à 256 couleurs. 256 couleurs c'est assez peu, quand on sait que le JPEG supporte plusieurs millions de couleurs... Mais ça suffit bien souvent pour des petits graphiques, comme par exemple celui-ci :
    
    
    
    fleur.png (8 bits)
    
    
    
  • PNG 24 bits : le PNG 24 bits est la version du PNG la plus évoluée, elle supporte plusieurs millions de couleurs (comme le JPEG). Quel intérêt d'utiliser le PNG 24 plutôt que le JPEG ? Pour la transparence ! Ca permet de créer de beaux effets de transparence facilement sur des éléments graphiques, notamment pour le design de votre site web.
    Malheureusement voilà, ce serait trop beau et il fallait qu'il y ait anguille sous roche : les versions un peu anciennes d'Internet Explorer (IE6 notamment) sont à la masse. Le PNG 24 bits n'est pas bien géré : IE 6 peut afficher l'image, mais n'affichera pas la transparence. Regardez cette image :
    
    
    
    voiture.png (24 bits)
    
    
    Regardez cette image une première fois sous Mozilla Firefox, vous allez voir que la transparence est correcte. Regardez ensuite l'image sous Internet Explorer 6 : pas de transparence, c'est assez moche. Internet Explorer 7 règle ce problème mais IE 6 reste toutefois assez répandu.
  
  
• GIF : c'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est bien meilleur que le GIF : les images sont plus légères et la transparence est meilleure. Je vous recommande donc d'utiliser le PNG autant que possible.
  Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs). Si je vous parle du GIF, c'est qu'il conserve quand même un avantage que le PNG n'a pas : il peut être animé. Exemple :
  
  
  
  manga.gif

• Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG.
• Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible car le format est meilleur, sinon utilisez un GIF.
• Une image animée : utilisez un GIF animé.

• src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en 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 (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Pour la fleur, on mettrait par exemple :
  alt="Une fleur"
  Je suis conscient que cela doit vous paraître barbant de mettre un texte alternatif, surtout que ça ne vous semble pas à priori "utile", mais il faut absoluement que vous le fassiez. Si vous ne le faites pas, votre page ne sera plus une page XHTML "valide" et votre site sera détecté comme non conforme aux normes.

1
2
3
4

<p>
   Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
   <img src="images/hawai.jpg" alt="Photo de Hawaii" />
</p>

Evitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Voici un chemin qui va poser problème :
"Images du site/Image tout 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"
Sachez donc que 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

Une bulle d'aide

1
2
3
4

<p>
   Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
   <img src="images/hawai.jpg" alt="Photo de Hawaii" title="Ca fait envie hein ?" />
</p>

• L'attribut permettant d'afficher une bulle d'aide est title.
• Sous Internet Explorer seulement, le texte alternatif (alt) est affiché sous forme de bulle d'aide s'il n'y a pas d'attribut title. C'est un cas particulier car normalement on n'affiche pas le texte alternatif sous forme de bulle d'aide.
• Si vous avez mis les deux attributs (alt et title) alors Internet Explorer affichera le texte du title sous forme de bulle d'aide, ce qui cette fois est normal.
• Tous les autres navigateurs sauf Internet Explorer afficheront une bulle d'aide seulement s'il y a un attribut title.

Image cliquable

1
2
3
4

<p>
   Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur l'image ci-dessous :<br />
   <a href="http://www.siteduzero.com"><img src="images/hawai.jpg" alt="Photo de Hawaii" title="Clique pour voyager !" /></a>
</p>