Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

最適な画像書き出しの基本

これから身につけるWebサイト高速化テクニック(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて、Webサイト高速化に関する手法や技術について解説していきます。今回は、画像タイプの最適な書き出し方法について紹介します。

目次

はじめに

 こんにちは、クラスメソッド株式会社の野中です。

 前回の『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の表記について

 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を使って用意しました。

 それでは、書き出す画像のタイプに合わせて、最終的にどの形式に書き出すべきか検証していきましょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:これから身につけるWebサイト高速化テクニック
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5