Mac
対象ファイルをプレビューアプリケーションで開き、プレビューが開いたらメニューバーのツールから「インスペクタを表示」を選択します。
Photoshopの書き出し時にメタデータを制御する
Photoshopの場合、Web用に書き出す際にメタデータを埋め込むかどうか指定できます。
Photoshopのメタデータオプションの選択項目
PhotoshopのWeb用書き出しのメタデータオプションはこの5つです。
- なし
- 著作権情報
- 著作権情報および問い合わせ先
- カメラ情報以外のすべて
- すべて
不要な場合は、必ず「なし」を選択しておきましょう。
画像のメタデータ削除＆軽量化ツール
メタデータの情報量はそれほどではありませんが、Webサイトに読み込む画像の量が増えればそれだけメタデータの量も増えるので、できれば消しておきたいものです。
上記で紹介したように、PhotoshopのWeb用書き出しで制御することも可能ですが、後からまとめて削除したり、画像をより軽量化できる便利なツールも紹介しておきます。
この記事では具体的な使い方については触れません。ご自身でご確認の上、ご利用ください。
Windows版
単純にメタデータを削除するのであれば、ExifEraserが便利です。軽量化も同時に行いたいのであれば、PNGGauntletを使いましょう。
なお、ExifEraserはWindows XPからWindows 7に対応していますが開発が終了しています。Windows 8は動作環境に含まれていないため。
Mac版
定番のImageOptimが便利です。
Web版
軽量化であればtinyPNGが一番。tinyPNGはアルファーチャネルをサポートしつつ、24bitカラーを8bitインデックスカラーに非可逆圧縮できるツールです。ただし、8bitカラーになるため割り切りが必要です。
また、KRAKENはAPIが用意されているので、システムやアプリケーション内で自動化したい場合に使えそうです。
ツールも上手に活用して効率的な軽量化を行いたいですね。
まとめ
いろいろな画像タイプの書き出しを試し、その画像に合った書き出しの目安を見つけられると、手間な書き出し作業も効率的にできるようになります。なぜ軽くできるのか理解した上で、便利な軽量化ツールを利用しましょう。
目安となるポイント
- 比較的小さなアイコンはGIFかPNG8
- グラデーションのかかったボタンはPNG8（色数が多い場合はPNG24）
- 写真はJPEG
- アルファーチャネルを利用するならすべてPNG32（Photoshop上はPNG24）
実際に、最適化した場合としていない場合とを比べると、50％から70％前後までファイルサイズを抑えられることもあります。画像のファイルサイズを抑えることは、Webサイトのパフォーマンスを改善するための重要なポイントです。
次回は、画像のリクエスト数の削減に関するテクニックを紹介したいと思います。
