画像はオンライン体験に非常に重要な要素ですが、一般に画像ファイル形式の選択はそこまで重要視されていません。
ほとんどのウェブページには、テキストコンテンツを目立たせたり、わかりやすく見せたりするためにスクリーンショットや画像が使用されています（画像などのメディアを使用していないサイトは全体のたった8%程度）。
各画像ファイル形式の適した用途まで理解するサイト所有者は、あまり多くありません。正しく画像最適化を行わない場合、サイトの表示速度が低下する可能性があります。
そこで今回は、より良いユーザー体験を提供するため、主な画像ファイル形式と適した用途をご紹介していきます。
画像ファイル形式の種類
画像ファイル形式は、まずラスター画像とベクター画像の2つに分類されます。
ラスター形式
ウェブで最も広く使用されている画像ファイル形式であるJPEG、GIF、PNGは、すべてラスター画像に分類されます。
ラスター画像は、各ピクセルが解像度（例：1280 x 720）に基づいて定義された色、位置、比率を持つ静的画像です。
静的であることから、画像のサイズを効率的に変更することができず、拡大すると元のデザインやピクセルはスペースを埋めるために引き伸ばされます。その結果、画像は以下のようにぼやけたり、ギザギザになったり、歪んだりすることになります。
インターネット上で目にする写真や画像の大半はラスター画像です。
ベクター形式
SVG、EPS、AI、PDFは、ベクター画像に分類されます。
静的なラスター画像とは異なり、各デザインの形や色がピクセルに関連付けられ、より柔軟性に優れています。
ベクター画像は直交平面上の線と曲線のシステムを使用するため、画質を損なうことなく、元の画像の解像度を制限なく拡大できます。
このように、7倍に拡大した際の画質の差は比較するまでもありません。
SVGはピクセルではなく、総面積のパーセンテージに基づいて位置が計算されるため、ピクセレーションが発生することがありません。
主要な画像ファイル形式15選
先に触れましたが、ラスター画像およびベクター画像には、それぞれ多数のファイル形式があります。
各ファイル形式の利点と欠点、ブラウザやOSのサポート、理想的な用途などを詳しく見ていきましょう。
1. JPEG（JPG）─Joint Photographic Experts Group
JPEG（またはJPG）は、画像の共有に適した非可逆圧縮方式のラスター画像です。非可逆であるため、ファイルサイズを小さく留めることができますが、その分画質も下がります。
その圧縮性と幅広いブラウザおよびOSのサポートにより、現在でもインターネット上で最も使用されている画像ファイル形式の1つです。
ほとんどのSNSプラットフォーム（FacebookやInstagramなど）では、アップロードした画像が自動的にJPEGに変換されます。また、SNS独自の画像サイズ制限を用いて、写真の解像度も制御されます。
利点と欠点
- あらゆるブラウザとOSでサポートされている
- ファイルサイズがかなり小さい
- 非可逆圧縮方式によりテキストの可読性が落ちる可能性がある
対応ブラウザとOS
- すべての主要ブラウザ（Chrome、Firefox、Safariなど）
- すべての主要なOSおよびその標準画像ビューア、エディター
用途
- ブログの画像やインタビュー記事のヘッドショット、ECサイトの商品画像などには適している
- 小さなテキストが多いインフォグラフィックスや、解説記事などで使用するテキストが重要なスクリーンショットには不向き
2. PNG─Portable Network Graphics
PNGは可逆圧縮方式のラスター画像で、画像の細部と色間のコントラストを維持することができます。JPEGと比較すると、テキストの可読性が圧倒的に優れています。
そのため、PNGはインフォグラフィックス、バナー、スクリーンショットなど、画像とテキストの両方を含むグラフィックに適しています。
利点と欠点
- 高画質（可逆圧縮方式）でテキストがはっきり表示される
- ファイルサイズが大きく、多用するとサイトパフォーマンスが下がる可能性あり（特に高解像度の画像）
ブラウザとOSのサポート
- すべての主要ブラウザ（Chrome、Firefox、Safariなど）
- すべての主要なOSおよびその標準画像エディター
使用例
- インフォグラフィックス、バナー、ブログ記事のグラフィック、スクリーンショット、クーポンなど、テキストを含む画像に適している
- 最大数メガバイトの大きなファイルになるため、高解像度の写真には不向き
3.GIF─Graphics Interchange Format
GIF（ジフ）もラスター画像に分類されます。可逆圧縮方式ですが、画像はピクセルあたり8ビット、パレットは256色に制限されています。
GIFファイル形式は、アニメーション画像に使われるのが一般的ですが、その理由は「8ビット」という制限によりアニメーションのファイルサイズを小さく保つことができ、使用しやすいことにあります。
利点と欠点
- ファイルサイズが小さい
- アニメーションに対応
- 8ビットの制限により、画質に限界がある
ブラウザとOSのサポート
- すべての主要ブラウザに対応（Chrome、Firefox、Safariなど）
- すべての主要なOSおよびその標準画像エディター
使用例
- コンテンツの「スパイス」として使用するのはもちろん、解説記事やガイドで手順を示すのにも有効
- 8ビット以上の色が必要な画像には不向き（JPEGは24ビットまでサポート）
4. WebP
WebP（ウェッピー）は、より良い画像の可逆圧縮と非可逆圧縮を実現するために開発された画像ファイル形式です。
JPEGやPNGをWebPに変換することで、サーバーの消費ディスク容量や帯域幅を大幅に削減でき、同じ画質を保ちながら最大35%小さい画像ファイルを作成することができます。
利点と欠点
- 同等（またはそれ以上）の画質を保ちながら画像ファイルが小さくなる
- WebPをサポートしていないブラウザや画像エディターがある
ブラウザとOSのサポート
- Google Chrome（PC用バージョン17以上、モバイル用バージョン25以上）、Firefox（65以上）、Edge（18以上）、Opera（11.0以上）は、WebPを標準サポート。Safariはバージョン14でWebPをサポートする予定。
- 各OSの標準画像エディターではまだサポートされていないが、Photoshopのような上級者向けソフトウェアではサポートされている。
使用例
- JPEGやPNGファイルをWebPに変換して消費帯域幅を抑えることで、サイトを高速化。CMSソフトウェアにWordPressを使用している場合は、WordPressでWebP画像を使用し最新でないブラウザに別のファイル形式を配信する方法をチェック。
5. TIFF
今回の記事で欠かすことのできない画像ファイル形式が、TIFF（ティフ）です。
Tagged Image File Formatの略で、あとで印刷に使用される画像の保存や編集に最も使用されているラスター画像です。
非可逆圧縮もサポートしていますが、可逆圧縮方式で使用されるのが一般的です。TIFFをサポートするほとんどのグラフィックデザインソフト（Photoshop、Illustratorなど）では圧縮されないため、TIFF画像は通常ファイルサイズが大きくなります。
利点と欠点
- 保存や印刷出版に理想的な高画質ファイル
- 一般的には圧縮しないためファイルサイズが大きい
- ブラウザのサポートに制限あり
対応ブラウザとOS
- 主要ブラウザではTIFFファイルのレンダリングにアドオンや拡張機能が必要
- 画像編集および出版社向けツールのエクスポート形式として利用できる
使用例
- 出版用の画像やグラフィックの保存と準備に適している
- 文書や画像の画質を保ちたい場合に適している（多くのスキャナーがTIFFを採用）
6. BMP─ビットマップ
BMP（ビットマップ）は個々のピクセルをほぼ圧縮することなくマッピングするファイル形式で、今日ではやや時代錯誤と言えます。通常、保存や取り扱いが実用的でないほどファイルサイズが大きくなります。
利点と欠点
- WebP、GIF、PNGのような形式と比較して、圧倒的にファイルサイズが大きく、かといって画質も高くない
ブラウザとOSのサポート
- すべての主要ブラウザ（Chrome、Firefox、Safariなど）
- MicrosoftのペイントのようなほとんどのようなOS標準画像エディター
使用例
- 2024年現在は、BMPの使用は推奨されていない
7. HEIF─High Efficiency Image File Format
HEIF（ヒーフ）はHigh Efficiency Image File Formatの略で、動画ファイル形式のMPEGを開発したチームがリリースしたJPEGに対抗する画像ファイル形式です。
理論上、圧縮効率はJPEGのおよそ2倍で、同じファイルサイズで画質が最大2倍向上します。
ただし、ピクセルマッピングに基づくラスター画像であるため、画質を損なうことなく画像を拡大することはできません。
利点と欠点
- 画質とファイルサイズの比が大きい
- ブラウザでサポートされておらず、OSでもサポートに限りがある
ブラウザとOSのサポート
- 主要なブラウザではサポートされていない
- macOS SierraおよびiOS 11以降では標準サポートされているが、それぞれのSafariバージョンでは非対応
使用例
- 一部の最新のスマートフォンやデバイスで、JPEGファイルよりも高画質で写真を保存するために使用されている
8. SVG─Scalable Vector Graphics
SVGは、Scalable Vector Graphicsの略であり、ブラウザ内で二次元画像を適切にレンダリングするためのマークアップ言語としてW3Cによって開発されました。
ラスター画像のようにピクセルに依存するのではなく、XMLテキストを使用して、数式がグラフを作成するのと同様の方法で、図形や線の輪郭をレンダリングします。これにより、画質を損なうことなく無限に拡大することができる形式です。
利点と欠点
- ファイルサイズが小さく、単純なイラストや図形、テキストを画質を保ちながら拡大縮小できる
- 画像や複雑な図面には向いていない
対応ブラウザとOS
- すべての主要ブラウザ（Chrome、Firefox、Safariなど）
- 画像編集ソフトでは標準サポートされていない傾向にあるが（写真には不向きなため）、多くの画像編集ソフトウェアは対応
使用例
- ロゴ、アイコン、シンプルなイラスト、レスポンシブデザインで柔軟に拡大縮小したい場合に理想的。WordPressを使用している場合は、WordPressのSVGサポートを有効にする方法をチェック。
9. EPS─Encapsulated PostScript
EPS（Encapsulated PostScript）は、Adobe IllustratorやCorelDrawのような画像編集ソフトウェアでイラストを保存するために使用するベクター画像です。
SVGファイルのように、実際にはテキストベースのドキュメントであり、ピクセルや色をマッピングするのではなく、コードで図形や線の輪郭をレンダリングします。この特徴から、EPSファイルも画質を落とすことなく拡大縮小が可能です。
利点と欠点
- 画質を損なうことなく拡大縮小が可能
- ドキュメントやデザインの印刷サポート
ブラウザとOSのサポート
- 標準的なウェブ画像ファイル形式ではないため、主要なブラウザではサポートされていない
使用例
- 主にAdobe Illustratorのようなソフトウェアで作業する際、イラストを保存、保存、印刷するために使用される
10. PDF─Portable Document Format
PDFと聞くと、テキストベースの文書を連想される方が多いはず。
実はPDFファイルは、EPSと同じPostScript言語で記述されており、画像やイラストの保存にも使用することができます。
イラストやオンラインマガジンの表紙などを保存し、後で印刷するための画像ファイル形式として広く使用されています。Kinstaも電子書籍にPDFを採用しています。
利点と欠点
- インデックス化できて検索可能なテキストは、詳細なインフォグラフィックやレポートに適している
- リンクやCTAボタンなどのインタラクティブ要素を扱うこともできる
- 画質を損なうことなく拡大縮小可能
- ウェブコンテンツを含めることはできないため、別ファイルとして読み込む必要がある
対応ブラウザとOS
- すべての主要ブラウザでサポートされているが、別ファイルとして開く必要がある（HTMLコンテンツ全体に画像を表示するためにPDFファイルを使用することはできない）
- ほとんどの標準的な文書編集ソフト（MS WordやGoogle Docsなど）、イラストソフト（AI、Inkscape）でサポートされているが、画像編集ソフトでは非対応
使用例
- コンテンツを補完するインタラクティブで視覚的なレポートや、インフォグラフィックを作成した場合に理想的。WordPressのおすすめのPDFビューアープラグインはこちら。
11. PSD─Photoshop Documents
その名が示す通り、PSDはAdobe Photoshopで作成中の画像文書や作品を保存するために使用される画像ファイル形式です。
ウェブセーフな画像ファイル形式ではないため、ブラウザや標準的な画像ビューア、エディターではサポートされていません。
利点と欠点
- フィルター、透明度、パス、編集は100%編集でき、可逆的（編集や変更を加えても元のデータに戻すことができる）
- 画質を損なうことなく拡大縮小可能
- ファイルサイズが大きい
使用例
- Photoshopプロジェクトの完成前および完成後の保存と保管に使用される
12. AI─Adobe Illustrator Artwork
AIは、画像だけでなく、プロジェクトの状態を保存する役割も持ち、Adobeによって特別に開発された画像ファイル形式です。
PSDと同様、ウェブでの使用は想定されておらず、どのブラウザでも、またほとんどのデフォルトの画像ビューアでもサポートされていません。
PSDファイルとは異なり、AIファイルは品質を損なうことなく自由に拡大縮小することができます。
利点と欠点
- ストローク、線、形状、フィルターは編集可能で、可逆的
- イラストのサイズを自由に拡大縮小できる
- ファイルサイズが大きい
使用例
- Adobe Illustratorプロジェクトの完成前および完成後の保存と保管に使用される
13. XCF─eXperimental Computing Facility
XCFはeXperimental Computing Facilityの略で、オープンソースの画像処理ソフトのGIMPの画層ファイル形式です。PSDファイルに相当し、パス、透明度、フィルタなどを保存することができます。
上に挙げたいくつかの形式と同じように、あくまでプロジェクトを保存するためのファイル形式であるため、ブラウザや画像ビューアではサポートされていません。
利点と欠点
- パス、フィルター、形状は編集可能で、可逆的
- 画質を損なうことなく拡大縮小ができる
- ファイルサイズが大きい
使用例
- GIMPプロジェクトの完成前および完成後の保存と保管に使用される
14. INDD─Adobe InDesign Document
INDDは、Adobe InDesignユーザー用のファイル形式で、ページコンテンツ、スタイル、スウォッチなどを含むプロジェクトファイルを保存します。
画像ファイル形式と呼ばれることもありますが、テキスト以外のビジュアル要素に関連する傾向にあります。例によって、ウェブセーフな形式ではないため、ブラウザや画像ビューアでのサポートはありません。
利点と欠点
- カスタマイズ可能な要素を含む、複数のページを持つ大規模なデザインプロジェクトを保存できる
使用例
- 一般にポスター、チラシ、雑誌、パンフレットなどのデザインや共同制作に使用される
15. RAW画像ファイルの種類
RAW画像ファイル形式は、デジタルカメラが後のポストプロダクションや編集のために最高画質の画像を保存するために使用されます。
カメラメーカー別のRAW画像ファイル形式は、以下のようになっています。
- コダック：CR、K25、KDC
- キヤノン：CRW CR2 CR3
- エプソン：ERF
- ニコン：NEF NRW
- オリンパス：ORF
- ペンタックス：PEF
- パナソニック：RW2
- ソニー：ARW、SRF、SR2
RAWファイルは、JPEGファイルで利用可能な色数256色（各色8ビット）に対して、1枚の画像で最大1万6,384色（各色14ビット）を実現することができます。これにより、後処理で色やコントラストを調整する際の柔軟性が向上されます。
RAW画像はウェブや共有向けではないため、主要なブラウザや画像ビューアではサポートされていません。
利点と欠点
- 高画質で色のばらつきが少ない
- ファイルサイズが巨大（最大20～40MBになることも）
使用例
- 後処理や編集のために可能な限り高画質で写真を保存するのに使用される
画像ファイル形式に関するよくある疑問
最も使用されている画像ファイル形式は？
ウェブの利用状況に関するデータによると、最も一般的な画像ファイルの種類はJPEG、PNG、SVGの3種類です。
以下、各画像ファイルが具体的にどのような用途に使用されているかを見てみましょう。
1. PNG─スクリーンショット、バナー、インフォグラフィックス、写真
PNGはテキストを含む画像に適した形式であるため、スクリーンショットやバナー（バナー広告のサイズによる）によく使用されています。
可逆圧縮方式という特徴から、デザイナーや写真家が自身のポートフォリオサイトで作品を高画質で紹介する際にも使われます。
また、主要なブラウザとOSでサポートされているため、ウェブ上で最も人気の高い画像ファイル形式で、PNGを使用しているウェブサイトは全体の77％に及びます。
2. JPEG─写真
非可逆圧縮方式であるJPEGは、コンテンツ全体に画像を表示するのに適しています。画質は低下しますが、一般ユーザーの目に留まるほどではなく、消費ディスク容量と帯域幅を大幅に削減することができます。
PNGに次いで2番目に人気のある形式で、約72％のサイトで使用されています。目的に応じてPNGとJPEGを併用しているサイトがほとんどです。
なお、JPGとJPEGは略語が異なるだけで、全く同じファイル形式です。
3. SVG─ロゴ、アイコン、イラスト
SVGはスケーラブルなベクター画像で、アイコン、ロゴ、グラフ、シンプルなイラストに適しています。画像はCSSコードで画像をページに直接挿入することも可能です。
この特徴から、SVGはウェブサイト全体の27%で使用されており、PNG、JPEGに続いて3位に位置しています。
番外編─GIFアニメーション
静止画に選ばれることはほぼありませんが、アニメーションを共有するためにGIFが再び人気を集め始めています。
約22％のサイトがPNGやJPEGをメインに使用しつつ、GIFも扱っています。
最も高画質な画像ファイル形式は？
最も高画質な画像ファイル形式はRAWです。ただし、ファイルサイズが数百メガバイトと段違いに大きくなることは念頭に置いてください。
ウェブ用の画像であれば、WebPファイル形式は、同等の画質でJPEGよりもファイルサイズが25～35％小さくなり、同じディスク容量でより高画質の画像をアップロードでき、サイトの高速化にもつながります。
またHEIFは、効率的に圧縮可能なJPEGの代替ファイル形式ですが、現在主要なブラウザでサポートされていません。
PNGファイルは可逆圧縮方式ですが、ファイルサイズが非常に大きくなるため、読み込み時間がかかります。1つのPNGファイルが数百KB、あるいは1MBを超えることも。しかし、WordPress 5.5からコアでサポートされている遅延読み込みやCDNを活用すれば、サイトを高速に保つことができます。
透過をサポートしている画像ファイル形式は？
透過をサポートする最も一般的なウェブ用の画像ファイル形式は、PNG、WebP、GIF、SVGです。
また、PSD、XCF、AIなども透過をサポートしています。
注意点として、人気画像ファイル形式であるJPEGは透過をサポートしていません。
PNGとJPEGはどっちが優れている？
PNGとJPEGの大きな違いは圧縮方式にあります（PNGは可逆圧縮、JPEGは非可逆圧縮）。PNGは画像の画質や細部を失うことなく、柔軟に拡大縮小することができます。
画像内のテキスト、解説用のスクリーンショット、また写真に標識のような情報が写っている場合は、PNGが適切です。
上のイラストからもわかる通り、左側のテキスト（PNG）は右側のテキスト（JPEG）と比較して、テキストや図形がはっきりと表示されます。
ただし、常にPNGを選べばいいというわけでもありません。ブログ記事やヘッダー画像であれば、ファイルサイズが大幅に削減されるJPEGがお勧めです。読者には見分けがつかない十分な画質を確保しながら、最大50％以上もサイズを小さくすることができます。
まとめ
コンテンツ制作に画像の存在は欠かせません。今回ご紹介した画像ファイル形式の特徴を踏まえて、用途に適した形式を選択してみてください。
ラスター形式は画像や写真、ベクター形式はロゴ、アイコン、デジタルグラフィックに適しています。
適切な画像ファイル形式を使用することは、ページの読み込み時間の短縮だけでなく、帯域幅やサーバーの負荷軽減にもつながります。結果として、サイト全体のユーザー体験を改善することができます。
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
コメントを残す