PNG対GIF対JPEG対SVGの異なるユースケースは何ですか？
回答:
いくつかの重要な要素に注意する必要があります...
最初に、2種類の圧縮があります：LosslessとLossyです。
- ロスレスとは、画像は小さくなりますが、品質を損なうことはないことを意味します。
- ロッシーとは、画像が（さらに）小さくなりますが、品質が低下することを意味します。画像を非可逆形式で何度も保存すると、画像の品質は次第に悪化します。
異なる色深度（パレット）もあります。インデックス付きカラーとダイレクトカラーです。
- インデックス付きとは、画像が、カラーマップと呼ばれるもので、作成者が制御する限られた数の色（通常は256色）しか保存できないことを意味します
- 直接とは、作成者が直接選択していない何千もの色を保存できることを意味します
BMP-ロスレス/インデックス付きおよび直接
これは古い形式です。ロスレス（保存時に画像データが失われることはありません）ですが、圧縮はほとんどまたはまったくありません。つまり、BMPではファイルサイズが非常に大きくなるため、保存することになります。インデックス付きとダイレクトの両方のパレットを持つことができますが、それは小さな慰めです。ファイルサイズが不必要に大きいため、この形式を実際に使用する人はいません。
対象：本当に何もありません。BMPが優れているものはありません。また、他のフォーマットでうまく処理されていません。
GIF-ロスレス/インデックスのみ
GIFは可逆圧縮を使用します。つまり、画像を何度も保存でき、データを失うことはありません。実際には適切な圧縮が使用されているため、ファイルサイズはBMPよりもはるかに小さくなりますが、格納できるのはインデックス付きパレットのみです。つまり、ほとんどの使用例では、ファイルに含めることができる色は最大で256色のみです。それはかなり少量のように聞こえます、そしてそれはそうです。
GIF画像はアニメーション化して透明にすることもできます。
対象：ロゴ、線画、その他の小さくする必要がある単純な画像。本当にウェブサイトにのみ使用されます。
JPEG -非可逆/ダイレクト
JPEG画像は、人間の目が気付かない情報を削除することにより、詳細な写真画像を可能な限り小さくするように設計されています。その結果、Lossy形式となり、同じファイルを繰り返し保存すると、時間の経過とともに失われるデータが増えます。数千色のパレットがあり、写真には最適ですが、不可逆圧縮は、ロゴや線画に悪いことを意味します。画像がぼやけているだけでなく、GIFに比べてファイルサイズが大きくなります。
対象：写真。また、グラデーション。
PNG-8-ロスレス/インデックス付き
PNGは新しい形式であり、PNG-8（PNGのインデックス付きバージョン）はGIFの代わりに使用できます。ただし、残念なことに、いくつかの欠点があります。まず、GIFのようにアニメーションをサポートすることはできません（そうすることはできますが、すべてのブラウザーでサポートされているGIFアニメーションとは異なり、Firefoxのみがサポートしているようです）。第二に、IE6のような古いブラウザーでいくつかのサポート問題があります。第三に、Photoshopのような重要なソフトウェアは、フォーマットの実装が非常に貧弱です。（ごめんなさい、Adobe！）PNG-8はGIFのように256色しか保存できません。
良い例：PNG-8がGIFよりも優れている主なことは、アルファ透明度のサポートです。
PNG-24-ロスレス/直接
PNG-24は、可逆符号化と直接色（JPEGのように何千もの色）を組み合わせた優れたフォーマットです。これは、PNGが実際に画像を圧縮するため、BMPに非常によく似ているため、ファイルがはるかに小さくなります。残念ながら、PNG-24ファイルはJPEG（写真の場合）およびGIF / PNG-8（ロゴおよびグラフィックスの場合）よりも大きいので、本当に使用するかどうかを検討する必要があります。
PNG-24は圧縮しながら何千もの色を使用できますが、JPEG画像を置き換えることを目的としていません。PNG-24として保存された写真は、同等のJPEG画像よりも少なくとも5倍大きくなる可能性が高く、表示品質はほとんど向上しません。（もちろん、これは、ファイルサイズを気にせず、可能な限り最高品質の画像を取得したい場合に望ましい結果になる可能性があります。）
PNG-8と同様に、PNG-24もアルファ透明度をサポートしています。
SVG-ロスレス/ベクター
現在人気が高まっているファイルタイプはSVGです。これは、ベクターファイル形式であるという点で上記のすべてとは異なります（上記はすべてラスターです）。つまり、実際にはピクセルではなく、線と曲線で構成されています。ベクトル画像を拡大表示しても、曲線または直線が表示されます。ラスターイメージを拡大すると、ピクセルが表示されます。
例えば：
つまり、SVGは、Retinaスクリーンやさまざまなサイズで鮮明さを維持したいロゴやアイコンに最適です。また、画像サイズを低下させることなく、小さなSVGロゴをはるかに大きい（大きい）サイズで使用できることを意味します。これには、ラスター形式のファイル（ファイルサイズの観点から）が別途必要になります。
視覚的に非常に大きい場合でも、SVGファイルのサイズは小さいことがよくあります。ただし、使用する形状の複雑さに依存することに注意してください。曲線と線の描画には数学的計算が含まれるため、SVGはラスターイメージよりも多くの計算能力を必要とします。ロゴが特に複雑な場合、ユーザーのコンピューターの速度が低下し、ファイルサイズが非常に大きくなることもあります。ベクトルシェイプをできるだけ簡略化することが重要です。
さらに、SVGファイルはXMLで記述されているため、テキストエディター（！）で開いて編集できます。つまり、その値はその場で操作できます。たとえば、JavaScriptを使用して、テキストと同じように（つまり、2番目の画像が不要）Webサイト上のSVGアイコンの色を変更したり、アニメーション化したりできます。
全体として、ロゴやグラフなどの単純で平らな形状に最適です。
お役に立てば幸いです。
JPEGは、すべての種類の画像（またはほとんどの画像）で最も明るいわけではありません。コーナーと直線、およびプレーンな「塗りつぶし」（無地のブロック）は、圧縮レベルに応じて、ぼやけて見えるか、アーティファクトが含まれます。これは非可逆形式であり、アーチファクトがはっきりと見えない写真に最適です。直線（図面やコミックなど）は、PNGで非常にうまく圧縮され、ロスレスです。GIFは、透明度をIE6で機能させたい場合、またはアニメーションが必要な場合にのみ使用してください。GIFは256色のパレットのみをサポートしますが、損失もありません。
だから基本的にここに画像フォーマットを決定する方法があります：
- IE6で機能するアニメーションまたは透明度が必要な場合はGIF（注、PNG透明度はIE6以降で機能します）
- 画像が写真の場合はJPEG。
- コミックやその他の描画のように直線が必要な場合、または透明度のある広い色範囲が必要な場合はPNG（IE6は要素ではありません）
そして、コメントしたように、何が適格かわからない場合は、さまざまな圧縮率で各フォーマットを試して、画像の品質とサイズを比較検討し、どれが最適だと思うかを選択してください。私は経験則のみを示しています。
私は通常GIFに比べていくつかの利点があるように見えるので、PNGを使用します。以前はGIFに特許制限がありましたが、期限切れになりました。
GIFは、限られた数の色を持つシャープなエッジのラインアート（ロゴなど）に適しています。これは、滑らかなグラデーションと柔らかな画像を好むJPEGとは対照的に、明確なエッジを備えた均一な色の平坦な領域を好む、形式の可逆圧縮を利用しています。
GIFは、小さなアニメーションや低解像度のフィルムクリップに使用できます。
256色へのGIFイメージパレットの一般的な制限を考慮して、デジタル写真の形式としては通常使用されません。デジタル写真家は、TIFF、RAW、非可逆JPEGなど、より広範囲の色を再現できる画像ファイル形式を使用しています。これは、写真の圧縮により適しています。
PNG形式は、より優れた圧縮技術を使用し、256色の制限がないため、GIF画像の一般的な代替手段ですが、PNGはアニメーションをサポートしていません。PNGから派生したMNGおよびAPNG形式はアニメーションをサポートしていますが、広く使用されていません。
2018年の時点で、いくつかの新しいフォーマット、以前のフォーマットのより良いサポート、および画像の代わりにビデオを使用するいくつかの巧妙なハックがあります。
写真用
jpg -まだ最も広くサポートされている画像フォーマット。
webp- グーグルからの新しいフォーマット。ブラウザのサポートは素晴らしいものではありませんが、可能性は十分です。
アイコンとグラフィックス
svg- いつでも可能なとき。網膜画面で適切にスケーリングされ、テキストエディターで編集可能で、DOMに読み込まれていればJS / CSSを介してカスタマイズできます。
png-ラスターグラフィックが含まれる場合（フォトショップで作成された場合など）。このユースケースで非常に重要な透明性をサポートします。
アニメーション用
svg-さらに、ベクターグラフィックスのcssアニメーション。svgのすべての利点+ cssアニメーションの能力。
gif -まだ最も広くサポートされているアニメーション画像フォーマット。
mp4-アニメーション画像が実際に短いビデオクリップである場合。Twitter / Whatsappはgifをmp4に変換します。
apng-適切なブラウザサポート（IE、Edgeなし）。ただし、GIFほど簡単には作成できません。
webp-mp4の使用に近い。貧弱なサポート
これは、さまざまなアニメーション画像フォーマットの素晴らしい比較です。
最後に、どちらのフォーマットでも、必ず最適化してください。各フォーマット（SVGO、Guetzli、OptiPNGなど）にはツールがあり、かなりの帯域幅を節約できます。
主な違いは、GIFは特許を取得しており、もう少し広くサポートされていることです。PNGはオープンな仕様であり、アルファ透明度はIE6ではサポートされていません。IE7ではサポートが改善されましたが、完全には修正されていません。
ファイルサイズに関する限り、GIFはデフォルトのカラーパレットが小さいため、一見するとファイルサイズが小さくなる傾向があります。PNGファイルのデフォルトパレットは大きくなりますが、カラーパレットを縮小して、GIFよりもファイルサイズを小さくすることができます。再び問題は、この機能がInternet Explorerでサポートされていないことです。
また、PNGはアルファ透明度をサポートできるため、バイナリ透明度以外の透明度のバリエーションが必要な場合の唯一のオプションです。
JPEGを選択し、Webサイトの画像を処理する場合は、無料で入手できるGoogle Guetzli知覚エンコーダーを検討することをお勧めします。私の経験では、固定品質の場合、ゲッツリはJPEG標準との完全な互換性を維持しながら、標準のJPEGエンコーディングライブラリよりも小さなファイルを生成します（そのため、画像は一般的なJPEG画像と同じ互換性を持ちます）。
唯一の欠点は、Guetzliがかかることである多くの利点が永遠に残っている間、エンコードに時間のを..しかし、あなたがウェブサイトのためのイメージを準備するとき、これは、一度だけ行われます！画像が小さいほどダウンロードにかかる時間が短くなるため、日常的に使用する場合のWebサイトの速度が向上します。