Les images

Voici un petit topo sur les images. En effet les pages webs de texte sont assez peu attrayantes. Il faut donc utiliser des images pour les colorer et les rendre vivantes parfois. Cependant il faut faire attention car les images sont des éléments assez lourds à charger (50 Ko c'est 10s avec un modem 56K).

Les formats

Il y a deux formats d'images que peuvent lire les navigateurs: les GIF et les JPEG. Chacun d'entre eux a ses avantages et ses inconvénients. Une petite présentation s'impose.

Les GIF

Les fichiers GIF possèdent l'extension .gif. Ils servent particulièrement à compacter des images dont le nombre de couleurs est peu élevé (256 maximum acceptées par le format). Lorsqu'on entre dans le cas de figure de moins de 64 couleurs, ce format devient très très avantageux (comme pour l'image ci à gauche). D'autant plus qu'il n'altère pas la qualité de l'image.

Autre avantage des GIFS: ils peuvent être transparents. C'est à dire qu'ils reconnaissent "transparent" comme une couleur ce qui permet de faire des images avec des contours non carrés, qui laissent apparaître le fond de la page. Cette propriété est à user et abuser. En effet il est très gênant de faire des pages avec des images carrées basiques car elles donnent une impression de blocs pas très esthétiques.

Typiquement des images de type logos assez simples, du texte, se prêtent bien à la réduction du nombre de couleurs et donc à la compression GIF. Une photo ne doit pas être compressée en GIF.

Les JPG

Ce format dont les extensions sont .jpg et .jpe est très utilisé pour les photos. En effet il est très économe en place pour des images dont le nombre de couleurs est élevé. Cependant à l'opposé du GIF, il compresse l'image et donc altère en partie sa qualité.

Typiquement, les photos et toutes les images avec des dégradés lents sont à compresser en JPG.

Insérer une image

L'image est marquée par une seule balise :

<IMG SRC="adresse" BORDER=nombre WIDTH=Largeur HEIGHT=hauteur ALIGN=alignement ALT="texte">

On remarque qu'il y a beaucoup d'attributs possibles. Le seul indispensable est SRC (et IMG mais ce n'est pas un attribut).

• SRC : adresse de l'image (on fait comme pour les liens)
• BORDER : permet de spécifier la taille de la bordure en pixels . Très utile si on ne veut pas avoir de bordure (mettre BORDER=0). En effet si une image sert de lien, elle est par défaut entourée d'une bordure de 3 pixels pas toujours très esthétique.
• WIDTH : permet d'imposer et de spécifier la largeur de l'image (en pixels). Par défaut l'explorateur utilise la taille réelle de l'image.
• HEIGHT : même chose que WIDTH mais pour la hauteur.
• ALIGN : un attribut très utile. En effet, il permet de coller l'image contre un des bords de la page et laisse alors le texte s'écouler autour de celle-ci. Si on n'utilise pas ALIGN, le texte mis après l'image commencera à la ligne au-dessous de l'image. Pour aligner à gauche: ALIGN=left ; à droite: ALIGN=right
• ALT : Permet de mettre un commentaire sur l'image. Ce commentaire apparaît derrière le pointeur de la souris lorsqu'il passe sur l'image. Ne pas oublier de mettre le texte entre guillemets!!!!

Voici un petit exemple avec le texte qui coule le long de l'image :

Le code suivant :

Donne le résultat suivant :

Créer tes images

Créer tes images va te demander un certain nombre de compétences et de matériel.

Tu vas devoir utiliser à coup sûr un logiciel de dessin (par exemple Photoshop, mais il y en a plein qui sont, eux, gratuits). Ce logiciel te permettra de retoucher l'image (voire de la créer à partir de rien) et de la mettre à la bonne taille (plus une image est grande, plus elle est lourde à charger)

Enfin le truc indispensable est bien entendu le scanner, ou l'appareil photo numérique, qui te permet de passer tes photos et tes dessins, si tu as du talent, en format numérique. Si tu n'en possèdes pas tu peux toujours négocier avec un copain...