JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明

ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの違いは何でしょうか? 以下の内容を読んだ後、あなた自身の結論が得られるかもしれません。
--------------------------------------------------------------------------------
GIF形式の機能:
透明性
Gif はブール値の透明度タイプです。つまり、完全に透明または完全に不透明にすることができますが、半透明 (アルファ透明度) ではありません。
アニメーション
Gif 形式はアニメーションをサポートします。
ロスレス
GIF はロスレス画像形式です。つまり、画像の品質を損なうことなく、GIF 画像であらゆる操作を行うことができます。
水平スキャン
GIF は LZW と呼ばれるアルゴリズムを使用して圧縮されます。GIF を圧縮すると、ピクセルは上から下に水平方向に圧縮されます。つまり、同じ条件下では、水平方向の GIF 画像は垂直方向の GIF 画像よりも小さくなります。たとえば、500×10 の画像は、10×500 の画像よりも小さい間隔で段階的に表示されます。
GIF は選択間隔プログレッシブ表示をサポートしています。上記の特性から、256 色しかない gif 画像は写真には適していないことがわかります。高色数を必要としないグラフィックに適しています。
--------------------------------------------------------------------------------
Jpeg形式の機能:
透明性透明性をサポートしていません。
アニメーションアニメーションもサポートされていません。
ロスレス回転（90、180、270 度のみ）、トリミング、標準タイプから詳細タイプへの変更、画像のオリジナルデータの編集などの一部の操作を除き、JPEG 画像に対するその他のすべての操作では、画像の品質が低下します。そのため、編集プロセス中のトランジション形式としては通常 png を使用します。
インターレースプログレッシブ表示インターレースプログレッシブ表示をサポートします (ただし、IE ブラウザはこの属性をサポートしていませんが、画像情報全体が完全に到着すると IE はそれを表示します)。
上記から、Web 上やデジタルカメラの写真画像には Jpeg が最も適していることがわかります。
--------------------------------------------------------------------------------
PNG形式の機能:
透明性
Png はアルファ透明度 (透明、半透明、不透明) を完全にサポートしていますが、IE6 には 2 つの問題があります (詳細は以下で説明します)。
アニメーションロスレスアニメーションをサポートしていません
PNG はロスレス画像形式です。つまり、画像の品質を損なうことなく PNG 画像であらゆる操作を行うことができます。これにより、PNG は JPEG 編集の移行形式にもなります。水平スキャン。GIF と同様に、PNG も水平スキャンされます。つまり、水平に繰り返される色は、垂直に繰り返される色よりも小さくなります。インターバルプログレッシブ表示。インターバルプログレッシブ表示をサポートしますが、画像サイズが大きくなります。最初のタイプの PNG は PNG8 (ブール透明度) と呼ばれ、単純に静的 GIF として理解できます。
どちらも 256 色しかなく、ピクセルが透明かどうかを指定するインデックス付き透明度をサポートしています。2 番目のタイプの PNG は PNG8 (アルファ透明度) とも呼ばれます。ピクセルの透明度 (たとえば 50% 透明度) を指定できます。利点は PNG24/32 よりも小さいですが、効果は同じです。欠点は、IE6 が十分にサポートしていないため、半透明のピクセルが完全に透明として表示されることです。3 番目のタイプの PNG は PNG24 と呼ばれます。
PNG24 は透明ではありませんが、256 色を超える多くの色があります。Photoshop でエクスポートされた png24 は、実際には png32 です。
PNGの4番目のタイプはPNG32と呼ばれます
Photoshop の PSD と同様に、レイヤーとチャンネルの情報を含む、Fireworks のデフォルトのソースファイル形式です。PNG24 との違いは、透明度情報が多いことです。欠点は、IE6 がこれを十分にサポートしていないため、透明領域が青灰色の背景として表示されることです。これは、パフォーマンスに影響し、特別なタグ (VML) を必要とする AlphaImageLoader メソッドを通じてのみ実行できます。
注記：
ブール透過 png8 は、どのブラウザでも正常に表示できます (gif と同様)。
アルファ透明 png8 は、IE6 以下以外のブラウザでは完全に透明として誤って表示されますが、他のブラウザでは正常に表示されます。
Photoshop では、ブール透明度を持つ PNG8 のみをエクスポートできます。 (一部の png8 は IE6 ではエッジが粗くなる場合があります。これは、テキストや角の丸みなどにより、エッジが弱くなる傾向があるためです。エクスポートする前にトリミングすることができます)
Fireworks は、ブール透明 PNG8 とアルファ透明 PNG8 の両方をエクスポートできます。
--------------------------------------------------------------------------------
PNG と他の画像形式の比較:
GIF はグラフィックに適しており、JPEG は写真に適しており、PNG シリーズは両方に適していることはよく知られています。
GIFと比較すると
同じ色の値の場合、gif 形式の画像は png32 形式の画像よりも小さくなります。しかし、png8 が最良の選択です。
PNG8 には、アニメーションをサポートしていないことを除いて、GIF のすべての機能があります。ただし、GIF に比べて、アルファ透明度と優れた圧縮をサポートしているという利点があります。したがって、ほとんどの場合、GIF ではなく PNG8 を使用する必要があります (GIF の方が圧縮率が高い非常に小さな画像を除く)。
JPEGと比較
JPEG はフルカラー PNG よりも圧縮率が優れているため、写真に適していますが、JPEG の編集中に品質が低下しやすいため、フルカラー PNG は JPEG 編集の移行形式として適しています。

<<: CSS カウンターとコンテンツの概要

>>: ホストサービスにアクセスするDockerでのサービスの実装