PNG対GIF対JPEG対SVGの異なるユースケースは何ですか？
Webサイトやインターフェイスなどを構築するときに、特定の種類の画像ファイルを使用する必要があるのはいつですか。
長所と短所は何ですか？
私はPNGとGIFがロスレスであるのに対し、JPEGはロスがあることを知っています。
しかし、PNGとGIFの主な違いは何ですか？
どうして私は一方を他方よりも好まなければならないのですか？ SVGとは何ですか？いつ使用するべきですか？
すべてのピクセルを気にしないのであれば、「最も明るい」ピクセルであるため、常にJPEGを使用しますか？
あなたはいくつかの重要な要因に注意する必要があります...
まず、 Lossless と Lossy の2種類の圧縮があります。
- ロスレス は、画像が小さくなることを意味しますが、品質を損なうことはありません。
- Lossy は、画像が（均等に）小さくなることを意味しますが、品質が低下します。あなたが何度も何度も損失の多いフォーマットで画像を保存した場合、画像品質は徐々に悪くなるでしょう。
色の濃さ（パレット）も異なります。 インデックスカラー と ダイレクトカラー 。
- インデックス付き は、カラーマップと呼ばれるもので、作者によって制御された、限られた数の色（通常256色）しか格納できないことを意味します。
- 直接 は、作者によって直接選択されていない多くの数千色を保存できることを意味します。
_ bmp _ - ロスレス/インデックス付きおよびダイレクト
これは古い形式です。それは無損失（保存時に画像データが失われることはありません）ですが、圧縮がほとんどまたはまったくないため、BMPとして保存すると非常に大きなファイルサイズになります。インデックス付きとダイレクトの両方のパレットを持つことができますが、それは小さな慰めです。ファイルサイズが非常に不必要に大きいので、誰もこのフォーマットを実際には使用しません。
のために良い：本当に何もない。 BMPに勝るものは何もない、または他のフォーマットではそれほどうまくいっていない。
_ gif _ - ロスレス/インデックスのみ
GIFはロスレス圧縮を使用します。つまり、何度も画像を保存でき、データが失われることはありません。ファイルサイズはBMPよりはるかに小さくなります。実際には適切な圧縮が使用されているためですが、インデックス付きパレットしか格納できません。つまり、 はほとんどのユースケースで 、最大256色までしかファイルに存在できません。それはごくわずかなようですが、それは事実です。
GIF画像もアニメーション化でき、透明度もあります。
に適しています：ロゴ、線画、および小さくする必要があるその他の単純な画像。 Webサイトでのみ実際に使用されています。
_ jpeg _ - 損失/直接
JPEG画像は、人間の目には気付かれない情報を削除することによって、詳細な写真画像をできるだけ小さくするように設計されています。その結果、これは損失の多いフォーマットであり、同じファイルを何度も保存すると、時間の経過と共に失われるデータが増えます。何千色ものパレットがあるので写真には最適ですが、非可逆圧縮はロゴや線画には不向きです。画像がぼやけて見えるだけでなく、GIFに比べてファイルサイズが大きくなります。
に適しています：写真。また、グラデーション。
PNG-8 - ロスレス/インデックス付き
PNGは新しい形式であり、PNG-8（PNGのインデックス付きバージョン）はGIFに代わる優れたものです。残念ながら、いくつかの欠点があります。まず、GIFのようにアニメーションをサポートできないことです（すべてのブラウザでサポートされているGIFアニメーションとは異なり、Firefoxだけがサポートしているようです）。第二に、それはIE6のような古いブラウザでいくつかのサポート問題を抱えています。第三に、Photoshopのような重要なソフトウェアはフォーマットの実装が非常に貧弱です。 PNG-8はGIFのように256色しか保存できません。
PNG-8がGIFよりも優れているという主な点は、アルファ透明度をサポートしていることです。
PNG-24 - ロスレス/ダイレクト
PNG-24は、ロスレスエンコーディングとダイレクトカラー（数千色、JPEGと同じ）を組み合わせた優れたフォーマットです。その点ではBMPに非常によく似ていますが、PNGは実際に画像を圧縮するため、ファイルが非常に小さくなります。残念ながら、PNG-24ファイルはJPEG（写真用）、GIF/PNG-8（ロゴおよびグラフィック用）よりも大きいので、本当に使用するかどうかを検討する必要があります。
PNG-24は圧縮しながら数千色を許容しますが、それらはJPEG画像を置き換えることを意図していません。 PNG-24として保存された写真は、同等のJPEG画像よりも少なくとも5倍大きくなりますが、表示品質はほとんど向上しません。 （もちろん、ファイルサイズを気にせず、できる限り最高品質の画像を取得したい場合は、これが望ましい結果になるかもしれません。）
PNG-8と同様に、PNG-24もアルファ透明度をサポートしています。
_ svg _ - ロスレス/ベクトル
現在人気が高まっているファイルタイプはSVGです。これは vector ファイルフォーマットであるという点で上記のすべてと異なります（上記はすべて raster です）。つまり、実際にはピクセルではなく線と曲線で構成されています。ベクトル画像を拡大しても、曲線または線が見えます。ラスタ画像を拡大すると、ピクセルが見えます。
例えば：
つまり、SVGは、Retinaスクリーンやさまざまなサイズのシャープネスを保ちたいロゴやアイコンに最適です。また、小さなSVGロゴを、画質を低下させることなく、はるかに大きい（大きい）サイズで使用できることを意味します。これは、ラスタ形式の（ファイルサイズに関して）大きいファイルを別に必要とするものです。
SVGファイルのサイズは、たとえ視覚的に非常に大きいとしても、非常に小さいことが多く、それは素晴らしいことです。ただし、使用する形状の複雑さに依存することに注意してください。 SVGは、数学的な計算が曲線や線の描画に関係するため、ラスターイメージよりも多くの計算能力を必要とします。あなたのロゴが特に複雑であるならば、それはユーザーのコンピュータを遅くすることができて、そして非常に大きいファイルサイズさえ持っているかもしれません。ベクトル図形をできるだけ単純化することが重要です。
さらに、SVGファイルはXMLで書かれているので、テキストエディタで開いて編集することができます（！）。これはその値がその場で操作できることを意味します。たとえば、JavaScriptを使用してWebサイト上のSVGアイコンの色を変更することができます。これは、何らかのテキスト（つまり、2番目の画像を必要としない）と同じように、またはアニメ化することもできます。
全体として、それらはロゴやグラフのような単純な平らな形に最適です。
私はそれが役立つことを願っています！
JPEGは、あらゆる種類の画像（またはほとんどの場合）で最も軽量ではありません。角と直線、および単純な「塗りつぶし」（単色のブロック）は、圧縮レベルによってはぼやけて見えるか、またはアーティファクトがあります。これは非可逆形式であり、アーティファクトがはっきりと見えない写真に最適です。直線（描画や漫画など）は、PNGでは非常にうまく圧縮されているため、無損失です。 GIFは、透明度をIE 6で機能させたい場合、またはアニメーションを使用したい場合にのみ使用してください。 GIFは256色パレットしかサポートしていませんが無損失です。
だから基本的にここで画像フォーマットを決定する方法です：
- IE6で動作するアニメーションまたは透明度が必要な場合はGIF（注：PNG透明度はIE6以降で動作します）
- 画像が写真の場合はJPEG。
- コミックや他の図のように直線である場合、または透明度を使用して広い色範囲が必要な場合（およびIE6は要因ではありません）、PNG
そして、コメントされている通り、何が適しているのかわからない場合は、それぞれのフォーマットを異なる圧縮率で試して、画像の品質とサイズを比較し、どちらが最適かを選択してください。私は経験則だけを与えています。
GIFに比べていくつかの利点があるように思われるので、私は通常PNGを使います。 GIFには以前から特許制限がありましたが、それらは期限切れになりました。
GIFは、色数が限られている（ロゴなどの）鋭利な線画に適しています。これは、（滑らかなグラデーションとより柔らかいイメージを好むJPEGとは対照的に）明確に定義されたエッジを持つ均一色の平らな領域を好むフォーマットの可逆圧縮を利用します。
GIFは、小さなアニメーションや低解像度のフィルムクリップに使用できます。
256色へのGIF画像パレットの一般的な制限を考慮して、それは通常デジタル写真のためのフォーマットとして使用されません。デジタルカメラマンは、TIFF、RAW、損失の多いJPEGなど、写真の圧縮に適した、より広範囲の色を再現できる画像ファイル形式を使用します。
PNG形式は、GIFイメージの代わりによく使用される方法です。圧縮テクニックが優れており、256色という制限がないからです。ただし、PNGはアニメーションをサポートしていません。どちらもPNGから派生したMNGおよびAPNG形式はアニメーションをサポートしますが、広くは使用されていません。
JPEGは鋭いエッジなどの周囲では品質が良くないため、ほとんどのWebグラフィックには適していません。写真が得意です。
GIFと比較して、PNGはより良い圧縮、より大きなパレット、そして透明性を含むより多くの機能を提供します。そしてそれは無損失です。
GIFは256色に制限されており、実際の透明度をサポートしていません。 GIFではなくPNGを使用してください。圧縮と機能が向上するからです。 PNGは、ロゴ、アイコンなどの小さくてシンプルな画像に最適です。
JPEGは写真のような複雑な画像の圧縮率が優れています。
pngはgifよりも広い色パレットを持ち、gifは適切ですがpngは適切ではありません。 gifはアニメーションをすることができますが、normal-pngはできません。 png-transparentはIE 6よりもおおよそ最近のブラウザでのみサポートされていますが、その問題に対するJavascriptの修正があります。どちらもアルファ透明度をサポートしています。一般に、写真、スクリーンショット、またはそれに類するものにjpegを使用している間は、ほとんどのwebgraphicsにpngを使用する必要があると思います。png圧縮は適切ではありません。
GIFは、（少なくとも基本的な形では）1画像あたり256色のパレットに基づいています。 PNGは「TrueColour」、すなわち箱から出して16.7百万色をすることができます。ロスレスPNGはロスレスGIFよりも圧縮率が優れています。 GIFは「バイナリ」透明度（不透明度0％または不透明度100％）を実行できます。 PNGはアルファ透明度を処理できます。
全体として、アルファ透明画像を使用する必要がなく、IE6をサポートする必要がない場合は、ベクトルイラストなどにピクセルパーフェクト画像が必要な場合は、おそらくPNGがより良い選択です。 JPGは写真に勝るものはありません。
GIF画像を使って真の色を表示するためにできることがあります。 ０フレーム遅延を有する２５６カラーパレットフレームを有するＧＩＦアニメーションを準備し、そのアニメーションを一度だけ表示するように設定することができる。そのため、すべてのフレームを同時に表示できます。最後に、本当の色のGIF画像がレンダリングされます。
多くのソフトウェアはそのようなGIF画像を編集することができます。ただし、出力ファイルのサイズはPNGファイルよりも大きくなります。それが本当に必要ならばそれを使わなければなりません。
主な違いはGIFが特許取得済みで、もう少し広くサポートされていることです。 PNGはオープン仕様であり、アルファ透明度はIE6ではサポートされていません。サポートはIE7で改善されましたが、完全には修正されませんでした。
ファイルサイズに関しては、GIFのデフォルトカラーパレットは小さいので、一見すると小さいファイルサイズになる傾向があります。 PNGファイルのデフォルトパレットは大きくなりますが、カラーパレットを縮小すると、GIFよりもファイルサイズが小さくなります。また問題は、この機能がInternet Explorerでサポートされていないことです。
また、PNGはアルファ透明度をサポートできるため、バイナリ透明度以外の透明度のバリエーションが必要な場合は、それらが唯一の選択肢です。
2018年の時点で、私たちはいくつかの新しいフォーマット、以前のフォーマットへのより良いサポート、そして画像の代わりにビデオを使う巧妙なハックをいくつか持っています。
写真の場合
jpg - まだ最も広くサポートされている画像フォーマットです。
webp - 新しいフォーマット googleから。ブラウザ サポート は良い可能性があるが、良い可能性はない.
アイコンとグラフィックの場合
svg - 可能なときはいつでもそれは網膜スクリーンでうまくスケーリングし、テキストエディタで編集可能で、DOMにロードされていればJS/CSSを通してカスタマイズ可能です。
png - ラスタグラフィックが含まれる場合（つまりフォトショップで作成された場合）このユースケースで非常に重要である透明性をサポートします。
アニメーションの場合
svg - ベクターグラフィック用のcssアニメーション。 svgのすべての利点+ CSSアニメーションの力。
gif - まだ最も広くサポートされている動画形式です。
mp4 - 動画が実際には短いビデオクリップの場合 Twitter / WhatsappはGIFをmp4に変換する。
apng - まともなブラウザ support （つまりIEなし、Edge）、しかしそれを作成することはgifsほど単純ではありません。
webp - mp4の使用に近い。悪い サポート
これは、さまざまな動画形式のNice 比較 です。
最後に、どちらのフォーマットにしても、必ずそれを最適化してください。各フォーマット用のツール（SVGO、Guetzli、OptiPNGなど）があり、かなりの帯域幅を節約できます。
GIFは8ビット（256色）パレットを持ち、PNGは24ビットカラーパレットまでです。そのため、PNGはより多くの色をサポートでき、もちろんアルゴリズムは圧縮をサポートします。
JPEGを選択し、Webサイト用の画像を扱っている場合は、 Google Guetzli /知覚エンコーダーを検討してください。これは無料で入手できます。私の経験では、固定品質のために、GuetzliはJPEG標準との完全な互換性を維持しながら、標準のJPEGエンコーディングライブラリよりも小さいファイルを作成します（あなたの画像は一般的なJPEG画像と同じ互換性を持ちます）。
唯一の欠点は、Guetzliがエンコードに lot の時間がかかることです。しかし、これはWebサイト用に画像を準備するときに一度だけ行われます。画像が小さいほどダウンロードにかかる時間が短くなるため、Webサイトの速度は日常的に向上します。