HTML

L’icône de votre site dans les favoris de IE5

Les images - Image, design et photographies

Bien que l’on retrouve deux types d’images dans une page Web, celles qui composent le design et les autres, la principale caractéristique des images sur Internet est celle d’être exclusivement de forme rectangulaire. Peu importe son usage, son format, qu’elle soit imbriquée ou en image de fond, c’est un rectangle de x (largeur) par y (hauteur) pixels. Le secret à la base de tout design sur le Web est donc possible grâce à une astuce fort simple ; La transparence sur une la couleur ou image de fond. En jouant sur le fond des images, par la couleur, ou même par motif répétitif (patern), les différentes images peuvent être imbriqué donnant ainsi l’illusion des formes les plus diverses.

Exemple du design du site de Marcel Barbeau, les images découpées sont combinées sur une couleur de fond uniforme.

À défaut de trouver votre image dans une banque d’image ou sur Google, la conception d’images pour le Web est un art en soit. Je vous invite à consulter la section Infographie particulièrement les tutoriels suivants :

• Format des images
• Les Layers ou les couches
• Indexation des images

La balise <img>
Une image est avant tout un fichier de format jpeg, gif, png ou bmp. C’est un fichier indépendant qui doit être transféré tout comme une page Web. L’image doit aussi être chargée par le navigateur avant d’être mise en mémoire cache puis affichée dans la page. Il arrive souvent en effet, qu’une page Web n’affiche pas certaines images qui n’ont tout simplement pas été transférées sur le serveur en même temps que la page HTML!

L’attribut src
Pour indiquer au navigateur où se trouve l’image, nous utilisons le même système d’adressage qu’une page HTML. C’est à dire le URL (Universal Resource Locator). Voir href.

<!--Image RELATIVE située dans le même dossier (répertoire) que le document HTML. -->
<img src="monImage.png" />

<!--Image RELATIVE au document HTML. -->
<img src="/images/monImage.png" />

<!-- Image ABSOLUE avec une l’adresse en entier. Cette située peut se trouver -->
<!-- sur un autre serveur (distant) que le document HTML d’origine. -->
<img src="http://www.trucsweb.com/images/monImage.png" />

 

Dimensions de l’image (width et height)
Bien que ce soit optionnel, il est fortement recommandé d’indiquer les dimensions exactes de l’image afin d’améliorer la performance du Navigateur. Sachez toute fois que le navigateur est en mesure d’afficher correctement les images avec les bonnes dimensions. Ce qui permet plusieurs astuces. Par exemple modifier de façon dynamique la grandeur d’une image! En ne spécifiant que la largeur, la hauteur est automatiquement évaluée par le navigateur. Inversement, en ne spécifiant que la hauteur. Cette astuce permet de garder les proportions d’une image «redimentionnée».

Pour trouver les dimensions exactes d’une image, ouvrez l’image dans un navigateur en tapant le «url» de l’image directement dans la barre d’adresse.

Noter que le navigateur déformer l’image. En principe, cette méthode ne s’utilise que pour normaliser la hauteur ou la largeur de plusieurs vignettes. Pour véritablement redimensionner une image, il faut un logiciel spécialisé.

<!--Image RELATIVE située dans le même dossier (répertoire) que le document HTML. -->
<img src="monImage.png" width="150" height="150" />
 

» Suite Les images : Pour préserver la capture des images