35

Web サイトの小さなアイコンやヘッダー グラフィックなどを作成する場合、GIF と PNG のどちらを使用するのがよいでしょうか?

明らかに、透明効果が必要な場合は、PNG が最適です。より大きく、より写真の多い画像の場合は JPEG を使用しますが、通常の Web の「家具」の場合は、どちらをお勧めしますか?またその理由は? それは私が使用しているツールかもしれませんが、GIF ファイルは通常、同等の PNG よりも少し小さいように見えますが、それらを使用すると 1987 年のように見えます.

4

17 に答える 17

58

原則として、PNGは決して悪くはなく、優れた圧縮のためにGIFよりも優れていることがよくあります。GIFの方がわずかに優れているエッジケースがあるかもしれませんが(PNG形式ではメタデータからのオーバーヘッドがわずかに大きくなる可能性があるため)、心配する価値はありません。

それは私が使用しているツールかもしれませんが、GIFファイルは通常、同等のPNGよりも少し小さいようです

それは確かにあなたが使用しているエンコーディングツールが原因である可能性があります。

/編集:うわー、PNGファイルのサイズについては多くの誤解があるようです。マットを引用するには:

色の少ない画像のGIFには何の問題もありません。お気づきのとおり、GIFは小さくなる傾向があります。

これは典型的なエンコーディングの間違いであり、フォーマットに固有のものではありません。色深度を制御して、PNGファイルを小さくすることができます。ウィキペディアの記事の関連セクションを参照してください。

また、MSIE6でのサポートの欠如は、Chronoによって不釣り合いに吹き飛ばされています。

透明性が必要で、GIFを使用できる場合は、IE6でサポートされているのでお勧めします。IE6は、透明なPNGではうまく機能しません。

それは間違っている。MSIE6PNG透過性をサポートしています。アルファチャネルは(いくつかのハックなしで)サポートされていませんが、GIFにはまったく含まれていないため、これは別の問題です。

PNGの代わりにGIFを使用する唯一の技術的な理由は、アニメーションが必要で、他の形式に依存したくない場合です。

于 2008-09-22T16:18:20.967 に答える
12

W3Cは、GIFに対するPNGの3つの利点について言及しています。

•アルファチャネル(可変透明度)、

•クロスプラットフォームのガンマ補正(画像の明るさの制御)とカラー補正

•2次元インターレース(プログレッシブ表示の方法)。

また、ガイダンスについては、次のリソースを参照してください。

于 2008-09-22T16:20:47.810 に答える
7

うわー、私はここですべての間違った答えに本当に驚いています. 適切に最適化すると、PNG-8 は常に GIF よりも小さくなります。PNG-8 ファイルをPngCrushまたはその他の PNG 最適化ルーチンで実行するだけです。

理解すべき重要事項:

  • PNG8 と GIF はロスレス <= 256 色です
  • PNG8 は常に GIF よりも小さくすることができます
  • アニメーションが必要な場合を除き、GIF は使用しないでください。

そしてもちろん、

  • モノクロまたはフルカラーの写真画像には JPG を使用してください
  • ローカラー、ライン アート、スクリーンショット タイプの画像には PNG を使用します。
于 2008-09-22T17:13:41.630 に答える
5

法的な観点からPNGoverGIFを使用する主な理由は、次のとおりです。

http://www.cloanto.com/users/mcb/199​​50127giflzw.html

特許は2004年に失効したようですが、PNGをGIFよりもオープンソースとして使用できるという考えは多くの人にとって魅力的です。

(pngオープンソースリファレンス:http ://www.linuxtoday.com/news_story.php3?ltsn = 1999-09-09-021-04-PS )

于 2008-09-22T16:17:28.193 に答える
3

PNG を使用する場合は、色ずれに注意してください。このリンクには例があり、詳細な説明を含むさらに多くのリンクが含まれています。

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

GIF 画像はこの問題の影響を受けません。

于 2008-09-24T17:03:39.750 に答える
2

私はそれが大きな違いを生むとは思いません(顧客は気にしません)。個人的には、PNGはW3C標準であるため、PNGを選択します。

PNGの透明効果には注意してください。IE6では機能しません。

于 2008-09-22T16:18:20.907 に答える
2

Web 上の画像の場合、各形式には長所と短所があります。写真タイプの画像 (つまり、非常に多くの色があり、ハード エッジがない) の場合は、JPEG を使用します。

アイコンなどはPNGとGIFから選べます。GIF は 256 色に制限されています。PNG は GIF のようにフォーマットできます (つまり、256 色、IE6 で動作する 1 ビットの透明度) が、小さな画像の場合、GIF よりもわずかに大きくなります。24 ビット PNG は広い色域とアルファ透明度の両方をサポートします (IE6 では面倒ですが)。

PNG は、スクリーンショット (つまり、多くの色ハード エッジの両方) のようなものに対して唯一の本当に賢明な選択であり、個人的には、JPEG がより適しているもの (写真など) がない限り、ほとんどの場合、これに固執します。 )。

于 2008-09-22T16:22:31.237 に答える
2

インデックス付き PNG (256 色未満) は、実際には常に gif よりも小さいので、ほとんどの場合、それを使用します。

于 2008-09-22T17:20:09.383 に答える
1

GIFの主な問題は、それが特許に抵触する形式であるということです(編集:これは明らかにもはや真実ではありません)。それを気にしない場合は、GIFを自由に使用してください。PNGは、特に色空間の領域でGIFよりもはるかに柔軟性がありますが、その柔軟性は、多くの場合、PNGを公開する前に「最適化」する必要があることを意味します。Web検索では、このためのプラットフォーム用のツールが見つかるはずです。

もちろん、アニメーションが必要な場合は、GIFが唯一の方法です。これは、MNGが基本的に何らかの理由で初心者ではなかったためです。

于 2008-09-22T16:19:34.240 に答える
1

コンピューターで生成されたグラフィックス(つまり、Photoshop、Gimpなどで自分で描画したもの)の場合、JPGは不可逆であるため、問題外です。つまり、ランダムな灰色のピクセルが得られます。静止画像の場合、PNGはあらゆる点で優れています:より多くの色、スケーラブルな透明度(たとえば、10%透明、.gifは0%と100%のみをサポート)が、InternetExplorerの一部のバージョンがPNGを実行しないという問題があります透明度が正しく、醜く見える平らな不透明な背景が得られます。これらのIEユーザーを気にしない場合は、PNGを選択してください。

ところで、アニメーションが必要な場合は、GIFを選択してください。

于 2008-09-22T16:22:11.583 に答える
1

PNGはGIFファイルの100%の代替品であり、遭遇する可能性のあるすべてのWebブラウザーでサポートされています。

GIFが望ましい状況はごくわずかです。最も重要なものはアニメーションです。GIF89a標準はアニメーションをサポートしており、事実上すべてのブラウザがアニメーションをサポートしていますが、従来のPNG形式はサポートしていません。そのためには、ブラウザのサポートが制限されているMNGを使用する必要があります。

事実上すべてのブラウザは、PNGファイルのシングルビット透明度(GIF形式で提供される透明度のタイプ)をサポートしています。IE6ではPNGの完全な8ビット透過性のサポートが不足していますが、CSSのちょっとした魔法でほとんどの状況で修正できます。

PNGファイルが同等のGIFファイルよりも大きくなる場合は、ソース画像の色が256色を超えていることがほぼ確実です。GIFファイルは最大256色のパレットにインデックス付けされますが、ほとんどのグラフィックプログラムのPNGファイルは、デフォルトで24ビットのロスレス形式で保存されます。正確な色よりもファイルサイズの方が重要な場合は、ファイルを8ビットのインデックス付きPNGとして保存すると、GIF以上と同等になります。

置換しないフラグと複数のパレットを備えたアニメーションフレームの組み合わせを使用して、GIFファイルを256色以上に「ハッキング」することは可能ですが、このアプローチはPNGの登場以来事実上忘れられています。

于 2008-09-22T18:05:50.880 に答える
1

「これは私が使用しているツールによるものかもしれませんが、通常、GIF ファイルは同等の PNG よりも少し小さいように見えますが、それらを使用すると 1987 年のように見えます。」

それはおそらくあなたのツールです。PNG FAQ から:

「この現象の背後には主に 2 つの理由があります。リンゴとオレンジを比較する (つまり、同じ種類の画像を比較しない) ことと、不適切なツールを使用していることです。」続き...

ただし、常に両方として保存して (同じ色深度を使用)、どちらが小さいかを確認することができます。

もちろん、サイトのグラフィック形式を 1 つに統一したい場合は、PNG が最適です。

于 2009-10-25T22:26:17.920 に答える
0

それらが小さくなり、PNGが提供する機能(アルファチャネルの透明度と256色以上)を使用しても何も得られない場合は、PNGを使用する理由がわかりません。

于 2008-09-22T16:17:24.060 に答える
0

gifファイルは、透明アルファチャネルをサポートしていないため(おそらく他の理由で)、少し小さくなる傾向があります。個人的には、サイズの違いは以前ほど心配する価値はないと思います。現在、ほとんどの人が何らかのブロードバンドでWebを使用しているので、違いに気付くとは思えません。

操作ツールが最適に機能するタイプの画像を使用することがおそらくより重要です。

さらに、任意の背景に画像を配置し、ドロップシャドウを使用できる機能が気に入っています。これにより、png形式をより重視することができます。

于 2008-09-22T16:20:28.980 に答える
0

普段はサイズの関係でgifを使っていますが、256色のpng-8もあります。

派手な半透明のものが必要な場合は、png-24を使用してください。

私は通常、フォトショップの「Web用に保存」機能を使用します。この機能を使用すると、ファイルの種類や色の数などをいじって、保存する前に結果を確認できます。もちろん、私は可能な限り最小のものを使用しますが、それでも私の目にはよく見えます。

于 2008-09-22T16:20:55.157 に答える
0

個人的には、gif はどこでも機能するため、画像にかなり使用しています。明らかに、透過性の制限は、誰かを特定の形式に誘導する重要な要素の 1 つです。

gif を使用することに問題があるとは思いません。

于 2008-09-22T16:17:01.983 に答える
-5

すべての非透過画像に jpg を使用します。私が好きな圧縮を制御できます。両者を比較しているサイトを見つけました。jpgの方が小さくて見栄えが良いです。

于 2008-09-22T16:16:49.067 に答える