Site Web Formats d'image: Choisir le bon format pour la bonne tâche

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

  •  23-08-2019
  •  | 
  •  

Question

Lors de la conception d'un site Web, que considérez-vous le meilleur format d'image à utiliser pour une tâche particulière?

Je me trouve toujours dans un dilemme en essayant de comprendre ce format à utiliser pour une tâche spécifique ... comme par exemple, Dois-je utiliser .jpg toute? ou quand et pourquoi devrais-je utiliser un .png?

Par exemple, en Amazon site de, ils utilisent . jpg pour les images produits ( exemple ), < strong> gif pour ce pixel transparent ( Exemple ) et .png pour leurs sprites CSS ( Exemple )

Par contre, Play.com utiliser un .gif pour leur logo site web ( exemple ), mais utiliser .jpg pour leurs produits de site web (comme Amazon) ( exemple ) et que jusqu'à leur page principale va, ils nont pas .png s sur elle.

Alors quels formats dois-je utiliser pour mon site Web? et pourquoi devrais-je les utiliser?

[UPDATE]

Merci cruello ce lien pour expliquer les différences, et aussi Dustin pour donner des raisons sur ce qu'il faut utiliser <. / p>

Était-ce utile?

La solution

sont les fichiers JPEG pour les photos. Je vois avec le texte en format JPEG eux de temps en temps et ils ont l'air tout simplement horrible. Texte est préférable pour le texte, sinon utilisez PNG.

Si ce n'est pas une photo, mais vous voulez un graphique, utilisez un PNG. Un PNG est presque toujours plus petit que le gif équivalent et ne pas perdre la qualité comme un fichier JPEG. Un équivalent PNG d'un JPEG sera généralement beaucoup plus grande (en supposant qu'il est photoréaliste). Il peut y avoir des moments où cela est encore souhaitable.

PNG ne permet de 8 bits de transparence, mais si vous devez soutenir IE, vous trouverez qu'ils refusent toujours de soutenir que correctement. Ils ne soutenir autant que je sache, un seul bit de transparence dans une image 8 bits (essentiellement les mêmes que gif). Il y a aussi de nombreux hacks pour obtenir la transparence 8 bits pour travailler dans IE. Je ne l'ai jamais pris la peine, moi-même.

En résumé:

  • Photos → jpg
  • ! Photos → .png

Autres conseils

Vous devez être conscient de quelques facteurs clés ...

Tout d'abord, il existe deux types de compression: Lossless et Lossy .

Lossless signifie que l'image est plus petite, mais sans nuire à la qualité. Lossy signifie que l'image est faite (même) plus petit, mais au détriment de la qualité. Si vous avez enregistré une image dans un format Lossy sur et plus, la qualité d'image serait empirer progressivement et pire encore.

Il y a aussi des profondeurs de couleurs différentes (palettes): Indexed couleur et couleur directe.

Indexed , cela signifie que l'image ne peut stocker un nombre limité de couleurs (généralement 256) qui sont choisis par l'auteur de l'image, avec Direct cela signifie que vous peut stocker plusieurs milliers de couleurs qui ne sont pas choisis par l'auteur.

BMP - Lossless / Indexed et direct

Ceci est un ancien format. Il est Lossless (aucune donnée d'image est perdue sur Enregistrer), mais il y a aussi peu à aucune compression, ce qui signifie des économies que les résultats BMP dans la taille des fichiers très volumineux. Il peut avoir des palettes de deux indexées et direct, mais c'est une petite consolation. Les tailles de fichiers sont si inutilement grand que personne ne l'utilise vraiment ce format.

Bon pour: Rien vraiment. Il n'y a rien BMP excelle, ou ne se fait pas mieux par d'autres formats.

BMP vs GIF

GIF - Lossless / INDEXED seulement

GIF utilise la compression sans perte, ce qui signifie que vous pouvez enregistrer l'image sur et plus et ne jamais perdre de données. Les tailles de fichiers sont beaucoup plus petites que BMP, car une bonne compression est effectivement utilisé, mais il ne peut stocker une palette indexée. Cela signifie qu'il ne peut y avoir un maximum de 256 couleurs différentes dans le fichier. Cela ressemble à une très petite quantité, et il est.

images GIF peuvent également être animés et ont la transparence.

Bon pour: Logos, dessins au trait, et d'autres images simples qui doivent être petits. Seulement vraiment utilisé pour les sites web.

GIF vs JPEG

JPEG - Lossy / Direct

images JPEGs ont été conçus pour faire des images photographiques détaillées aussi faible que possible en supprimant les informations que l'œil humain ne remarque pas. Par conséquent, il est un format Lossy, et en enregistrant le même fichier, encore et entraînera plus de pertes de données au fil du temps. Il a une palette de milliers de couleurs et est donc idéal pour les photos, mais la compression avec perte signifie qu'il est mauvais pour les logos et les dessins: Non seulement elle sera floue, mais ces images auront également une plus grande taille du fichier par rapport à GIFs!

Conseillé pour: Photographies. , Gradients aussi.

JPEG vs GIF

PNG-8 - Lossless / Indexed

PNG est un format plus récent et PNG-8 (la version indexée de PNG) est vraiment un bon remplacement pour GIFs. Malheureusement, cependant, il a quelques inconvénients: Tout d'abord, il ne peut pas soutenir l'animation comme GIF peut (bien qu'il peut, mais seulement Firefox semble le soutenir, contrairement à l'animation GIF qui est pris en charge par tous les navigateurs). En second lieu, il a des problèmes de support avec les anciens navigateurs comme IE6. Troisièmement, des logiciels importants comme Photoshop ont mise en œuvre très pauvre du format. (Bon sang, Adobe!) PNG-8 ne peut stocker 256 couleurs, comme GIFs.

Bon pour:. La principale chose que la PNG-8 fait mieux que GIFs est d'avoir un soutien pour la transparence alpha

PNG-8 vs GIF

Remarque importante: Photoshop ne supporte pas Alpha Transparence pour les fichiers PNG-8. (Bon sang, Photoshop!) Il y a plusieurs façons de convertir Photoshop PNG-24 fichiers PNG-8 tout en conservant leur transparence, cependant. Une méthode est pngquant , une autre est d'enregistrer vos fichiers avec Fireworks .

PNG-24 - Lossless / Direct

PNG-24 est un grand format qui combine avec encodage sans perte de couleur directe (en milliers de couleurs, tout comme JPEG). Il est très bien comme BMP à cet égard, sauf que PNG compresse les images en fait, il en résulte des fichiers beaucoup plus petits. Malheureusement, les fichiers PNG-24 seront encore beaucoup plus grand que, GIFs et JPEGs PNG-8s, donc vous devez toujours considérer si vous voulez vraiment utiliser un.

Même si PNG-24s permettent à des milliers de couleurs tout en ayant la compression, ils ne sont pas destinés à remplacer les images JPEG. Une photographie enregistrée au format PNG-24 sera probablement au moins 5 fois plus grande que l'équivalent image JPEG, avec très peu d'amélioration de la qualité visible. (Bien sûr, cela peut être un résultat souhaitable si vous n'êtes pas préoccupé par la taille du fichier, et que vous voulez obtenir la meilleure image de qualité que vous pouvez.)

Tout comme PNG-8, PNG-24 prend en charge la transparence alpha, aussi.

J'espère que cela!

PNG doit être utilisé lorsque:

  • Vous avez besoin de transparence (soit 1 bit ou transparence alpha)
  • La compression sans perte va bien fonctionner (comme pour un graphique ou un logo, ou image générée par ordinateur)

JPEG doit être utilisé lorsque:

  • La compression sans perte ne fonctionne pas bien (comme une photo)
  • couleur complète est nécessaire

GIF devrait être quand:

  • PNG ne sont pas disponibles, comme sur un logiciel très ancien ou navigateurs
  • L'animation est nécessaire

En dépit de mythes au contraire, PNG surclasse GIF dans la plupart des aspects. PNG est capable de tous les modes d'image GIF en dehors de l'animation, et en utilisant le même mode d'image, PNG aura une meilleure compression grâce à son algorithme de DEFLATE supérieur par rapport à LZW. PNG est également capable de modes supplémentaires que GIF ne peut pas faire, tels que la couleur 24 bits, et la transparence alpha, mais c'est là que vous pouvez rencontrer des problèmes sur le web. la transparence Alpha a des problèmes de compatibilité avec IE6 qui sont bien documentés (bien hacks existent pour se déplacer).

modes PNG comprennent (ce qui est juste un petit sous-ensemble)

  • couleur de palette de 2 à 256 couleurs (comme GIF)
  • couleur de palette de 2 à 256 couleurs, avec la couleur transparente (comme GIF)
  • True color (couleur 24 bits)
  • couleur vraie avec canal alpha (24 bit couleur + 8 bits de transparence alpha)

Pour une meilleure compression PNG pour le web, utilisez toujours un mode de palette. Si vous trouvez des fichiers PNG sont plus grandes que les fichiers GIF équivalents, alors vous enregistrez le fichier PNG en 24 bits couleur et le GIF en mode palette (car un GIF est toujours en mode palette). Essayez de convertir en mode palette première.

Si vous trouvez que vos fichiers PNG avec transparence ne fonctionnent pas correctement dans IE6 alors que vos fichiers GIF sont, vous utilisez 24 bits couleur + transparence alpha en PNG et le mode de palette avec une couleur transparente avec GIF. Vous devrez vous assurer que vous convertissez votre PNG en mode couleur palettisée avec une couleur transparente.

PNG a également d'autres modes tels que la couleur de la palette avec transparence alpha dans la palette. Les modes tels que celui-ci ne peuvent pas être utilisés dans Photoshop.

Essayez de regarder ce site http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Ils essaient d'expliquer ce qu'il faut utiliser lorsque

Si vous stockez ou la présentation d'un grand nombre d'images de la nouvelle format Google WebP pourrait être à considérer qu'il est 25% plus petit que le format PNG / JPG. Notez que ce ne sont pas pris en charge par tous les navigateurs du moment. NB. Cela est sorti en 2010 après cette question a été publiée.

JPEG FORMAT DE FICHIER

  1. Idéal pour les images lorsque vous devez garder la petite taille
  2. Bonne option pour les photos
  3. Bad pour les logos, l'art de la ligne, et de larges aplats de couleur

GIF FORMAT DE FICHIER

  1. Idéal pour les effets animés
  2. option intéressante pour clip art, graphiques plats, et des images qui utilisent des couleurs minimales et des lignes précises
  3. Bonne option pour les logos simples avec des blocs de couleurs

PNG FORMAT DE FICHIER

  1. Lossless
  2. Un excellent choix lorsque la transparence est un must
  3. Bonne option pour les logos et l'art de la ligne
  4. Non pris en charge partout

Vous pouvez voir cette infographies pour des informations plus détaillées, image Types de fichiers: Quand utiliser le format JPEG, GIF et PNG

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