SELFHTML actuel Articles spécialisés Graphisme et Multimédia| SELFHTML actuel Articles spécialisés Graphisme et Multimédia |
 |
Roland Bilger:
|
|
|
 | |
| Adresse électronique: |  roland@webvolume.de |
| Présence Internet: |  http://www.webvolume.de |
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
 |
GIF et JPEG sont - malgré l'apparition de formats plus nouveaux comme PNG ou encore SVG - les deux formats les plus courants et les plus répandus pour les graphiques de pages Web.
Les différences fondamentales entre les deux formats sont décrites dans SELFHTML au chapitre 
Formats graphiques pour pages Web. L'article suivant traite l'application dans la pratique et montre dans quels cas l'un ou l'autre format est le mieux adapté.
| |
Le nombre élevé de couleurs différentes existant dans la plupart des photographies est décisif lors du choix du format de graphiques:
Le format GIF possède une palette de couleurs d'un maximum de 256 couleurs. Cela signifie que vous pouvez d'une part réduire la taille d'un fichier GIF en réduisant le nombre de couleurs, et que d'autre part, 256 couleurs sont généralement insuffisantes pour une bonne photo.
Le format JPEG, lui, sauvegarde davantage d'informations couleur et garantit de ce fait un nombre élevé de couleurs. La compression flexible rend possible une réduction de la taille du fichier JPEG sans avoir trop d'impact sur la qualité de l'image.
À titre d'exemple, voici une photo avec un ciel bien bleu:
| JPEG ( 200 x 270 pixel ) 11.9 Ko | GIF (200 x 270 pixel ) 14,8 Ko |
 |
 |
Comme vous voyez, la réduction du nombre de couleurs par le GIF provoque de vilaines bandes dans les dégradés de couleurs, en particulier au niveau du ciel et de certaines parties du drapeau norvégien. Les 256 couleurs différentes ne suffisent pas à obtenir un dégradé de couleurs régulier. Ce problème n'apparaît pas avec le format JPEG.
La taille du fichier est, par rapport au GIF, visiblement inférieure: 11,9 Ko au lieu de 14,8 Ko. Cependant, l'image JPEG a été compressée à 50%.
| |
La photo JPEG fournit avec une compression de 50% une qualité satisfaisante. Les dégradés de couleurs du ciel et du drapeau apparaissent dans toutes leurs couleurs:
| JPEG (sans compression) 71,0 Ko | JPEG (compression 50%) 11,9 Ko |
 |
|
Si cependant on observe l'image à l'agrandissement, on peut très bien reconnaître comment fonctionne la compression du format JPEG:
Dans des parties carrées, les informations couleur sont résumées en leurs valeurs moyennes.
Cet agrandissement montre également quel est l'un des inconvénients de JPEG: les lignes distinctes délimitant les différentes couleurs s'estompent et débordent plus la compression est élevée.
Plus vous choisissez une meilleure qualité, plus ces carrés sont petits et moins cet inconvénient est visible.
| |
Dans certains cas, l'utilisation du format GIF peut être judicieuse même pour des photos. Un exemple:
| JPEG (sans compression) 66,0 Ko | GIF (32 couleurs) 12,0 Ko |
 |
 |
La photographie présentée ici ne contient que peu de nuances de couleurs (noir, vert et jaune) et aucun dégradé.
Malgré la réduction à 32 couleurs pour le GIF, il n'apparaît aucune perte visible: même les fils électriques et les aiguilles de l'horloge sont très précisément rendus. Ceux-ci seraient estompés et irréguliers si pour la même image on utilisait le format JPEG avec compression.
| |
Le logo du site Webvolume n'est composé que de deux couleurs différentes. La plupart des logos sont fait ainsi, c'est à dire, peu de surfaces colorées et quelques mots ou de simples lettres. Pour de tels graphiques, l'emploi du format GIF est idéal. Il permet d'obtenir une taille de fichier minime permettant au logo d'être chargé rapidement et d'apparaître tout de suite sur la page Web. D'autre part, il est possible d'utiliser l'effet de transparence du format GIF. La couleur d'arrière-plan du graphique peut être définie comme "transparente", c'est à dire que, même sur fonds noir, uniquement le texte du logo suivant serait visible.
GIF: 16 couleurs 2,18 Ko
Le GIF ci-dessus a été sauvegardé sans transparence avec 16 couleurs différentes, pour permettre une douce transition des couleurs du texte sur l'arrière-plan blanc. Remarquez la taille du fichier!
GIF: 4 couleurs 1,35 Ko
Pour comparer, le GIF ci-dessus ne contient que 4 couleurs différentes: ici, le nombre de couleurs est insuffisant, les bords du texte montrent un "effet d'escalier".
JPEG: compression 80% 3,53 Ko
Ici, le même logo a été sauvegardé en JPEG. L'importante compression cause des brouillages aux bords des surfaces de couleur.
| |
GIF sera le meilleur choix si vous désirez représenter du texte sous forme de graphiques. Ceci est dû au fait que le format GIF est davantage en mesure de représenter clairement des lignes distinctes - comme, par exemple, les bords des lettres - que le format JPEG.
Pour des parties texte simples, c'est à dire sans effets spéciaux comme ombres, reliefs, etc., suffisent généralement 16 couleurs. Ainsi, les textes sous forme de graphiques de vos pages Web seront clairs et nets et sans effet d'escalier.
Exemples:
GIF 16 couleurs 2,32 Ko :
Avec 16 couleurs, le texte est lisible et sans effet d'escalier.
GIF 3 couleurs 1,29 Ko :
Avec 3 couleurs, les "marches d'escalier" sont en revanche bien visibles, surtout pour les lettres arrondies.
JPEG compression 80% 2,70 Ko :
JPEG est ici totalement inadapté: Le texte est flou, et aux bords des lettres apparaissent des brouillages. De plus, le fichier est plus grand qu'avec le format GIF.
|
|
| SELFHTML actuel Articles spécialisés Graphisme et Multimédia |