Webデザインの世界には、さまざまなファイル形式が存在します。それぞれの「得意・不得意」を理解し、状況に合わせて最適な形式を選べるようになりましょう。
Web制作の現場では、適切なファイル形式を選択できるかどうかが、サイトの表示速度やデザインの品質に直結します。それぞれの「特徴」「使い分け」をマスターしましょう。
目次
1.2つの大きな分類：ビットマップとベクター
画像ファイルは、大きく分けて2つの構造に分類されます。
- ビットマップ（ラスター）形式: ピクセル（小さな点）の集合で構成される画像。写真など複雑な色表現が得意ですが、拡大すると画質が荒れます。
- 該当：JPEG, PNG, WebP, PSD
- ベクター形式: 数式で図形を表現する画像。どれだけ拡大しても境界線が滑らかで、ロゴやアイコンに向いています。
- 該当：SVG, AI, EPS
2.Web制作で必須の「Web表示用」形式
JPEG
- 特徴: 写真の保存に最も適した形式。フルカラー（1677万色）を扱えます。
- メリット: 圧縮率が高く、ファイルサイズを小さくできる。
- デメリット: 「不可逆圧縮」のため、保存を繰り返すと画質が劣化する。背景を透明にすることはできません。
- 主な用途: サイト内の写真、バナーの背景写真など。
PNG
- 特徴: 背景を透明にできるのが最大の特徴。
- メリット: 「可逆圧縮」のため、保存を繰り返しても画質が落ちない。文字や境界線がくっきり残る。
- デメリット: 写真などの複雑な画像に使用すると、JPEGよりもファイルサイズが非常に大きくなる。
- 主な用途: 透過背景のロゴ、イラスト、スクリーンショット、図解。
SVG
- 特徴: Webブラウザで表示可能なベクター形式。
- メリット: 拡大・縮小しても劣化しない。コード（XML）で書かれているため、CSSやJavaScriptで色を変えたり動かしたりできる。
- デメリット: 写真のような複雑な表現には向かない。
- 主な用途: アイコン、ロゴ、シンプルなイラスト。
WebP
Googleが開発した次世代画像形式です。現在のWeb制作では、JPEGやPNGに代わる標準として推奨されています。
- 特徴: JPEG並みの写真表現と、PNGのような背景透過を両立できます。
- メリット: JPEGやPNGよりも圧倒的にファイルサイズが軽い（同じ画質で25〜30%ほど軽量化）。
- デメリット: 古いブラウザ（IEなど）では表示できませんが、現在はほぼ全てのモダンブラウザが対応しています。
- 用途: サイト内の写真、背景、透過イラストなど、Webサイト全般。
3.デザイン・印刷・納品用形式
PSD
- 特徴: Adobe Photoshopの標準保存形式。
- 用途: Photoshopの編集用データ。レイヤー情報を保持します。
- 注意: そのままブラウザでは表示できません。制作後、WebPやJPEGに「書き出し」て使用します。
AI
- 特徴: Adobe Illustratorの標準保存形式。
- 用途: Illustratorの編集用データ。ロゴ作成の標準です。
- 注意: ロゴ納品の際は、クライアントへこの形式で渡すのが一般的です。
EPS
- 特徴: かつての印刷業界の標準形式。
- 用途: 以前の印刷業界の標準。現在はAIやPDFに置き換わりつつありますが、古い素材集などで見かけます。
- 現状: 現在はAI形式やPDF形式に取って代わられつつあります。
- デザイナーとしての認識: 「印刷用のベクターデータ」として覚えておけばOKです。
- 特徴: 端末環境（Windows/Mac/スマホ）に関わらず、同じ見た目を保てる形式。
- 用途: サイト内の資料ダウンロード、カタログ、マニュアルなど。
4.クイック比較表（使い分けの目安）
| 形式 | 分類 | 透過 | 拡大 | Web推奨度 | 主な用途 |
|---|---|---|---|---|---|
| WebP | ビットマップ | ○ | × | ◎ | 写真・透過画像全般（軽量化に最適） |
| JPEG | ビットマップ | × | × | ○ | 写真（WebPの代替用） |
| PNG | ビットマップ | ○ | × | △ | 透過が必要な図解（WebPが使えない時） |
| SVG | ベクター | ○ | ○ | ◎ | アイコン、ロゴ |
| AI/PSD | 編集用 | – | – | – | 制作・保管・納品用の元データ |
現場でのアドバイス
Webサイトの表示速度は、SEOやユーザー体験において非常に重要です。
- 「写真はJPEG、ロゴはSVG（またはPNG）」が基本の鉄則。
- 書き出しの際は、画質を損なわないギリギリまでファイルサイズを軽くする習慣をつけましょう。
現代のWeb制作では「まずWebP（またはSVG）で書き出し、表示速度を優先する」のがプロのスタンダードです。
書き出し時には、画像の「見た目」が変わらない範囲で、ファイルサイズを1KBでも削る努力が、ユーザーに選ばれるサイト作りに繋がります。