Quel format pour les petites images de sites Web? GIF ou PNG? [fermé]

StackOverflow https://stackoverflow.com/questions/115818

  •  02-07-2019
  •  | 
  •  

Question

Lorsque vous faites de petites icônes, des en-têtes graphiques, etc., pour les sites Web, est-il préférable d'utiliser des GIF ou des PNG?

Évidemment, si des effets de transparence sont nécessaires, les fichiers PNG sont définitivement la solution. Pour les images plus grandes et plus photographiques, je choisirais les JPEG - mais pour les & "Web classiques", ce qui serait vous recommandez et pourquoi? Ce sont peut-être juste les outils que j'utilise, mais les fichiers GIF semblent généralement être un peu plus petits qu'un fichier PNG comparable, mais leur utilisation semble tout simplement être de 1987.

Était-ce utile?

La solution

En règle générale, le format PNG n’est jamais pire, et souvent meilleur que le format GIF en raison de la compression supérieure. Il peut y avoir des cas où GIF est légèrement meilleur (parce que le format PNG peut avoir une surcharge légèrement plus importante due aux métadonnées), mais cela ne vaut vraiment pas la peine de s’inquiéter.

  

Ce ne sont peut-être que les outils que j'utilise, mais les fichiers GIF semblent généralement un peu plus petits qu'un fichier PNG comparable

Cela peut en effet être dû à l'outil de codage que vous utilisez.

/ EDIT: Wow, il semble y avoir beaucoup d’idées fausses sur la taille des fichiers PNG. Pour citer Matt:

  

Il n’ya rien de mal avec les GIF pour les images peu colorées, et comme vous avez pu le constater, elles ont tendance à être plus petites.

Il s'agit d'une erreur de codage typique et non inhérente au format. Vous pouvez contrôler la profondeur de couleur et réduire la taille du fichier PNG. Veuillez consulter la section pertinente de l'article de Wikipédia.

De plus, le manque de support dans MSIE6 est exagéré par Chrono:

  

Si vous avez besoin de transparence et pouvez vous débrouiller avec des GIF, je les recommanderais car IE6 les prend en charge. IE6 ne fonctionne pas bien avec les PNG transparents.

C'est faux. MSIE6 prend en charge la transparence PNG. Il ne prend pas en charge le canal alpha (sans quelques manipulations), mais il s’agit d’une question différente, car les fichiers GIF ne l’ont pas du tout.

La seule raison technique d'utiliser des fichiers GIF au lieu de fichiers PNG est une utilisation qui nécessite une animation et ne veut pas dépendre d'autres formats.

Autres conseils

Le W3C mentionne 3 avantages de PNG sur GIF.

& # 8226; Canaux alpha (variable transparence),

& # 8226; Correction gamma multiplateforme (contrôle de la luminosité de l'image) et correction de couleur

& # 8226; Entrelacement bidimensionnel (un méthode d'affichage progressif).

Consultez également ces ressources à titre indicatif:

Wow, je suis vraiment surpris de toutes les mauvaises réponses ici. Le format PNG-8 sera toujours inférieur au format GIF lorsque correctement optimisé. Exécutez simplement vos fichiers PNG-8 via PngCrush ou l'un des autres. Routines d’optimisation PNG.

Les éléments clés à comprendre:

  • Les fichiers PNG8 et GIF sont sans perte < = 256 couleurs
  • Le format PNG8 peut toujours être inférieur au format GIF
  • Les fichiers GIF ne doivent jamais être utilisés à moins que vous n'ayez besoin d'animation

et bien sûr,

  • Utilisez JPG pour le noir & images photographiques en blanc ou en couleur
  • Utilisez le format PNG pour les couleurs de faible qualité, les dessins au trait et les images de type de capture d'écran

La principale raison d'utiliser PNG sur GIF d'un point de vue juridique est décrite ici:

http://www.cloanto.com/users/mcb/19950127giflzw.html

Les brevets ont apparemment expiré depuis 2004, mais l'idée que vous puissiez utiliser PNG en tant que source ouverte sur GIF fait appel à beaucoup de gens.

(Référence au format open source png: http: //www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS )

Faites attention aux changements de couleur lorsque vous utilisez le format PNG. Ce lien donne un exemple et contient beaucoup plus de liens avec des explications supplémentaires:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNC

Les images GIF ne sont pas soumises à ce problème.

Je ne pense pas que cela fasse une grande différence (les clients s'en moquent). Personnellement, je choisirais les PNG parce qu’ils sont une norme du W3C.

Faites attention aux effets de transparence de PNG: ils ne fonctionnent pas avec IE6.

Pour les images sur le Web, chaque format a ses avantages et ses inconvénients. Pour les images de type photo (c.-à-d. Beaucoup de couleurs, pas de bords nets), utilisez un JPEG.

Pour les icônes et similaires, vous avez le choix entre PNG et GIF. Les GIF sont limités à 256 couleurs. Les PNG peuvent être formatés comme des GIF (c.-à-d. 256 couleurs, avec une transparence d'un bit qui fonctionnera sous IE6), mais pour les petites images, elles sont légèrement plus grandes que les GIF. Les PNG 24 bits prennent en charge une large gamme de couleurs et la transparence alpha (bien que cela pose problème dans IE6).

PNGS est votre seul choix vraiment judicieux pour des captures d'écran (par exemple, beaucoup de couleurs et de bords durs), et personnellement, c'est ce que je préfère la plupart du temps, sauf si j'ai quelque chose pour lequel JPEG est plus approprié (comme une photo).

Le format PNG indexé (moins de 256 couleurs) est en fait toujours plus petit que gif, je l’utilise donc la plupart du temps.

Pour les graphiques générés par ordinateur (c'est-à-dire dessinés par vous-même dans Photoshop, Gimp, etc.), JPG est hors de question, car il y a un risque de perte, c'est-à-dire que vous obtenez des pixels gris aléatoires. Pour les images statiques, le format PNG est meilleur à tous les niveaux: plus de couleurs, transparence évolutive (par exemple, 10% de transparence, le format .gif ne prend en charge que 0% et 100%), mais certaines versions d'Internet Explorer ne fonctionnent pas avec PNG. transparence correctement, de sorte que vous obtenez un fond plat non transparent qui a l'air laid. Si vous ne vous souciez pas de ces utilisateurs d'IE, optez pour PNG.

BTW, si vous voulez des animations, optez pour le format GIF.

PNG remplace à 100% les fichiers GIF et est pris en charge par tous les navigateurs Web que vous êtes susceptible de rencontrer.

Il existe très très peu de situations dans lesquelles un format GIF serait préférable. Le plus important est l’animation - la norme GIF89a prend en charge l’animation, et pratiquement tous les navigateurs la prennent en charge, mais pas l’ancien format PNG - vous auriez besoin d’utiliser MNG pour cela, qui ne prend pas en charge les navigateurs.

Pratiquement tous les navigateurs prennent en charge la transparence mono-bit dans les fichiers PNG (type de transparence offert par le format GIF). IE6 ne prend pas en charge la totalité de la transparence 8 bits de PNG, mais cela peut être corrigé dans la plupart des situations par un peu de magie CSS.

Si vos fichiers PNG sont plus volumineux que des fichiers GIF équivalents, c'est probablement que votre image source contient plus de 256 couleurs. Les fichiers GIF sont indexés sur une palette maximale de 256 couleurs, tandis que les fichiers PNG de la plupart des programmes graphiques sont enregistrés par défaut dans un format sans perte 24 bits. Si la taille du fichier est plus importante que des couleurs précises, enregistrez-le au format PNG indexé sur 8 bits. Ce fichier doit être équivalent à GIF ou mieux.

Il est possible de " pirater & "; Un fichier GIF comportant plus de 256 couleurs utilisant une combinaison d'images d'animation avec des drapeaux à ne pas remplacer et des palettes multiples, mais cette approche a pratiquement été oublié depuis l'avènement de PNG.

Un problème majeur avec les fichiers GIF est qu’il s’agit d’un format encombré par un brevet (EDIT: apparemment, ce n’est plus vrai). Si vous ne vous en souciez pas, n'hésitez pas à utiliser les GIF. Les PNG ont beaucoup plus de flexibilité par rapport aux GIF, en particulier dans le domaine des espaces colorimétriques, mais cette flexibilité implique souvent que vous souhaitiez & "Optimiser &"; les PNG avant de les publier. Une recherche sur le Web devrait permettre de découvrir des outils pour votre plate-forme.

Bien sûr, si vous voulez une animation, le format GIF est la seule solution, car MNG était fondamentalement un non-initiateur pour une raison quelconque.

Personnellement, j’utilise un peu gif pour mes images, car elles fonctionnent partout, de toute évidence, votre limite de transparence est un élément clé qui dirigerait une personne vers un format spécifique.

Je ne vois pas d'inconvénient à utiliser gif.

S'ils deviennent plus petits et que vous n'avez aucun avantage à utiliser les fonctionnalités offertes par PNG (transparence du canal alpha et plus de 256 couleurs), je ne vois pas pourquoi vous devriez utiliser PNG.

Les fichiers

gif auront tendance à être un peu plus petits car ils ne supportent pas le canal alpha de transparence (et peut-être pour d'autres raisons). Personnellement, je ne pense pas que la différence de taille vaille vraiment la peine de s’inquiéter autant qu’avant. La plupart des gens utilisent actuellement le Web avec une sorte de haut débit, alors je doute qu'ils remarqueront une différence.

Il est probablement plus important d’utiliser le type d’image avec lequel vos outils de manipulation fonctionnent le mieux.

De plus, j'aime la possibilité de placer une image sur n’importe quel fond et de travailler dans une ombre portée, ce qui me dirige davantage vers le format png.

J'utilise généralement gif en raison de sa taille, mais il existe également un fichier png-8 qui contient également 256 couleurs.

Si vous avez besoin d'éléments semi-transparents sophistiqués, utilisez png-24.

J'utilise généralement la fonctionnalité "Enregistrer pour le Web" de photoshop, qui vous permet de manipuler le type de fichier, le nombre de couleurs, etc. et de voir le résultat avant de sauvegarder. Bien sûr, je voudrais utiliser le plus petit possible qui a toujours l’air beau à mes yeux.

J'utilise jpg pour toutes les images non transparentes. Vous pouvez contrôler la compression, ce que j'aime bien. J'ai trouvé ce site Web qui compare les deux. jpg est plus petit et a meilleure apparence.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top