はじめに
こんにちは、クラスメソッド株式会社の野中です。
前回の『Webサイト高速化に必要な画像形式の基礎知識』から3回に渡って、画像の最適化に必要な知識とテクニックについて紹介しています。今回は前回の基礎知識を使い、一般的に利用頻度の高い画像タイプの最適な書き出し方法について紹介します。
対象者
この記事では、前回と同じくWebデザイナーを対象としています。
フロントエンドエンジニアの方は、Webデザイナーから受け取ったPSD（Adobe Photoshop Data）ファイルや、AI（Adobe Illustrator Data）ファイルから画像を書き出すこともあると思うので、その際の参考にしてください。
- Webデザイナー
- フロントエンドエンジニア
- Webディレクター
- Web担当者
前回と同様にビギナーも含めた広い層に向けて解説しているので、当たり前と思われる説明も多く含まれます。また、各画像形式の仕様については、詳細な解説はいたしません。あらかじめご了承ください。
なお、本記事に間違いや解説に分かりづらい部分があれば、@nonaka_ryuichiまでご連絡いただけるとうれしいです。
サンプル画像の最適な画像形式を検証する
それでは、サンプル画像を使い最適な画像形式を検証してみましょう。
今回はPhotoshopからの書き出しを例に、画像のタイプに合わせてどのような形式に書き出すべきか、Photoshopのオプションを確認しながらそれぞれの画像形式を比較します。
1. デザインツールについて
環境は、Mac OS X MountainLion上でAdobe Photoshop CC（Creative Cloud）を使い解説します。
最適な画像書き出しは、画像のデザインやその他の外部要因によって異なってきます。あくまでも参考例とし、実際に行う際は必ず自身の環境に合った基準を決め最適化しましょう。
なお、今回はPhotoshopを使い検証しますが、IllustratorやFireworksでも基本的な考え方は同じです。
2. アルゴリズムや仕様について
画像の書き出しは圧縮アルゴリズムや画像形式の仕様を理解した上で、適切に使い分けができると良いでしょう。
アルゴリズムや各形式の仕様については、筆者が精通していないこともあり割愛いたします。実務においては、画像形式ごとの具体的な長短について把握しておけば十分です。
PNGの表記は、ハイフンなしのもの（PNG8）と、ありのもの（PNG-8）をよく見かけますが、この記事ではハイフンなしで統一させていただきます。
3. 利用するサンプル
今回はこの3つの画像タイプについて検証します。
画像タイプに合わせ、それぞれ3つの画像形式について検証します。
| タイプ | 検証対象の形式 | 横幅 | 縦幅 |
|---|---|---|---|
| ベタ塗りアイコン | GIF/PNG8/PNG32 | 50px | 50px |
| グラデーションボタン | GIF/PNG8/PNG32 | 300px | 100px |
| 写真 | GIF/JPEG/PNG32 | 960px | 960px |
なお、PNG32はPhotoshop上では使われていません。「PNG-24」を選択し「透明部分」のチェックをオンにすることでPNG32相当、オフにすることでPNG24相当となります。具体的な定義は前回の『Webサイト高速化に必要な画像形式の基礎知識』のPNGの項をご確認ください。
これらのサンプルをPhotoshopを使って用意しました。
それでは、書き出す画像のタイプに合わせて、最終的にどの形式に書き出すべきか検証していきましょう。
