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

シェイクスピアがロミオとジュリエットで言うように、他の名前のバラも同じように甘い香りがするかもしれませんが、そのバラの写真を高圧縮のJPEGとして保存すると、画像の品質が低下する可能性があります。しかし、PNG、TIFF、GIF、SVG、さらにはHEICやWebPのような新しい形式を使用するオプションもあるので問題ありません。これらの形式の中にはキャピュレット家のニュースレターにぴったりなものもあれば、ロミオのブログに合うものもあるので、これらのファイルタイプを理解することは非常に役立ちます。
ロスィーとロスレス

すべての画像形式は「ロスィー」または「ロスレス」として分類できますが、これらの用語はほとんど自明です。ロスィー圧縮は、ファイルに関する情報を永久に削除することでファイルサイズを削減し、サイズは小さくなりますが、品質も劣化します。ロスレス圧縮は、データを再配置してスペースを節約しますが、ファイルに損傷を与えることなくパックおよびアンパック(または解凍!)できます。
ラスタとベクター

「画像形式」と聞いて思い浮かべるのはおそらくラスタです。これはボブ・マーリーとは関係ありません。単にファイルが基本的に色付きのピクセルのグリッドで構成されていることを意味します。JPG、PNG、GIF、TIFF、およびほとんどの他の写真ファイルはラスタです。これらが持っている情報はピクセルの色だけなので、拡大または引き伸ばすと、一般的にはよりピクセル化された画像になります。
一方、ベクターは永遠にスケールされるように設計されています。SWF、EPS、およびPDFファイルは、画像をピクセルとしてではなく、点と線としてレンダリングできる数学的方程式として保存します。画像は必要に応じて大きくしたり小さくしたりできますが、品質は損なわれませんが、これらの拡張子はラスタ画像ほど一般的ではありません。
ジョイントフォトグラフィックエキスパートグループ(JPEG) – ロスィーラスタ

JPEGファイルはそれを作成したグループにちなんで名付けられ、ほぼ普遍的な互換性と小さなサイズのおかげでウェブ画像の世界を支配しています。あなたの目は、軽く圧縮されたJPEGと高品質の画像を数秒間の注意を払わなければ区別できないかもしれませんし、読み込みも速いので、ほとんどのウェブサイトには十分です。
JPEG-2000は、元のバージョンに対していくつかの改善が施された更新版ですが、実際にはあまり普及していないため、この形式を多くの場所で見ることはないでしょう。
適している用途: ウェブに写真を掲載すること、小さな画像サイズを保存および送信すること、一般的な使用、写真を印刷すること。
ポータブルネットワークグラフィックス(PNG) – ロスレスラスタ

この形式は、高品質のウェブグラフィックスの定番となっており、特に透明な背景が必要な場合に最適です。PNGは元々GIFの代替として設計されましたが、はるかに多くの色をサポートし、透明度の設定に関しても柔軟です。ファイルサイズは一般的にGIFやJPEGよりも大きいですが、PNGは品質をより良く保持し、より柔軟です。
また、いくつかのプログラムではPNG-8とPNG-24に出くわすこともあります。これらは通常のPNGとしてエクスポートされますが、PNG-8は256色のみをサポートし、部分的な透明度を許可しないため、より多機能なPNG-24よりも小さなファイルサイズになります。
適している用途: ウェブグラフィックス、高品質の写真(サイズが問題でない場合)、透明度。
グラフィカルインターチェンジフォーマット(GIF) – ロスレスラスタ

PNGの前身であるGIF形式は、現在ではソーシャルメディアで止められない短いビデオループを可能にすることで最も有名です。「 g if」と発音するか「 j if」と発音するかの議論はかなり白熱していますが、両方の側を怒らせたいなら「jeff」と発音してみてください。
GIFは256色のみをサポートしているため、高品質の写真には適していませんが、その圧縮は優れているため、シンプルな画像を大幅な品質低下なしに縮小できます。ピクセルも透明にすることができますが、オンまたはオフのいずれかでなければならず、中間はありません。
適している用途: シンプルなグラフィックス、アニメーション、アイコン。
タグ付き画像ファイル形式(TIFF) – ロスレスラスタ

あなたは個人的にTIFFに出会ったことがないかもしれませんが、もしあなたが写真に興味があるか、印刷メディアで多くの作業をしているなら、出版者に好まれる大きくて高品質な形式として認識するかもしれません。また、発音についての議論はありません。
適している用途: 高品質の写真を印刷すること、高品質の画像をスキャンすること、サイズが問題でないすべてのこと。
スケーラブルベクターグラフィックス(SVG) – ベクター

インターネットから画像を保存しようとして「ウェブページとして保存」オプションが表示されたことがあるなら、SVGを見たことがあるかもしれません。これらはおそらく最も広くサポートされているベクターグラフィックスであり、低ファイルサイズで良好な品質とスケーラビリティを維持できるため、ロゴ、サイトグラフィックス、その他ベクターが役立つ場所で人気があります。
適している用途: ビジネスグラフィックス、スケーラブルなグラフィックス、ロゴ。
新しい形式
これらの形式はまだ一般的には見かけないかもしれませんが、現在の標準に対していくつかの利点を提供します。
高効率画像形式
HEIFは基本的にJPEGですが、より高品質でファイルサイズが小さくなっています。これは現在、iOS 11以降のデフォルトの画像形式です。

WebP
WebPはGoogleの形式で、ほぼすべてのことを行います:JPEGよりも優れた圧縮、GIFよりも優れたアニメーション、PNGと同等の透明度。いくつかのブラウザでサポートされており、現在YouTube、Facebook、およびいくつかの他のサイトで、サポートされているブラウザを使用して訪問すると使用されています。

なぜこれほど多くの形式があるのか?
すべてを支配する1つの形式が存在することはほとんどないでしょう。なぜなら、異なる分野には異なる画像のニーズがあるからです。一般的なインターネットブラウザはJPEGとPNG(将来的にはWebPやHEICも)を考える必要はありませんが、ビジネスや出版のアプリケーションでは、TIFFやSVGのようなオプションがあると生活が楽になります。
そして、まだ選んでいない場合は、形式が消える前にGIFの議論に参加することを考えてみてください。歴史の一部になりましょう。
画像クレジット: JPEG、JPEG 2000、JPEG XRおよびHEIFの比較、Google Developers、W3C.org、It’s Easy Neon Animated Gif、JPEG JFIFおよび2000の比較、JPEG圧縮の例