基本ノウハウ
Webサイトやブログの運営など、Webコンテンツ制作に関係している方であれば、画像ファイルを扱う作業を避けては通れないでしょう。さまざまなファイル形式がありますが、違いや適した用途があるのでしょうか？
今回は画像ファイルで代表的なJPEGとPNGについて紹介します。この記事を読んでそれぞれの特徴を理解し、ファイル形式選びの参考にしてください。
Webコンテンツ関係の仕事でよく使う画像ファイルの代表例が、JPGとPNGです。この2つはファイル形式を変換できますが、具体的な違いを分かっていない人は多いかもしれません。それぞれの特徴を解説します。
JPG（ジェイペグ）はJoint Photographic Experts Groupの略称です。
JPGの最大の特徴はデータの軽さです。通常、画像データには目に見えないほど細かい色データが存在しており、それらがファイル容量を重くしています。JPEGでは不可逆圧縮という方法で画質に影響しない色データを削除し、品質を保ってファイルが保存されるため、見た目にはほとんど画質が変わらなくても、データ容量は数分の1程度に圧縮されます。
ただし、保存する度に余分なデータを削除するため、保存を繰り返すとデータ画質が落ちることに注意が必要です。また、不可逆圧縮の名前の通り、一度落ちてしまった画質は、圧縮前の状態に戻せないという特性があります。画像の編集中に一時保存すれば画質が落ちてしまうため、作業中の保存には注意しましょう。
JPEGでは、一般的なディスプレイのフルカラーである約1,677万色を利用できますが、透過はできません。色数の多い写真やグラデーションのように、細かな色変化が続く画像データに向いています。一方で色数が少なく、色の境がはっきりしているロゴや簡単なイラスト、グラフなどに使うとノイズが出やすくなります。
PNG（ピング）はPortable Network Graphicsの略です。Webで利用することを目的に作られました。
可逆圧縮方式で画像データを圧縮して保存します。可逆圧縮は、圧縮して保存しても画質が落ちず圧縮前の状態に戻せる方法です。そのため一度保存した画像を再度加工したり、リサイズしたりしても画質は劣化しません。
JPGに比べてデータ容量が重くなる傾向がありますが、PNGでも工夫すれば見た目の画質を落とさず、データ容量を小さくすることが可能です。
PNGとJPGは変換が可能ですが、PNGの種類によっては変換できない場合があります。PNGの種類は表現できる色数の違いによって分かれています。それぞれの特徴は以下の通りです。
PNG-8は、表現可能色数は258色で透過できますが、半透明はできません。色数が少ないためコンテンツと透明部分の境目が粗くなります。単色のロゴやアイコンなど、シンプルなイラストに使うのが良いでしょう。他のPNGファイルよりもデータ容量を軽くできることがメリットです。
PNG-24は、JPGと同じく約1,677万色を利用でき、写真やグラデーションのある画像データに向いています。透過に近い表現は可能ですが、厳密にはできません。色数が多い分PNG-8と比べるとデータ容量は重くなりますが、その分高画質なファイル形式です。
PNG-32は、約1,677万色に加えて256段階の透過情報を使えます。PNG-24に透過情報を加えたイメージです。ファイル容量はPNGで最も重く、イラストや写真、グラデーションなどすべての画像データに対応できます。PNG-32はファイル容量が大きいため、Webでの使用には適していません。Webで一般的に使われるPNGはPNG-8かPNG-24となっています。
いずれのフォーマットも画像を圧縮して保存することは共通していますが、その方式の違いから異なる特性を持ちます。それぞれメリットとデメリットがあるため、特性を理解した上で用途にあわせて使い分けましょう。
| JPG | PNG-8 | PNG-24 | PNG-32 | |
| 色数 | 約1,677万色 | 256色 | 約1,677万色 | 約1,677万色+256段階の透過 |
| 圧縮保存後 | 復元不可 | 復元可能 | 復元可能 | 復元可能 |
| 透過 | ✕ | ○ | ✕ | ○ |
| データ容量 | 小 | 小 | 大 | 大 |
| 保存による画像劣化 | あり | なし | なし | なし |
| 写真やグラデーション画像 | 対応可 | 対応不可 | 対応可 | 対応可 |
ここでは、JPGのメリットを3つ紹介します。
フルカラー約1,677万色が利用できるため、細かな色彩の表現を必要とする写真に適しています。一方、イラストのように色の境がはっきりしている画像では、ノイズが出やすく注意が必要です。
画像を圧縮することで、もとのファイル容量より数倍軽くできます。ファイル容量が軽ければWebページの読み込みスピードが上がり、ユーザビリティが向上します。さらに、サイト運営側ではサーバーへの負担を軽くできるというメリットもあります。
JPEGの歴史は古く、1980年代に開発されて以来一般的に使われています。そのため、ほとんどのブラウザーやアプリケーション、ソフトウェアに対応しています。
ここでは、PNGのメリットを紹介します。
PNG-8とPNG-32は透過処理ができるため、背景の不要な部分をカットできます。また、背景透過した画像に別の画像を重ねることでグラデーション表現を作ることができます。
可逆圧縮方式では保存時にデータを削除せずに圧縮するため、保存しても画質が落ちません。また、一度データ容量を落として保存しても、圧縮前の状態に復元できます。
PNGは輪郭の周りにノイズが発生しないため、ベタ塗りのイラストやグラフ、テキストの保存に適しています。
JPGやPNG以外にも画像ファイルに関係する拡張子はいくつかあり、性質や用途はそれぞれ異なります。
GIF（ジフ）は、Graphics Interchange Formatの略です。256色を利用でき、ロゴやアイコン、シンプルなイラストなど色数の少ない画像の保存に向いています。色の透過もでき可逆圧縮方式のため、PNG同様に質の低い画像データで保存しても元通りの画質に戻すことが可能です。最大の特徴はアニメーションを作成できる点で、シンプルな動きのある画像に最適です。
GIFはPNGが開発される前に使われていた拡張子ですが、当時GIFの特許を保有していた米国ユニシス社がGIFの使用時に使用料の支払いを求めたため、代替えとしてPNGが開発されました。2022年現在では特許問題は解決されているため、GIFも自由に使用できます。1980年代から存在する拡張子のため広く使われており、パソコンはもちろんスマートフォンでも使える点がメリットです。
TIFF（ティフ）は、Tagged Image File Formatの略です。拡張子と同じくTIFと表記される場合もありますが、TIFFが正式な表記です。可逆圧縮方式で保存されるため、画質を落として画像データを保存しても、あとで画質を戻せます。データ容量は非常に重く、Webでの使用には向いていません。細かい部分まで鮮明な画像データを保存できるため、プロ用の高画質写真や高解像度のスキャンに適しています。
1980年代から一般的に使われている形式で、ファイルを開くことは問題ありませんが、画像を加工する場合はPhotoshopなど対応するソフトが必要です。
BMP（ビットマップ）は、Microsoft Bitmap Imageの略です。MicrosoftがWindows用に開発したファイル形式で、一般的に圧縮されないためデータ容量が非常に重く、Webでは使用できません。高精細の画像を保存できるため、高画質2Dデジタル写真に向いています。Windows向けに開発されただけあって、多くのデバイスやWebブラウザー、ソフトウェアに対応していることがメリットです。
今回はJPGとPNGの違い、またその他画像に関するファイル形式について解説しました。まずはJPGとPNGの違いをしっかりと理解した上で、用途別にファイル形式を選びましょう。Webサイトに掲載する画像ファイルの理想は、鮮明で軽いことです。画質を優先してファイルを選ぶべきか、ユーザビリティを考慮して軽くすべきか検討しましょう。本記事で紹介した各形式のメリットを参考に、運営しているWebサイトにとって最適なものを選んでください。
