Wordpress

WordPressで画像最適化するべき理由とEWWW Image Optimizerの必要な設定

2019年2月23日

訪問者の目を引くアイキャッチ画像やスマホで撮影した写真、ページのところどころに箸休めとして挿絵的な画像を挟んだりと、画像データはブログ(ウェブサイト)に欠かせない要素ですが、注意点もあります。

このページでは、画像データの扱いに関する一般的な注意点と、WordPressで画像最適化を自動化するプラグイン「EWWW Image Optimizer」の使い方とおすすめの設定を紹介します。

画像データは諸刃の剣

表示速度に影響

重たい画像をたくさん使うとページの表示速度は低下します。最悪の場合、訪問者はページが表示される前に帰ってしまいます。グーグルをはじめとする検索エンジンも訪問者にとっての使い勝手を重視していて、表示が遅いページは低い評価を受け、検索順位に悪影響を与える恐れもあるそうです。

せっかく作ったページや公開した写真が、画像が重たいというだけでそっぽを向かれてしまい、検索エンジンにも低い評価をされ検索ページの彼方に追いやられてしまったら本末転倒ですよね。

基本的にデジカメ(スマホ含む)で撮影した写真は、ウェブサイトで閲覧するには不必要なくらいに品質が高すぎます。品質に比例してデータ量も大きくなり、これが表示速度に大きく影響します。

そのため、画像をウェブサイトで使う場合は、あえて品質を落とすことで使い勝手とのバランスを取る必要があるのです。

プライバシー漏洩の恐れも

また、GPSを内蔵したスマホやタブレットで写真を撮影すると、撮影した場所の位置情報が画像に埋め込まれるので、個人情報の漏洩にも注意する必要があります。

位置情報が残されたままの画像をブログで公開すると、ユーザーはその画像をダウンロードして、非常に簡単に撮影地の位置情報をみることができるのです。観光地で撮影した写真とかならば大した問題ではないですが、自宅や職場で撮影した写真であれば、そこから個人情報が漏れてしまう可能性があります。

スマホの設定を変更してGPS位置情報の埋め込みを無効にしてもいいのですが、この機能自体は撮影地ごとに写真を整理したりとやはり便利なものなので、ブログのためだけに機能自体を無効化するのはちょっともったいないですよね。

画像最適化プラグイン「EWWW Image Optimizer」

サイトの表示速度を低下させる上にプライバシー漏洩の恐れまである画像データ。こう聞くと不安になってしまいますが、これは世界中のサイト運営者に共通した問題です。

この問題を解決するためのツールは無数にありますが、今回はWordPressのプラグイン「EWWW Image Optimizer」を紹介します。

EWWW Image Optimizerの主要機能

  • アップロードした画像から位置情報を削除
  • 幅と高さが大きすぎる画像を自動的にサイズ変更
  • 画像の形式を自動的に変換することで画像データを圧縮

無料で使える

上に挙げたEWWW Image Optimizerの主要機能はすべて完全無料で使えます。さらに高度な最適化を行うための有料の機能もありますが、僕自身は無料の機能で事足りているため、有料機能は使っていません。

EWWW Image Optimizerのインストール

ここからは、EWWW Image Optimizerのインストール方法を説明します。

といってもいたって簡単で、WordPressの管理メニューから、[プラグイン] → [新規追加]と選択してから、EWWW Image Optimizerを検索するだけです。

結果が表示されたら「EWWW Image Optimizer」をインストールし、有効化しましょう。

EWWW Image Optimizerのおすすめ設定

インストールが終わったら、プラグインを設定します。

ここでは僕のサイトで使っている設定を紹介します。

必須設定: メタデータの削除

まず必ず設定するべきなのが、以下の設定です。

[Basic]タブの下にある「Remove Metadata」の項目にチェックを入れておきましょう。

説明文の中にEXIFとありますが、このEXIFデータの中に位置情報が含まれているので、これを必ずチェックしておきましょう。メタデータとは付加的な情報にすぎないので、これらを削除しても写真本体のデータは一切変わりません。

※ その他の設定はデフォルトのままです。

推奨設定: 画像の最大サイズを設定

[リサイズ]というタブの中で、画像の横幅と高さの上限を設定することができます。

 横幅が2500ピクセル、高さが1600ピクセルとかある高画質の写真をアップロードしても、その画像をそのままの大きさで表示できるデバイスはかなり限られています。スマートフォンなどは数百ピクセルの幅と高さしかないので、極端に大きな画像を表示しても縮小表示されますし、表示速度も遅くなります。

幅と高さの上限を設定することで、上の例で挙げたような極端に大きい画像をアップロードすると、自動的に縮小されます。

デジカメで撮影したキレイな写真を公開するサイトにおいては、1000ピクセルというのは縮小しすぎと思われるかもしれません。この辺りはサイトのコンセプトに合わせて変更してください。

推奨設定: PNGをJPGに変換

次に[Convert]というタブを開き、PNG to JPG Conversionという項目にチェックを入れます。それ以外はデフォルトのままにしてあります。

説明文では

「JPGは画像を圧縮してデータを破棄するため、一般にPNGよりもはるかに優れています」

とあるように、サイズが大きめのPNG画像はJPGに変換するとかなりデータが小さくなります。画像によってはサイズが数分の1くらいまで削減することもあります。JPGに変換しても表示される画像にほとんど違いはないため、この設定をチェックすることをおすすめします。

PNGの長所として背景が透明な画像がありますが、[JPG Background Color]の部分を空欄にしておけば、背景が透明のPNG画像は変換されません。

サイトによってはPNG画像をほとんど扱わないかもしれませんが、僕のサイトではスクリーンショットを掲載することも多く、スクリーンショットの画像はデフォルトではPNG形式で保存されるため(Macの場合)、このオプションは必須となっています。

推奨設定: JPGの品質レベルを落とす

続いて[Advanced]タブを開き、JPG Quality Level(JPGの品質レベル)を設定します。この数値は0から100の間の数値で設定します。

  • 小さくすればするほど画質は悪くなるが、データ量も小さくなる
  • 大きくすればするほど画質は維持されるが、データ量はそこまで小さくならない

デフォルトでは82に設定されていて、公式のガイドには「70から90の間に設定することを推奨」と書いてあります。僕のサイトでは画質よりも表示速度を優先したいので、70に設定しました。

サイトごとに正解がある

以上、EWWW Image Optimizerの基本的な使い方と設定方法を紹介しました。

推奨設定については、僕のブログで実際に使っている設定で、僕の感覚では見た目上にも受け入れられる(ほとんど劣化がない)画質で、データ量とのバランスが取れていると思う設定です。

ここに関してはサイトの数だけ正解があるでしょう。

僕の運営しているサイトの場合、写真を売りにしているサイトではないため画質にこだわる必要は全くありません。また、アクセスを分析すると、スマートフォンからのアクセスが90%以上を占めているサイトもあります。そのようなサイトにおいては、むしろ画質をかなり落としてでもデータ量を減らす方がメリットが大きいと考えています。

しかし逆に、アーティストの作品を紹介するギャラリー的なブログであれば、やはり画質にはある程度こだわるべきだと思います。この辺りのバランスは、ご自身のサイトのコンセプトと、訪問者の特徴に応じて考慮してみてください。

客観的な評価を見るための一つの方法として、GoogleのPageSpeed Insightsというツールがあります。このツールに自分のブログのURLを入力すると、ページの表示速度を測って総合的なスコアとともに詳細な問題点と改善案を提示してくれます。

PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ja

-Wordpress

Copyright© 技術系のメモ , 2019 All Rights Reserved.