HTML : Les images

Pour vos pages HTML, il faut savoir que les éléments graphiques doivent être optimisés dans un format reconnu sur la toile. Gif, jpeg et Png sont les formats d’images reconnus par tous les navigateurs.

Les formats d’images

• Le format GIF

Le format Gif est le format de fichier le plus souvent utilisé pour afficher des graphiques couleurs indexés et des images dans des documents HTML. Le GIF est un format compressé conçu pour minimiser la taille des fichiers et la durée des transferts électroniques.

• Le format JPEG

Le format Jpeg est fréquemment utilisé pour afficher des photographies et d’autres images en dégradés dans des documents HTML. Le format JPEG prend en charge les modes de couleur CMJN, RVB et niveaux de gris, mais pas les couches alpha. Contrairement au format GIF, JPEG conserve toutes les informations concernant les couleurs dans une image RVB mais diminue la taille du fichier en éliminant les données de façon sélective.

• Le format PNG

Le format Png sert à la compression sans perte et à l’affichage d’images. Contrairement au GIF, PNG prend en charge les images 24 bits et produit une transparence de fond sans bords dentelés ; néanmoins, certaines versions plus anciennes de navigateurs Web peuvent ne pas prendre en charge les images PNG. Le format PNG prend en charge les modes de couleur niveaux de gris et RVB avec une seule couche alpha, et les modes Bitmap et couleurs indexées sans couche alpha.

Utilisation des images

La balise <IMG> comporte de nombreux attributs (en voici quelques-un) :

<IMG SRC="nom_image.gif">

Vos images se trouvent dans un autre répertoire :

<IMG SRC="nom_dossier/nom_image.gif">

La taille des images :

Pour un chargement optimum de vos images, il est utile de préciser la taille de vos images. Dans l’exemple ci-dessous, l’image fait 20 pixels de large et 50 pixels de hauteur.

<IMG SRC="nom_image.gif" WIDTH="20" HEIGHT="50">

Mettre une bordure à vos images :

L’attribut BORDER permet d’ajouter à l’image une bordure. Il prend une valeur n qui exprime la largeur de la bordure.

<IMG SRC="nom_image.gif" BORDER="1">

Les espaces d’images :

Les attributs HSPACE="n" VSPACE="n" permettent de définir un espace vertical et horizontal autour de votre image.

<IMG SRC="nom_image.gif" HSPACE="2" VSPACE="2">

Alignement de vos images :

Si vous voulez encadrer une image avec du texte l’attribut ALIGN est requis :

- LEFT : Texte à gauche
- RIGHT : Texte à droite
- MIDDLE : Texte au milieu
- ABSBOTTOM : Texte en bas absolu
- ABSMIDDLE : Texte au milieu absolu
- BASELINE : Sur la ligne du texte
- BOTTOM : Texte en bas
- TEXTTOP : Texte en haut
- TOP : Image en haut

Exemple :

<IMG SRC="nom_image.gif" ALIGN="RIGHT">

Format PDF l l afficher une version imprimable de cet article Imprimer cet article