Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Quel format d'images choisir pour le web ?

Quel format d'images choisir pour le web ?

Ce chapitre est d'une importance cruciale. En fait le format d'image envisageable, change d'un contexte à un autre, d'une circonstance à une autre. Avant d'opter pour un format d'images. Il faut tout d'abord songer aux effets escomptés (transparence binaire ou graduelle, animation, niveaux de gris etc.), le compromis taille/qualité, et le type d'images à insérer (bouton, bannière, icône, puce, image photographique etc.). Comme ça vous allez optimiser votre choix

Le format JPEG

Le format d'images JPEG très adapté a la compression d'images à plusieurs couleurs (plus de 256 couleurs) et à ton (degré d'intensité d'une couleur) continu ou si vous voulez images avec des dégradés de couleurs telles que des photographies, images réelles telles qu'une capture d'écran vidéo.

Ce format est à éviter pour ce qui concerne les captures d'écran faites à l'aide d'un système d'exploitation comme le Windows grâce à la combinaison fn+prt sc (print screen : imprimer écran). L'expérience à démontrer que les formats PNG et GIF permettent de mieux compresser les captures d'écran à l'aide d'une plateforme. On doit aussi oublier ce format lorsqu'on cherche un effet de transparence.

Exemple

Tim Berners-Lee, créateur du html

Le format PNG-8 et GIF

Formats très adapté pour la représentation des petits dessins composés de formes vectorielles (droite, cercle, carré etc.), les petits graphiques qui comportent peu de couleurs tels que des logos, puces, boutons, schémas, dessins comportant du texte, icônes etc. tous les deux formats peuvent être envisagés pour ces cas, mais le PNG-8 jouit d'un taux de compression plus intéressant que le GIF.

Le GIF a l'avantage de supporter les images animées (gif animé), un format animé a été prévu pour le PNG à savoir le MNG mais il n'est pas encore supporté par les navigateurs png pour l'état actuel des choses utilisez un GIF animé en attendant que le MNG soit supporté par tous les navigateurs répandus.

Exemples

Le format PNG-24

Le format PNG-24 est assez adapté pour la compression d'images à ton continu qui comportent plus de 256 couleurs, généralement le PNG-24 est utilisé pour son avantage de transparence graduelle à 256 niveaux, donc si vous voulez uniquement enregistrer des images TrueColor (couleurs vraies) vous feriez mieux d'opter pour le JPEG qui permet de compresser davantage les images à couleurs vraies.

Une autre astuce pour représenter les images qui contiennent plus de 256 couleurs consiste à utiliser l'un des formats PNG-8 ou GIF et puis d'appliquer un tramage (diffusion, motif ou bruit) à l'image pour simuler des couleurs qui existent dans l'image originale mais qui font défaut dans la palette, le tramage permet de créer virtuellement d'autres couleurs en mélangeant les couleurs disponibles dans la palette.

Exemple

Vous pouvez déplacer l'image à l'aide de la souris pour tester la transparence graduelle du format PNG-24png-24

Le format PNG-24 peut aussi être envisagé pour la représentation d'images de type photographie, mais ça va créer des fichiers plus volumineux que le JPEG, pour cela je vous recommande de l'utiliser uniquement pour solliciter des effets de transparence graduelle.

Afin de bien appréhender la notion de transparence multiniveau déplacer les trois images des navigateurs ci-dessous sur le contenu de la page, vous allez constatez que les icônes de l'image PNG-24 laissent plus ou moins apparaître ce qui est affiché en-dessous, contrairement aux formats PNG-8 et GIF qui supportent uniquement une transparence binaire (les pixels partiellement transparents sont devenus totalement opaques dans les deux formats PNG-8 et GIF).

Passons au chapitre suivant qui s'inscrit dans la même philosophie Optimiser une image pour le web avec Photoshop.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau