JPG vs. PNG vs. GIF: 画像ファイル形式の違い


シェイクスピアがロミオとジュリエットで言ったように、他の名前のバラは甘い香りがするかもしれませんが、そのバラの写真を撮って高圧縮の JPEG として保存すると、画質が低下する可能性があります。 ただし、PNG、TIFF、GIF、SVG、または HEIC や WebP などの新しい形式を使用するオプションもあるため、問題ありません。 これらの形式のいくつかは Capulet ファミリーのニュースレターで見栄えがよく、他の形式は Romeo のブログに適しているため、これらのファイル タイプをデコードすると非常に便利です。

ロッシー対ロスレス

image-formats-lossy

すべての画像形式は、「損失あり」または「損失なし」のいずれかに分類できます。これらの用語は、ほとんどの場合、それ自体で説明されています。 非可逆圧縮は、ファイルに関する情報を完全に削除することでファイル サイズを縮小し、サイズを小さくしますが、品質も低下させます。 可逆圧縮は、ファイルに損傷を与えることなく、より少ないスペースで圧縮および解凍 (または解凍) できるようにデータを再配置するだけです。

ラスター対ベクター

image-formats-raster-vector

「イメージ フォーマット」というと、おそらくラスターを思い浮かべるでしょう。 それ。 Bob Marley とは何の関係もありません。つまり、ファイルは基本的に、画像を構成する色付きのピクセルのグリッドであるということです。 JPG、PNG、GIF、TIFF、およびその他のほとんどの写真ファイルはラスターです。 それらが持っている唯一の情報はピクセルの色であるため、それらを拡大または引き伸ばすと、通常はよりピクセル化された画像になります。

ただし、ベクトルは永久にスケーリングされるように設計されています。 SWF、EPS、および PDF ファイルは、画像をピクセルとしてではなく、点や線としてレンダリングできる数式として保存します。 画像は、品質に影響を与えずに必要なだけ大きくしたり小さくしたりできますが、ベクターはラスター画像ほど容易に互換性がないため、これらの拡張機能は Web では一般的ではありません。

Joint Photographic Experts Group (JPEG) – Lossy Raster

image-formats-jpeg

JPEG ファイルは、それを作成したグループにちなんで命名され、ほぼ普遍的な互換性と小さいサイズにより、Web イメージの世界を支配しています。 あなたの目はおそらく、数秒間精査しないと、圧縮率の低い JPEG と高品質の画像を見分けることができず、読み込みも速いので、ほとんどの Web では十分です。

JPEG-2000 は、元のバージョンよりもいくつかの改善が加えられた更新バージョンですが、実際に普及したことはないため、この形式を多くの場所で目にすることはまずありません。

次の用途に最適:Web に写真を掲載する、小さいサイズの画像を保存して送信する、一般的に使用する、写真を印刷する。

ポータブル ネットワーク グラフィックス (PNG) – ロスレス ラスター

image-formats-png

この形式は、特に透明な背景が必要な場合に、高品質の Web グラフィックの頼りになるものになっています。 PNG はもともと GIF の代替として設計されましたが、より多くの色をサポートし、透過設定についてより柔軟です。 ファイル サイズは通常、GIF や JPEG よりも大きくなりますが、PNG は品質を維持し、より柔軟です。

一部のプログラムでは、PNG-8 および PNG-24 に遭遇することもあります。 これらは引き続き通常の PNG としてエクスポートされますが、PNG-8 は 256 色のみをサポートし、部分的な透明度を許可しないため、フル機能の PNG-24 よりもファイル サイズが小さくなります。

次の用途に最適:Web グラフィック、サイズが問題にならない高品質の写真、透過性。

Graphical Interchange Format (GIF) – ロスレス ラスター

image-formats-gif

PNG の前身である GIF 形式は、現在、ソーシャル メディアで見るのをやめられない短いビデオ ループを有効にすることで最も有名です。 「」と発音するかどうかの議論gもし」または「jif」はかなり熱くなっていますが、双方を怒らせたい場合は、「ジェフ」と発音してみてください。

GIF は 256 色しかサポートしていないため、高品質の写真には適していませんが、圧縮率が優れているため、品質に大きな影響を与えることなくシンプルな画像を縮小できます。 ピクセルを透明にすることもできますが、その中間ではなく、オンまたはオフにする必要があります。

次の用途に最適:シンプルなグラフィック、アニメーション、アイコン。

タグ付き画像ファイル形式 (TIFF) – ロスレス ラスター

image-formats-tif

個人的には TIFF に遭遇したことはないかもしれませんが、写真や印刷メディアを扱うことが多い場合は、TIFF がサイズが大きく、高品質であり、多くの場合、出版社に好まれる形式であることに気付くかもしれません。 また、誰も発音について議論しません。

次の用途に最適:高品質の写真を印刷したり、高品質の画像をスキャンしたり、サイズが問題にならないものなら何でも。

スケーラブル ベクター グラフィックス (SVG) – ベクター

image-formats-svg

インターネットから画像を保存しようとして、代わりに「Web ページとして保存」オプションを取得したことがある場合は、SVG を見たことがあるかもしれません。 これらは、おそらく最も広くサポートされているベクター グラフィックであり、小さいファイル サイズでも高品質とスケーラビリティを維持できるため、ロゴやサイト グラフィックなど、ベクターが便利なあらゆる場所で人気があります。

次の用途に最適:ビジネス グラフィックス、スケーラブルなグラフィックス、ロゴ。

新しいフォーマット

これらの形式はまだ実際には見たことがないかもしれませんが、今日の標準よりもいくつかの利点があります。

高効率の画像フォーマット

HEIF は基本的に JPEG ですが、より高品質でファイル サイズが小さくなっています。 これは、iOS 11 以降のデフォルトの画像形式になりました。

image-formats-heif

WebP

WebP は Google のフォーマットであり、JPEG よりも優れた圧縮率、GIF よりも優れたアニメーション、PNG と同等の透過性など、ほぼすべての機能を備えています。 いくつかのブラウザーでサポートされており、現在、サポートされているブラウザーを使用してアクセスすると、YouTube、Facebook、およびその他のいくつかのサイトで使用されています。

image-formats-webp

なぜこれほど多くの形式があるのですか?

分野が異なれば画像のニーズも異なるため、1 つの形式ですべてを支配することはまずありません。 一般的なインターネット ブラウザは、JPEG や PNG (将来的には WebP や HEIC も) 以外を考える必要はありませんが、ビジネス アプリケーションやパブリッシング アプリケーションでは、TIFF や SVG などのオプションがあると作業が楽になります。

また、GIF 形式が消滅する前に、GIF の討論でどちら側につくかをまだ検討していない場合は、検討する必要があります。 歴史の一部になりましょう。

画像クレジット:JPEG、JPEG 2000、JPEG XR、HEIF の比較Google デベロッパーW3C.orgイッツイージーネオンGifアニメーションJPEG JFIF と 2000 の比較JPEG圧縮例

ニュースレターを購読する!

最新のチュートリアルが受信トレイに直接配信されます

すべてのニュースレターにサインアップしてください。

サインアップすることにより、あなたは当社のプライバシー ポリシーに同意し、ヨーロッパのユーザーはデータ転送ポリシーに同意したことになります。 お客様のデータを共有することはありません。いつでも購読を解除できます。

購読