web-dev-qa-db-ja.com

ウェブサイトの画像形式：適切なタスクに適した形式の選択

ウェブサイトを設計するとき、特定のタスクに使用するのに最適な画像形式は何だと思いますか？

特定のタスクに使用するフォーマットを見つけようとすると、ジレンマに陥ります。たとえば、。jpgを使用する必要がありますか？または。pngをいつ、なぜ使用する必要がありますか？

たとえば、AmazonのWebサイトでは、。jpgを使用します製品画像の場合（ 例 ）、。gifこの透明ピクセル（ 例 ）および。pngCSSスプライト（ 例 ）

一方、 Play.com Webサイトのロゴに。gifを使用します（ 例 ）、ただし、。jpgをWebサイト製品（Amazonなど）（ 例 ）およびメインページに使用する限り使用します、。pngsがありません。

では、Webサイトにどのフォーマットを使用する必要がありますか？そしてなぜ私はそれらを使用する必要がありますか？

[更新]

ありがとう CruellO for このリンク 違いを説明してくれて、また Dustin 使用する理由を教えてくれた。

image-formats
44
Andreas Grech

JPEGは写真用です。 JPEGにテキストが含まれていることが時々ありますが、見た目がひどいです。テキストはテキストに最適です。それ以外の場合はPNGを使用します。

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

PNGは8ビットの透明度を許可しますが、IEをサポートする必要がある場合は、IEがそれを正しくサポートすることを絶えず拒否することがわかります。 doは、私が知る限り、8ビット画像（基本的にgifと同じ）で1ビットの透明度をサポートします。 IEで動作するように8ビットの透過性を得るためのハッキングも多数あります。私は気にしませんでした。

要約すれば：

  • 写真→jpg
  • ！写真→png
49
Dustin

いくつかの重要な要素に注意する必要があります...

最初に、2つのタイプの圧縮があります： Lossless および Lossy 。

ロスレスは、画像を小さくすることを意味しますが、品質は低下しません。 Lossyは、画像を（偶数）小さくしますが、品質を低下させます。画像をLossy形式で何度も保存すると、画質は次第に悪化します。

さまざまな色深度（パレット）もあります： インデックス付き色 および 直接色 。

Indexedを使用すると、画像作成者が選択した限られた数の色（通常256）のみを画像に保存でき、Directこれは、著者が選択していない何千もの色を保存できることを意味します。

[〜＃〜] bmp [〜＃〜]-ロスレス/インデックス付きおよびダイレクト

これは古い形式です。ロスレスです（保存時に画像データは失われません）が、圧縮はほとんどまたはまったくありません。つまり、BMPとして保存すると、ファイルサイズが非常に大きくなります。ファイルサイズが不必要に大きいため、この形式を実際に使用する人はいません。

用途：本当にありません。何もありませんBMPが優れている、または他の形式で改善されていません。

BMP vs GIF

[〜＃〜] gif [〜＃〜]-ロスレス/インデックスのみ

GIFはロスレス圧縮を使用します。つまり、画像を何度も保存でき、データを失うことはありません。適切な圧縮が実際に使用されるため、ファイルサイズはBMPよりもはるかに小さくなりますが、インデックスパレットのみを保存できます。つまり、ファイルには最大256の異なる色しか含めることができません。それはかなり少量のように聞こえます、そしてそれはそうです。

GIF画像もアニメーション化でき、透明度があります。

用途：ロゴ、線画、および小さくする必要があるその他のシンプルな画像。 Webサイトにのみ実際に使用されます。

GIF vs JPEG

[〜＃〜] jpeg [〜＃〜]-Lossy/Direct

JPEG画像は、人間の目には気付かない情報を削除することにより、詳細な写真画像をできるだけ小さくするように設計されました。その結果、Lossy形式になり、同じファイルを何度も保存すると、より多くのデータが失われます。何千もの色のパレットがあり、写真には最適ですが、非可逆圧縮はロゴや線画に悪いことを意味します：あいまいに見えるだけでなく、そのような画像はGIFに比べてファイルサイズも大きくなります！

用途：写真。また、グラデーション。

JPEG vs GIF

PNG-8-ロスレス/インデックス付き

PNGは新しい形式であり、PNG-8（PNGのインデックス付きバージョン）は実際にGIFに代わるものです。残念ながら、いくつかの欠点があります。まず、GIFのようなアニメーションをサポートできません（ただし、すべてのブラウザーでサポートされているGIFアニメーションとは異なり、Firefoxのみがサポートしているようです）。第二に、IE6のような古いブラウザーでいくつかのサポートの問題があります。第三に、Photoshopのような重要なソフトウェアは、フォーマットの実装が非常に貧弱です。 （Adobeを気にしないでください！）PNG-8は、GIFのような256色しか保存できません。

目的：PNG-8がGIFよりも優れている主なことは、アルファ透明度をサポートしていることです。

PNG-8 vs GIF

重要な注意：PhotoshopはPNG-8ファイルのアルファ透明度をサポートしていません。 （Photoshop！）透明度を維持したままPhotoshop PNG-24ファイルをPNG-8ファイルに変換する方法があります。 1つの方法は PNGQuant で、別の方法は Fireworks でファイルを保存することです。

PNG-24-ロスレス/ダイレクト

PNG-24は、ロスレスエンコーディングとダイレクトカラー（JPEGのように数千色）を組み合わせた素晴らしい形式です。この点でBMPと非常によく似ていますが、PNGは実際に画像を圧縮するため、ファイルは非常に小さくなります。残念ながら、PNG-24ファイルはJPEG、GIF、PNG- 8秒なので、実際に使用するかどうかを検討する必要があります。

PNG-24は、圧縮時に数千色を許可しますが、JPEG画像を置き換えるものではありません。 PNG-24として保存された写真は、おそらく同等のJPEG画像よりも少なくとも5倍大きくなりますが、目に見える品質はほとんど向上しません。 （もちろん、これは、ファイルサイズを気にせず、可能な限り最高品質の画像を取得したい場合に望ましい結果になる可能性があります。）

PNG-8と同様に、PNG-24もアルファ透明度をサポートしています。

それがお役に立てば幸いです！

71
Chuck Le Butt

[〜＃〜] png [〜＃〜]は次の場合に使用する必要があります。

  • 透明度が必要です（1ビットまたはアルファ透明度）
  • ロスレス圧縮はうまく機能します（チャートやロゴ、コンピューター生成画像など）

[〜＃〜] jpeg [〜＃〜]は次の場合に使用する必要があります。

  • ロスレス圧縮はうまく機能しません（写真など）
  • フルカラーが必要です

[〜＃〜] gif [〜＃〜]は次の場合になります。

  • 非常に古いソフトウェアやブラウザなどでPNGは利用できません
  • アニメーションが必要です

反対の神話にもかかわらず、PNGはほとんどの面でGIFより優れています。 PNGは、アニメーション以外のGIFのすべての画像モードに対応しており、同じ画像モ​​ードを使用する場合、LZWと比較して優れたDEFLATEアルゴリズムにより、PNGの圧縮が向上します。 PNGは、24ビットカラーやアルファ透明度など、GIFにはできない追加モードも使用できますが、Webで問題が発生する可能性があります。アルファ透明度には、IE6との互換性の問題があり、十分に文書化されています（ただし、回避するためのハックが存在します）。

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

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

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

透明なPNGファイルがIE6でGIFファイルの使用中に正しく機能しない場合、PNGで24ビットカラー+アルファ透明を使用し、GIFで透明な色を使用するパレットモードを使用しています。 PNGを透明色のパレットカラーモードに変換する必要があります。

PNGには、パレットのアルファ透明度を使用したパレットカラーなど、他のモードもあります。このようなモードはPhotoshopでは使用できません。

13
thomasrutter

このサイトを見てみてください http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

彼らはいつ何を使うかを説明しようとします

4
CruelIO

多数の画像を保存または表示する場合、新しい Google WebP形式 はPNG/JPGよりも25％小さいため、考慮する価値があります。現在のところ、これはすべてのブラウザでサポートされているわけではありません。 NB。これは、この質問が投稿された後の2010年に発表されました。

1
JohnnyBizzle

JPEGファイル形式

  1. サイズを小さく保つ必要がある画像に最適
  2. 写真に適したオプション
  3. ロゴ、ラインアート、および単色の広い領域には不適切

GIFファイル形式

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

PNGファイル形式

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

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

0
Luzan Baral