18008 sujets
Questions générales et questions de débutants
Si tu fais référence à IE6, il peut très bien les lire, il ne sait juste pas interpréter la transparence alpha.
Je ne sais pas si on peut parler de standard pour GIF et JPEG. Mais il n'y a pas de réelle contre indication à l'utilisation des PNG (pour IE6, il y a toujours moyen, avec les commentaires conditionnels, de subsituer une image avec une transparence moins "jolie").
Je ne sais pas si on peut parler de standard pour GIF et JPEG. Mais il n'y a pas de réelle contre indication à l'utilisation des PNG (pour IE6, il y a toujours moyen, avec les commentaires conditionnels, de subsituer une image avec une transparence moins "jolie").
Bonjour,
1. On utilisera PNG-8 (PNG en couleurs indexées) en remplacement de GIF dans tous les cas. C'est du moins la préconisation des experts ès performances web. Penser à utiliser pngcrush ou un outil tel que smush.it.
2. On peut utiliser le PNG-24 (PNG 16 millions de couleurs, sans couche alpha) sans le moindre souci. Attention: le poids des images en PNG-24 est important, car c'est un format sans perte. Dans de nombreux cas on utilisera plutôt JPEG ou du PNG-8, quitte à faire quelques compromis légers sur la qualité des images pour optimiser tout ça.
3. On peut utiliser le PNG-32 (PNG 16 millions de couleurs, avec couche alpha). On retrouve le problème du poids des images, et aussi la question de la prise en compte de la transparence graduelle. Au sujet de cette dernière, elle est comprise par tous les navigateurs sauf le très vieux IE6. Si on a un intérêt clair à utiliser la transparence graduelle et que le cout en termes de poids des images est acceptable, il est recommandé de prévoir une dégradation gracieuse dans IE6 en utilisant un des deux procédés suivants: a) via un commentaire conditionnel, remplacer les images de fond PNG-32 en un équivalent PNG-8 ou JPEG; b) enregistrer une couleur de fond au PNG-32 (bKGD chunk) qui s'affichera dans IE6 à la place du fond gris clair moche utilisé par défaut. Enfin, il y a la «solution» du filtre DirectX AlphaImageLoader, que je déconseille pour ma part, sauf pour les experts qui savent très précisément ce qu'ils font, qui seront en mesure de l'implémenter correctement et de maintenir ce correctif à travers le temps, et qui n'ignorent pas le cout en termes de performance de ce filtre (100ms de ralentissement de l'affichage de la page par utilisation du filtre).
1. On utilisera PNG-8 (PNG en couleurs indexées) en remplacement de GIF dans tous les cas. C'est du moins la préconisation des experts ès performances web. Penser à utiliser pngcrush ou un outil tel que smush.it.
2. On peut utiliser le PNG-24 (PNG 16 millions de couleurs, sans couche alpha) sans le moindre souci. Attention: le poids des images en PNG-24 est important, car c'est un format sans perte. Dans de nombreux cas on utilisera plutôt JPEG ou du PNG-8, quitte à faire quelques compromis légers sur la qualité des images pour optimiser tout ça.
3. On peut utiliser le PNG-32 (PNG 16 millions de couleurs, avec couche alpha). On retrouve le problème du poids des images, et aussi la question de la prise en compte de la transparence graduelle. Au sujet de cette dernière, elle est comprise par tous les navigateurs sauf le très vieux IE6. Si on a un intérêt clair à utiliser la transparence graduelle et que le cout en termes de poids des images est acceptable, il est recommandé de prévoir une dégradation gracieuse dans IE6 en utilisant un des deux procédés suivants: a) via un commentaire conditionnel, remplacer les images de fond PNG-32 en un équivalent PNG-8 ou JPEG; b) enregistrer une couleur de fond au PNG-32 (bKGD chunk) qui s'affichera dans IE6 à la place du fond gris clair moche utilisé par défaut. Enfin, il y a la «solution» du filtre DirectX AlphaImageLoader, que je déconseille pour ma part, sauf pour les experts qui savent très précisément ce qu'ils font, qui seront en mesure de l'implémenter correctement et de maintenir ce correctif à travers le temps, et qui n'ignorent pas le cout en termes de performance de ce filtre (100ms de ralentissement de l'affichage de la page par utilisation du filtre).
Bonjour.
Ais-je raison de penser que le format .jpg est à utiliser principalement pour les images avec beaucoup de couleurs (typiquement photographies ou images scannées);
et plutôt un PNG-8 (me semble-t-il... un PNG en tout cas) pour les images avec une palette de couleurs plus restreinte, de part le niveau de support de ces couleurs et le poids final de l'image.
J'ai également entendu parler de la taille (dimension) qui interviendrait. Je pense qu'il s'agissait du format JPG pour les images de petite taille, et PNG de préférence pour les autres.
J'ai malheureusement encore perdu mes sources (ce qui, finalement, tient plus de l'habitude que d'un geste maladroit), mais je vous demande confirmation...
Justin
Ais-je raison de penser que le format .jpg est à utiliser principalement pour les images avec beaucoup de couleurs (typiquement photographies ou images scannées);
et plutôt un PNG-8 (me semble-t-il... un PNG en tout cas) pour les images avec une palette de couleurs plus restreinte, de part le niveau de support de ces couleurs et le poids final de l'image.
J'ai également entendu parler de la taille (dimension) qui interviendrait. Je pense qu'il s'agissait du format JPG pour les images de petite taille, et PNG de préférence pour les autres.
J'ai malheureusement encore perdu mes sources (ce qui, finalement, tient plus de l'habitude que d'un geste maladroit), mais je vous demande confirmation...
Justin
just1dks a écrit :
Ais-je raison de penser que le format .jpg est à utiliser principalement pour les images avec beaucoup de couleurs (typiquement photographies ou images scannées);
Oui. À voir au cas par cas, mais pour les photographies notamment il n'y a pas photo (ha ha): ça sera du JPEG.
just1dks a écrit :
et plutôt un PNG-8 (me semble-t-il... un PNG en tout cas) pour les images avec une palette de couleurs plus restreinte, de part le niveau de support de ces couleurs et le poids final de l'image.
Oui aussi. De même que pour des images de petite taille (en dessous de 40px de côté, ça sera presque toujours plus petit et de meilleur qualité en PNG-8).
just1dks a écrit :
Je pense qu'il s'agissait du format JPG pour les images de petite taille, et PNG de préférence pour les autres.
Non, c'est l'inverse. Ceci dit, il y a des exceptions. Un motif géométrique simple en 1000x2000px pourra très bien passer en PNG-8 (voire PNG-24) et mal passer en JPEG.
Enfin, pour certaines images où les contours doivent être nets, notamment pour du texte ou des logos, la compression JPEG peut être trop brutale et «salir» l'image, auquel cas on aura intérêt à utiliser du PNG-8.
Dernière chose: en PNG-8, le nombre de couleurs choisies compte pour le poids final. Le maximum est 256 couleurs, mais la plupart du temps j'oscille entre 8 couleurs et 128 couleurs, suivant les besoins et le type d'image. Inutile d'enregistrer une palette de 256 couleurs pour du texte noir sur fond blanc: 8 ou 16 nuances suffiront largement.
Le mieux est de tester et de s'habituer progressivement au comportement des différents formats.
Modifié par Florent V. (17 Dec 2008 - 15:32)
renato a écrit :
Bonjour les standards pour les images pour le Web sont JPEG et GIF.
De plus en plus ces standards (normes internationales, formats ouverts et standards de fait) deviennent:
- JPEG;
- PNG-8;
- PNG-24;
- PNG-32;
- GIF uniquement pour de petites images animées.
En attendant le APNG (animated PNG).
Florent V. a écrit :
Dernière chose: en PNG-8, le nombre de couleurs choisies compte pour le poids final. Le maximum est 256 couleurs, mais la plupart du temps j'oscille entre 8 couleurs et 128 couleurs, suivant les besoins et le type d'image. Inutile d'enregistrer une palette de 256 couleurs pour du texte noir sur fond blanc: 8 ou 16 nuances suffiront largement.
Quel que soit le nombre de couleur choisies pour l'enregistrement, le résultat sera le même
Bonjour,
Merci à tous pour ces éclaircissements bien intéressants
Bon il est clair que chaque image est, en effet, à prendre au cas par cas. mais en connaissant un minimum des spécificités de chacun des deux formats (pour ma part, je n'emploie que le JPG et le PNG-8 (PNG-16 et + sont un peu trop lourd lors de mes utilisations habituelles; GIF est maintenant sous licence ou quelque chose comme ça ? (source perdue encore ^^ je devrais commencer à prendre note de mes lectures pour ne pas avoir l'air de sortir des trucs "du ciel")), on peut arriver à un gain de temps assez conséquent sur le quotidien
Bien à vous,
Justin
Merci à tous pour ces éclaircissements bien intéressants
Bon il est clair que chaque image est, en effet, à prendre au cas par cas. mais en connaissant un minimum des spécificités de chacun des deux formats (pour ma part, je n'emploie que le JPG et le PNG-8 (PNG-16 et + sont un peu trop lourd lors de mes utilisations habituelles; GIF est maintenant sous licence ou quelque chose comme ça ? (source perdue encore ^^ je devrais commencer à prendre note de mes lectures pour ne pas avoir l'air de sortir des trucs "du ciel")), on peut arriver à un gain de temps assez conséquent sur le quotidien
Bien à vous,
Justin
hello,
Pour ma part j'ai abandonné le png-32, j'utilise le plus méthodiquement possible les aplats d'images.
Ma méthode a les mêmes conséquences que les sprites css à savoir une économie de requêtes HTTP et un gain de chargement non négligeable.
Au niveau rendu il n'y a aucune différence avec l'utilisation du format png-32 que j'utilisais mais IE6 m'a tué( malgré les astuces ).
Cependant cela génère deux inconvénients:
- Faut pas avoir besoin de mettre à jour ton png-32
- Faut pas avoir besoin du z-index (profondeur de "calque")
Ce que je viens de dire concerne uniquement les png comportant une couche alpha, pour le reste tout a été déjà dit.
Voilou
Pour ma part j'ai abandonné le png-32, j'utilise le plus méthodiquement possible les aplats d'images.
Ma méthode a les mêmes conséquences que les sprites css à savoir une économie de requêtes HTTP et un gain de chargement non négligeable.
Au niveau rendu il n'y a aucune différence avec l'utilisation du format png-32 que j'utilisais mais IE6 m'a tué( malgré les astuces ).
Cependant cela génère deux inconvénients:
- Faut pas avoir besoin de mettre à jour ton png-32
- Faut pas avoir besoin du z-index (profondeur de "calque")
Ce que je viens de dire concerne uniquement les png comportant une couche alpha, pour le reste tout a été déjà dit.
Voilou
Ericf a écrit :
Quel que soit le nombre de couleur choisies pour l'enregistrement, le résultat sera le même
J'aurais dû être plus clair: je parle du passage de RVB vers couleurs indexées. Si l'image utilise uniquement 16 couleurs, l'enregistrer avec une palette de 16 couleurs ou 256 couleurs reviendra au même: l'éditeur d'image ne devrait pas rajouter des couleurs fictives ou des doublons dans la palette, donc on aura une palette de 16 couleurs de toutes façons.
Par contre si l'image source contient 4000 couleurs différentes, passer à 32 couleurs sera plus efficace que de passer à 256. Si l'image s'accommode d'un nombre plus réduit de couleurs, on peut gagner pas mal de poids par rapport à un PNG-8 avec une palette de 256 couleurs.
Oui c'est beaucoup plus clair comme ça, et très instructif pour qui connait mal le format PNG
Un article intéressant sur l'optimisation des images : Optimiser ses images
Un article intéressant sur l'optimisation des images : Optimiser ses images