SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

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

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
検証1:ベタ塗りアイコンの書き出し

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
これから身につけるWebサイト高速化テクニック連載記事一覧

もっと読む

この記事の著者

野中 龍一(クラスメソッド株式会社)(ノナカ リュウイチ(クラスメソッドカブシキガイシャ))

クラスメソッドで企画、制作、運用までやるWebマスター。Webデザイン、Webサイト高速化、広義のHTML5、JavaScript、jQuery、CSS3、PHP、AWSを広く浅くやってます。クラスメソッド開発ブログを作ってる中の人。http://dev.classmethod.jp/author/nonaka-ryuichi/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7220 2013/07/11 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング