Médiaforma

All posts tagged png

Les formats d’image GIF et PNG permettent de définir une couleur de transparence. Vous pourrez ainsi superposer deux images en faisant en sorte que celle qui se trouve en avant-plan s’intègre parfaitement à celle qui se trouve en arrière-plan. Dans cette rubrique, je vais vous montrer comment obtenir cet effet :

Si le logiciel Photofiltre n’est pas encore installé sur votre ordinateur, rendez-vous sur la page http://www.photofiltre-studio.com/download.htm et installez-le.

Lancez Photofiltre en tapant photofiltre dans la zone de texte Rechercher du menu Démarrer. Ouvrez le fichier pour lequel vous voulez créer une couleur de transparence. Assurez-vous que ce fichier est au format GIF ou PNG, sans quoi, vous ne pourrez pas définir une couleur de transparence. Sélectionnez l’outil Baguette magique et cliquez sur la zone blanche qui entoure l’image. Cette zone est maintenant sélectionnée. Déroulez le menu Image, pointez Transparence automatique et cliquez sur Région intérieure à la sélection. Cette simple commande rend l’arrière-plan de l’image transparent. Sauvegardez l’image ainsi modifiée en lui donnant un autre nom. Ici, nous choisissons le nom chat-transparent.png.

Il ne reste plus qu’à écrire quelques lignes de HTML pour superposer le chat et l’arrière-plan.

La ligne 8 met en place l’image d’arrière-plan et l’affiche en haut et à gauche de la fenêtre du navigateur.

La ligne 9 affiche le chat au-dessus de l’arrière-plan. Pour ceux qui n’auraient pas suivi les rubriques précédentes, l’attribut z-index définit l’ordre de superposition des éléments. Plus sa valeur est grande, plus l’élément se trouve en avant-plan. Ici, le z-index du chat vaut 2 et celui de l’arrière-plan vaut 1 : le chat se trouve dont devant l’arrière-plan. Les coordonnées top et left sont initialisées à 80px et 40px pour centrer le chat sur l’arrière-plan.


Pour afficher des images dans un document Web, vous pouvez utiliser trois formats de fichiers : gif, jpg et png.

Le format jpg est bien adapté aux photos. Il peut contenir jusqu’à 16 millions de couleurs. Les images sont compressées avec perte et il est possible de choisir le facteur de compression, et donc, la qualité de l’image.

Le format gif est limité à 256 couleurs. Les images sont compressées sans perte. Les fichiers de ce format sont donc de petite taille, à condition que le nombre de couleurs utilisées ne soit pas trop important. Si nécessaire, il est possible de définir une couleur de transparence.

Le format png peut contenir 16 millions de couleurs. Les images sont compressées sans perte. Tout comme pour le format gif, il est possible de définir une couleur de transparence.

Pour mettre en évidence les performances de chaque format, nous avons sauvegardé un dessin et une photo aux formats jpg, gif et png. A l’œil nu, il n’y a aucune différence entre les différents formats de fichiers. Par contre, le dessin est bien plus léger lorsqu’il est sauvegardé au format gif et la photo lorsqu’elle est sauvegardée au format jpg.

Il est très important que vos pages Web soient aussi légères que possible. Vous devrez donc choisir le format d’image le plus approprié au cas par cas.