48

Web サイトをデザインするとき、特定のタスクに使用するのに最適な画像形式は何だと思いますか?

特定のタスクにどの形式を使用すればよいかを考えようとすると、いつもジレンマに陥ります。 または、いつ、なぜ.pngを使用する必要がありますか?

たとえば、Amazonの Web サイトでは、製品画像に.jpgを使用し ( Example )、この透明ピクセルに.gifを使用し ( Example ) 、CSS スプライトに.pngを使用しています ( Example ) 。

一方、Play.comはウェブサイトのロゴに.gifを使用しますが (例)、ウェブサイトの製品 (Amazon など) には.jpgを使用し (例)、メイン ページに関する限り、.pngはありません。その上にあります。

では、Web サイトにはどの形式を使用すればよいでしょうか? そして、なぜそれらを使用する必要があるのですか?

[アップデート]

違いを説明してくれたこのリンクのCruellOと、何を使用するかについて理由を説明してくれたDustinに感謝します。

4

5 に答える 5

53

JPEGは写真用です。テキストを含む JPEG をときどき見かけますが、見栄えが悪いだけです。テキストにはテキストが最適です。それ以外の場合は PNG を使用してください。

写真ではないがグラフィックが必要な場合は、PNG を使用します。PNG はほとんどの場合、同等の gif よりも小さく、JPEG ファイルのように品質が低下することはありません。JPEG に相当する PNG は通常、はるかに大きくなります (写真のようにリアルであると仮定します)。これがまだ望ましい場合もあります。

PNG では 8 ビットの透過性が許可されていますが、IE をサポートする必要がある場合、IE がそれを正しくサポートすることを継続的に拒否していることに気付くでしょう。私の知る限り、8ビット画像（本質的にgifと同じ）で1ビットの透過性をサポートしています。8 ビットの透過性を IE で動作させるためのハックも多数あります。私自身、気にしたことはありません。

要約すれば：

  • 写真→jpg
  • !写真 → png
于 2008-12-25T08:51:57.280 に答える
14

PNGは、次の場合に使用できます。

  • 透明度（1ビットまたはアルファ透明度）が必要です
  • 可逆圧縮はうまく機能します（フラットスタイルのアイコンやロゴなど）

JPEGは、次の場合に使用できます。

  • 可逆圧縮はうまく機能しません（写真など）

GIFは、次の場合に使用できます。

  • アニメーションが必要であり、ビデオは不可能です（ただし、実際にビデオを試して使用する必要があります。アニメーションGIFは品質が低く、非常に非効率的です）

それとは反対の神話にもかかわらず、PNGは、同様の比較において、すべての点でGIFよりも優れています。PNGは、アニメーション以外のGIFのすべての画像モードに対応しており、同じ画像モ​​ードを使用すると、LZWと比較して優れたDEFLATEアルゴリズムにより、PNGの圧縮率が向上します。PNGは、24ビットカラーやマルチビット透明度（アルファ透明度）など、GIFでは実行できない追加のモードにも対応しています。人々がIE6を使用したとき、マルチビットの透過性が問題であったことに注意してください。

PNGモードには次のものが含まれます（これはほんの小さなサブセットです）

  • 2〜256色のパレットカラー（GIFなど）
  • 2〜256色のパレットカラー、透明色（GIFなど）
  • トゥルーカラー（24ビットカラー）
  • アルファチャネルを備えたトゥルーカラー（24ビットカラー+ 8ビット透明度）

Web用のPNGで最適な圧縮を行うには、常にパレットモードを使用してください。PNGファイルが同等のGIFファイルよりも大きい場合は、PNGを24ビットカラーで保存し、GIFをパレットモードで保存している可能性があります（フルカラーGIFを保存するには、常にパレットモードに変換する必要があるため）。どちらの場合も、保存する前に画像をパレットモードに変換してみてください。

PNGには、パレットにアルファ透明度があるパレットカラーなどの他のモードもあります。このようなモードはブラウザで機能しますが、Photoshopなどのソフトウェアでは、これらの画像モードがサポートされていないため、ブラウザでの作成または操作に問題があります（またはかつて発生していました）。

于 2009-03-04T14:18:26.790 に答える
0

JPEG ファイル形式

  1. サイズを小さく保つ必要がある場合の画像に最適
  2. 写真のための良いオプション
  3. ロゴ、線画、単色の広い領域には適していません

GIF ファイル形式

  1. アニメーション効果に最適
  2. 最小限の色と正確な線を使用するクリップ アート、フラット グラフィックス、画像に適したオプション
  3. 色のブロックを使ったシンプルなロゴに適したオプション

PNG ファイル形式

  1. 無損失の
  2. 透明性が不可欠な場合の優れた選択肢
  3. ロゴと線画に適したオプション
  4. どこでもサポートされていません

詳細については、このインフォグラフィックを参照してください。画像ファイルの種類: JPEG、GIF、PNG を使用する場合

于 2014-12-11T13:48:13.103 に答える