あなたは、ブログやウェブサイトの画像表示に時間が掛かりすぎて、ページの読み込み速度が遅いことで悩んでいないだろうか？ 画像の表示は、以下の「１０項目」でバシッと軽くすることができる。表示を遅くしている画像は修正して、サイトの高速化を実現しよう。
なお、サイトの表示速度を計測するためには、GTmetrix を使用すると良いだろう。現在この「起業しないで社長気分な WordPress ブログ」では、Page load time が 1.11 秒、Total page size が 395 KB、Total number of requests が 18 という結果が出ている。画像だけでなく様々なチューニングも行っているので、もし記事に反響があれば「続編」も書こうかな。
1. むやみに画像を使用しない
これはいきなり、意外かもしれない。ところが、サイトの表示速度を高速化するためには、最良の方法と言える。特に、ヘッダーや背景などに「コテコテの写真」を挿入することは、出来れば避けよう。ましてデジカメ写真をそのままアップロードなど、以ての外である。
また、サイトのメニューも画像よりテキストを使おう。これは、表示速度の面だけでなく、モバイルユーザーへの使い勝手のことや、検索エンジン最適化（SEO） のことを考えても、画像デザインよりテキストデザインの方が優れているからだ。
さらに、何かの流れを説明するような画像は、テキスト化すると高速化できる。次のような画像を見掛けたことはないだろうか？ これは CSS で工夫された「純粋なテキスト」なので表示に時間が掛かることはないが、ビジュアル面では画像のような役割を果たしている。
- サイトの画像データを軽くする
- サイトの表示速度が高速化する
- サイト訪問者の早期離脱を防止
どうだろう？ 画像は多ければ多いほど、http リクエストの数が多くなる。画像を軽くすること以前に、まずは「画像を減らす」ということにもトライしよう。見た目に工夫は必要となるが、基本は、ブログパーツやイメージバナーはペタペタ貼りまくったりしないこと。
2. アイコンを Font Awesome で代用する
次に、メニューやナビゲーションで「一般的なアイコンを多用」しているサイトでは、Font Awesome アイコンによる画像の置き換えが検討できる。このブログでも、サイドバーなどで使用しているが、他サイトでも、このスタイルのアイコンは良く見掛けるはずだ。
それもそのはず。Font Awesome は、ウェブ上で最も人気のアイコンフォント。CDN 経由で読み込むこともでき、サーバーへの負荷はかからない。なぜか FontAwesome は遅いという人もいるが、このサイトが Font Awesome のせいで遅いと感じたことはない。
Font Awesome では、バージョン 4.3.0 現在で、519 の素晴らしいアイコンを提供している。余程のこだわりがない限りは、お目当てのアイコンが見つかるはずだ。
使い方も簡単だ。例えば、RSS アイコンを表示したい場合、<i class=”fa fa-rss”></i> と記述する。またアイコンの大きさや色を変えることも、CSS で簡単にできる。Font Awesome の使用例はこちらのページ で分かりやすく解説されているので、参考にしよう。
WordPress なら、設定不要で「常に」最新バージョンの Font Awesome を表示してくれる、Better Font Awesome という超便利なプラグインがある。手間を掛けずに導入でき、メンテナンスも不要。おすすめのプラグインだ。
3. データとして軽い画像の特性を知る
次のような２つの画像があるとして、見比べてみて欲しい。どちらも「幅」および「高さ」は同じだが、データとしての「軽さ」では、圧倒的に上の画像に軍配が上がる。
画像データの重さは、およそ「色の数 × ドットの数 × 色の配置の複雑さ」で決定するというイメージで理解すれば良い。つまり分かりやすく言ってしまうと、シンプルな画像にすればするほど「データ」として必要な情報量は少なくなり、画像を軽くすることができるのだ。
このことを理解しているだけで、サイトデザインに対する考え方や、使用する画像データの判定基準などが大きく変わるだろう。また、最近はフラットでシンプルなサイトデザインが多いのも、これが原因だったりする。
4. 重いデザインの画像を変更する
画像を軽くするためには、「フラットでシンプルなデザインが良い」と分かった。ならば、サイトロゴ、ヘッダーに表示する画像、記事のアイキャッチなどに「重いデザインの画像」がないか確認しよう。商品画像も、単色の背景で撮り直して白抜きにすると軽くできる。
また、フラットなデザインの画像は、JPG 形式よりも、画像の質が下がらない PNG の形式が向いている。後ほど説明するが、フラットなデザインの PNG では、データ容量を「大幅に」圧縮することができる。そして、色の数は少なければ少ない方が良い。
なお、画像の作成は Photoshop を使用するのが理想的だが、もしこのような画像編集ソフトを持っていない場合、オンラインで画像を編集できる Pixler Editor はおすすめだ。軽くてシンプルな画像を作成する程度なら、十分に役割を果たしてくれる。
5. 画像のサイズ（横幅）を最適化する
こんなことは言うまでも無い話かも知れないが、ウェブサイトで表示する画像は、表示する大きさに合わせて、最適なサイズ（横幅）にしておくのが常識だ。画像縮小用ソフトを使うか、さきほど紹介をした Pixlr Editor などを使用しても良い。リサイズは徹底しよう。
また、サイトの画像サイズを “最適化” する作業は、画像を “縮小” することだけではない。<img> タグには、必ず width=“300” height=“200” というように、実際の画像サイズに合わせた、横幅と高さの「両方」を指定しておこう。ブラウザのレンダリングが速くなる。
冒頭で、デジカメの写真をそのまま使うなど「以ての外」だという話をした。最悪のケースは、こういった写真を「表示幅に合わせたリサイズ」すらもしていない場合である。
なお、僕のように WordPress を使用している読者は、管理画面から「設定 >> メディア」へと進み、サムネイル画像のサイズ（横幅）がどのようになっているか確認しよう。僕の場合は、デスクトップで表示される画像の最大幅 668 px を「大サイズ」で指定している。
ここで変更されたサムネイル画像の幅は、次にアップロードされる画像からの適用となる。メディアライブラリにアップロード済みの画像も含め、すべての画像をリサイズしたい場合は、Regenerate Thumbnails のプラグインを利用しよう。
6. 幾つかの画像は CSS スプライトで結合する
ご存知の方も多いとは思うが、CSS スプライトとは、サイト全体で繰り返し使われるような「アイコン」や「サムネイル画像」をあらかじめ１つの画像（スプライト画像）にまとめ、CSS で処理することで、スプライト画像の「一部分だけ」を表示させる方法のことである。
CSS スプライトの最大のメリットは、http リクエスト 1 回だけで、たくさんの画像データを取得できる点である。また、スプライト画像が「一旦」ブラウザ側にキャッシュされれば、ここに含まれる画像は「サイト内の別ページ」であっても使い回してくれる。
つまり、CSS スプライトを使うポイントは、とにかく「サイト全体で繰り返し使われているデータの軽い画像」である。ロゴ画像やアイコンなどはもちろん、例えば、おすすめ記事のサムネイル画像なども、固定表示している場合であれば CSS スプライトが検討できる。
CSS スプライトについて、技術的なテクニックを詳しく知りたいという人には、Webサイト高速化テクニック CSS Sprite 編 という記事をおすすめする。逆に、手っ取り早くツールで CSS スプライトを実現したいという人は、CSS Sprite Generator を使おう。
7. 画像のデータ容量は最大限圧縮する
高画質な写真であれ、フラットでシンプルなデザインの画像であれ、データ容量を「圧縮」することで、その画像は “さらに軽く” することができる。圧縮の方法は、画像の保存形式によって異なるため、基本的にはそれぞれ別のアプリケーションを使うことになる。
- JPG 形式
- オンラインで圧縮するなら、ドラッグ＆ドロップでひょいっと圧縮できる Compress JPEG が使いやすい。また Windows 環境なら、画像の一括サイズ変換も同時にできるフリーソフトの Caesium Image Compressor がおすすめだ。Linux / Mac ユーザーにも、コマンドラインツールが提供されいている。
- PNG 形式
- pngquant を使用している圧縮ツールが最高。オンラインで簡単に圧縮ができる TinyPNG も Good だが、個人的には、Windoes 環境でサクッと圧縮ができる PNGoo を愛用している。Photoshop 向けプラグイン Super PNG は、仮保存用として。
ここでも、WordPress ユーザーには便利なプラグインが登場する。僕がおすすめするのは、 EWWW Image Optimizer である。JPG 形式と PNG 形式の圧縮をサポートし、API 経由で動作する WP Smush.it と比較すると、セキュリティ、処理スピードの面で優れている。
１点だけ注意が必要なのは、PNG 形式ファイルのサムネイル画像だ。WordPress では画像のリサイズにより「サムネイル画像」が自動生成されるのだが、リサイズされた PNG ファイルは画質が悪くなり、逆に、データ容量が大きくなることがあるからだ。
自分でデザインをした PNG 画像なら、Photoshop などを利用して「手動で」サムネイル画像を作成し、WordPress が生成したサムネイル画像と置き換えてやるのが一番だ。PNG 画像については、自動リサイズされた画像をしっかりとチェックしよう。
8. JPG 画像は Exif 情報を削除する
JPG 形式で写真画像を利用する場合、ほんの僅かではあるが、Exif 情報を削除することで、さらに軽くすることができる。この Exif 情報は、写真の撮影日時、カメラの機種モデル名、など が保存されており、カメラによっては GPS 情報や撮影方向なども含まれる。
合わせて読みたい：ネット上のプロフィールで顔の分かる写真が必要なワケ
自宅で撮影した写真をアップロードする場合など、住所を特定できる情報にもなり兼ねないので、画像を軽くする目的以前に、セキュリティ対策として Exif 削除をおすすめする。
なお Exif 情報を削除するには、Windows 用のフリーソフト F6 Exif の使い勝手がシンプルで良い。ただ、WordPress でサイトを運営していれば、先ほどの EWWW Image Optimizer が Exif 情報も削除してくれる。この設定はオプションなので、忘れずチェックしておこう。また Compress JPEG で圧縮された画像も、既にExif 情報は削除されているので心配ない。
ということで、飛ばしても良いレベルの項目だったが、念のためということで。
9. 画面下の画像は後から読み込む
サイトを訪問した人は、とにかく早く記事を読みたいもの。これを例えると、お腹が空いているサラリーマンがお客様として、料理がすべて揃うまではビールもお通しもなしという、あり得ない状況がそれ。つまり、出せるものは先に出し、それ以外は後からで良いのだ。
サイト表示速度を高速化するための「画像の遅延読み込み」は、先にお通しを出すやり方に似ている。少し技術的な話へと戻すと、僕は、日本人に日常から英語を使う機会を増やして欲しい と考えているため、Lazy Load Plugin for jQuery と Unveil.js は読んで欲しい。
もちろん WordPress を利用する読者の場合は、プラグインを使うことですべて解決できる。僕はフェードインが美しく Lazy Load 系プラグインより軽い Image Lazy Load (Unveil.js) を愛用しているが、それぞれ好みもあると思うので、次の英語記事も紹介しておこう。
10. 小さい画像をインライン化する
ここまでの項目でも、画像を減らしたり、アイコンを FontAwesome に置き換えたり、CSS スプライトで画像を結合したりと、サイトが読み込む必要のある画像の数を随分と減らしてきた。そして、最後にもう１つ出来ることが、この「小さい画像のインライン化」である。
このサイトでは、デスクトップ表示で使用している「背景画像」をインライン化している。この画像は 99 bytes という非常に小さい画像であり、そのためだけに１つの http リクエストが発生するというのは、あまりにも効率が良くないからだ。
画像をインライン化するには、Base64 Image Encoder というサイトを使うと便利だろう。サイト高速化に対して、効果抜群！ というほどではないが、サイトの表示速度をとことん上げたいという人は、ぜひ試してみよう。
あとがき
いかがだっただろう？ 画像編「サイト表示を高速化するために確認したい１０項目」は、これから SEO を意識するサイト運営者には、ぜひ熟読して欲しい記事である。あまり画像を減らしすぎて、つまらないデザインのサイトにして欲しくはないが、これらの１０項目は、高速化をするための「エッセンス」としてぜひ覚えておこう。
…以上、今回の僕の社長気分はここで終わりです。この記事が参考になったという方は、ぜひ、お友達にもシェアをしてあげてください。コメントも添えていただけると、僕は大変喜びます。それでは、また次回まで。バイバーイ！