画像サイズを最適化してWordPressブログを高速化しよう【WordPressカスタマイズ】
投稿者：しんさん
WordPressでブログを運営していると、さまざまな場面で画像が登場します。
記事のアイキャッチ画像やサムネイル、記事中に挿入する画像など、画像なしではブログは成立しないと行っても過言ではありません。
では「画像こそがWordPressブログのメインコンテンツなのか」と問われるとそうではありません。訪問者が必用としているのは「情報」であり、「情報」の多くの部分は文字による情報が支えています。
装飾や画像は記事の内容をよりわかりやすく伝えるための「補助的」な情報です。
一方で、「文字だけの文章は読みづらい」というのがユーザー目線の本音でもあり、適切に画像を使用していくことが大切であるのもまた事実です。
記事を作成する上で、「キーワードは適正に使えているか」「文章の構成は適切か」といったライティングのテクニックについては焦点となることが多いですが、画像については「なんとなく」で使用している方も多いですよね。
文字によるテキスト情報に比べて、画像ファイルはサイズが大きいという特徴がありますので、使い方を誤ると訪問者にとっての不便につながりかねません。
訪問者にとっての不便とは例えば…
- ページの読み込みに時間が掛かってしまう。
- モバイル回線であれば余計なパケット量・データ転送量を使用してしまう。
- サーバー負荷により503エラーが発生してページが表示できない。
- 転送量超過によりサービス停止してしまう。(※レンタルサーバーやプラン次第)
といったことが具体的に考えられます。
本来は補助的な役割である画像ファイルによって訪問者に不便をかけてしまっては本末転倒です。ブログ運営側としても訪問者側としても本意ではありません。
Googleをはじめとしたサーチエンジンはユーザー目線でページやサイトを評価しようとしていますので、ユーザー目線に立つことが結果的にSEOにもつながります。
画像サイズを適正化する仕組みを作ろう
一方で、日々ブログ記事を書く上では画像の取扱にばかり時間を割くのではなく、文章を書くことに時間をかけるべきです。画像に時間をかけるなら、画像選定や画像ファイルの作成そのものにかけるべきです。
ピクセルサイズのリサイズや画質の設定にかける時間は極小化する必用があります。
一番重要な「文章」「コンテンツ」の部分に集中できるように、普段あまり意識しないでも画像サイズがが適切化されていく仕組みづくりが重要です。
今回の記事では、その仕組みづくりについて方針を提示します。
画像サイズ最適化の大まかな流れ
画像サイズ最適化の大まかな流れは以下の通りです。
- メディア設定の画像サイズの決定
- フルサイズの最大値の決定とリサイズ
- カスタムサムネイルサイズの決定
- 既存画像のリサイズ
- 画質の適正化
- 適正なサイズ選択をテーマへ組み込む
テーマファイルの編集なども入るため、本番サイトへの直接の変更が心配な方は検証環境を用意して行う方法もおすすめです。
メディア設定の画像サイズの決定
WordPressのメディア設定として、「大サイズ」・「中サイズ」・「サムネイルのサイズ」の三段階のサイズ設定をメ行なえます。
メディア設定にて「大サイズ」・「中サイズ」・「サムネイルのサイズ」三段階のサイズをどのようにするかをまず最初に決定します。
ブログ開始後に途中で変更した場合、変更前の画像のサイズを自動で直すことはしてくれません。過去画像のリサイズについては別の章で後述します。
メディア設定の「大サイズ」・「中サイズ」
テーマによっても異なる部分ですが、「ブログ記事中に画像を挿入する際にどのような大きさを使用したいか」で決定するのがよいでしょう。
PCで表示した場合の記事エリアの最大幅を超えるピクセルサイズの画像を記事に貼り付けても、ブラウザー側で縮小表示されてしまうだけのため意味がありません。
データ量や表示速度の観点でみた時、必要以上にピクセルサイズが大きいことによる分のデータサイズは無駄なデータ量なわけです。
こういった表示上のサイズと実際の画像サイズのズレを極力なくしていくことが、画像の縦横ピクセルサイズ適正化の狙いです。
サイトの性質や目的によっても左右されますが、一般的なブログであれば「大サイズ」については横幅が600か640px、「中サイズ」は300か320pxあたりの大きさで必要十分だと考えます。
「画像を使用する目的」を果たせる許容サイズの中で、小さければ小さいほどファイルサイズの観点では有利です。
メディア設定の「サムネイルのサイズ」
こちらもテーマによって異なりますが、関連記事一覧や新着記事一覧などでここで指定したサイズの画像を使用しているケースが良くあります。
私が使用しているテーマの場合は、デフォルトで100x100pxで画像を表示するようになっていました。
一方で「サムネイルのサイズ」は150x150pxが初期設定となっていました。
メディア設定の「サムネイルのサイズ」は表示にあわせて100x100pxに変更しています。
フルサイズの最大値の決定
メディア設定の「大サイズ」・「中サイズ」・「サムネイルのサイズ」とは別で、WordPressはもともとのオリジナルサイズの画像をメディアライブラリの中に保存します。
画像ファイルのファイル名は機械的な規則にしたがって命名されますので、オリジナルサイズのファイル名をURLで直接指定して高画質な画像ファイルを取得しようとするユーザーもいるかもしれません。
「高画質な画像ファイルを取得されたくない」というケースも多いでしょう。
また、使用する・しないに関係なく保存されるので、じわじわとサーバーのディスク容量を消費していきます。
例えばデジタルカメラで取った写真などを多く使用している場合、フルサイズ画像のファイルサイズはとても大きいです。
かと言って、PC上でリサイズしてからアップロードするのは手間です。
通常のブログではあまり高画質の画像を使用したいケースは多くないと思いますので、思いきってフルサイズの画像の最大値を制限してしまうことをおすすめします。
フルサイズ画像の制限と過去画像のリサイズ
画像のフルサイズを制限する際に非常に便利なのが、「Imsanity」というプラグインです。
「Imsanity」をインストールすると、「設定」の配下に「Imsanity」というリンクが追加されるので、これをクリックします。
「Imsanity Settings」と書かれたページが開きますので、この中で各種設定をしていきます。
「Images uploaded within a Page/Post」では投稿や固定ページからアップロードした場合の最大サイズの指定です。
「Images uploaded directly to the Media Library」はメディアの画面で直接アップロードした場合の最大サイズの指定です。
「Images uploaded elsewhere」はその他の場所からアップロードした場合の最大サイズの指定です。
私は各種の最大横幅サイズを640pxに絞っています。
一度設定すれば、以後画像をアップロードした際、自動でリサイズしてくれます。
過去に投稿した画像についても一括リサイズすることが可能です。
ブログ記事中に画像を貼る際に「フル」をサイズとして使用することが多い方は一括リサイズをかけておくことで、記事ロード時のデータ容量削減を期待できます。
単一投稿記事の頭の部分などに、自動でフルサイズのアイキャッチ画像を表示するようにしている方も多いと思いますので、そういった場合も一括リサイズの効果が高いです。
さきほどの「Imsanity Settings」の画面の下の方に「Bulk Resize Images」と書かれた項目があります。下の方に「Search Images」とか書かれたボタンがありますのでこちらをクリックします。
すると、画像が検索されて対象の画像がリストアップされます。下の方に「Resize Selected Images」と書かれたボタンが出てきますので、画像が選択の上でこちらのボタンをクリックします。
注意点
一度一括リサイズしてしまうと「後から元のサイズに戻す」ということができなくなりますので、必ずバックアップを取得してください。
画像ファイルは「wp-content/uploads」配下に保存されます。
また、画像の枚数やサーバーの処理能力によっては一括リサイズに時間がかかります。気長に待ってください。サーバーへの負荷を考えて、サイトへのアクセスが少ない時間帯に実施しましょう。
カスタムサムネイルサイズの決定
メディア設定の「大サイズ」・「中サイズ」・「サムネイルのサイズ」とは異なるサイズをテーマの中で使用したい場合も多いですよね。
そういった場合、テーマファイルのfunctions.phpにコードを追記することで、カスタムサムネイルサイズを設定できます。
※functions.phpは編集に失敗した場合、ホワイトアウトして管理画面にさえログインできなくなる場合があります。ちょっとしたミスでもホワイトアウトが起きやすいので、FTPソフトなどを利用して必ずバックアップを取ってから編集してください。
※バックアップをサーバー上で名前を変えて複製して取る時は、拡張子がphpにならないように拡張子の後に文字列や数字などを追加する形をおすすめします。これはセキュリティの観点からです。
まず、add_theme_support関数を使用してカスタムサムネイルを有効化します。
add_theme_support( 'post-thumbnails' );次に、add_image_size関数を使用して、お好みのサムネイルサイズを指定します。
以下の例ではPC向けの600x282pxのサムネイルを'mod-pc'という名前で、スマートフォン用の330x155pxのサムネイルを'mod-moblie'という名前で使用できるように設定しています
add_image_size( 'mod-pc', 600, 282, true );
add_image_size( 'mod-moblie', 330, 155, true );
ここまでの話をまとめると、functions.phpには以下のような形でコードを追記してください。
// custom thumbnail
add_theme_support( 'post-thumbnails' );
add_image_size( 'mod-pc', 600, 282, true );
add_image_size( 'mod-moblie', 330, 155, true );
ここに設定を追加したサイズの画像が、以後画像をアップロードした際に自動で作成されます。
ここで作成したカスタムサムネイルをどのように活用するかは後の章でご紹介します。
既存画像のリサイズ
ここまででメディア設定とfunctions.phpでサムネイルサイズの変更を行って来ました。
しかし、前述の通り過去アップロードした画像についてはWordPressは自動で対処してくれません。
変更したサムネイルサイズに合わせて過去アップロードした画像をリサイズしてくれるプラグインが「Regenerate Thumbnails」です。
ブラグインを追加すると、「ツール」の配下に「Regenerate Thumbnails」というリンクが追加されますのでこちらをクリックしてください。
開いた画面内に「すべてのサムネイルを再作成する」というボタンがありますので、こちらを使用して過去にアップロードした画像に対してサムネイルの再作成ができます。
「Imsanity」と同様ですが、画像の枚数やサーバーの処理能力によっては再作成に時間がかかりますので、気長に待ってください。サーバーへの負荷を考えるなら、サイトへのアクセスが少ない時間帯に実施することがベストです。
画質の適正化
画像の適切化のためによく使われるプラグインとして「EWWW Image Optimizer」が有名です。
「EWWW Image Optimizer」が担っている役割は「画質の適正化」ですのでこの項目にまさにピッタリのプラグインです。
「EWWW Image Optimizer」を使用して、今後アップロードする画像に対する画質の自動調整が可能です。また、過去にアップロードした画像に対しても、一括処理が可能です。
「Imsanity」と「Regenerate Thumbnails」の使用によって画像のファイルサイズはかなりの部分で適正化されていますので、正直なところ、「EWWW Image Optimizer」によるファイルサイズ縮小効果は小さいです。私の環境ではほんの少しだけ画像のファイルサイズを落とすことができましたので、「念には念を入れる」という意味で併用しています。
「Imsanity」の方の「JPG image quality」を適切に調整することで、「EWWW Image Optimizer」は不要になるかもしれません。
詳しいアルゴリズムやロジックは追いかけられていないですが、「EWWW Image Optimizer」は一般に画質の低下が少ないと言われているため、チューニングにかける時間を減らすためにも私は使用しています。
カスタムサムネイルをテーマへ組み込んで適正なサイズ選択を。
ここまでの内容で、フルサイズの画像と「大サイズ」・「中サイズ」・「サムネイルのサイズ」の画像についてはサイズが適正化されました。
最後の仕上げとして、作成したカスタムサムネイルをテーマに組み込んでいきましょう。
ここからはお使いのテーマによって実装箇所が異なりますので、方法論のみご紹介します。
例：記事中に自動でアイキャッチ画像を挿入している箇所の適正化
アイキャッチ画像を記事本文頭などに、自動で挿入している方は多くいらっしゃいます。
テーマに元々組み込まれているという場合も多くあります。
例えば、テーマ中の個別投稿用のphpファイルの中にで以下のコードでアイキャッチ画像を自動挿入していたとします。（一般にファイル名としてsingle.phpが使用されています。）
the_post_thumbnail(‘full’)この場合、フルサイズの画像が選択されます。
フルサイズの画像が例えば横幅1600pxだったとして、一方でテーマ上の最大横幅が1024pxだったと仮定します。
このケースではブラウザーの表示上、1600pxの画像を使用している恩恵を受けることはありません。こういった「不必要にピクセルサイズの大きな画像ファイル」はページあたりの総容量を不必要に増加させる大きな原因です。
スマートフォンで閲覧する場合では不必要なロスがより一層大きくなります。
こういったロスを減らすためにカスタムサムネイルを使用します。
「カスタムサムネイルサイズの決定」の中で例として紹介した以下のカスタムサムネイルを使用すると仮定します。
// custom thumbnail
add_theme_support( 'post-thumbnails' );
add_image_size( 'mod-pc', 600, 282, true );
add_image_size( 'mod-moblie', 330, 155, true );
WordPressにはモバイル端末からのアクセスかどうかを判定する関数が標準で用意されていますので、こちらを使用してデバイス別に表示する画像のサイズを選択することが可能です。
例えば以下の通り。
if( wp_is_mobile()) {
the_post_thumbnail( 'mod-moblie');
} else {
the_post_thumbnail( 'mod-pc' );
}
これにより、スマートフォン含めたモバイル端末からのアクセスの場合は330x155pxの画像が表示され、PCからアクセスした場合は600x282pxの画像が表示されます。
仕組みは複雑化しますが、応用することで「タブレットでの表示の場合はこのサイズ」「iPhone7からのアクセスの場合はこのサイズ」といった形で細かくチューニングすることも可能です。ゼロからコードを書くのは大変ですので、こういった場合は「Mobile-Detect」などを使用すると良いでしょう。
あまり細かすぎるチューニングを目指してしまうと、「新しいスマートフォンが発売されたので、過去分含めてカスタマイズとチューニングをしなくては」などと際限なく理想を求めてしまいますので、「スマートフォンかPCかタブレットか」程度で収めておくのが妥当なラインです。
ちなみに当サイトでは「スマートフォンかPCか」の2択で管理しています。ディスプレイサイズ（特に横幅）に対してギリギリまで活用した大きな画像を使用するメリットを感じていないためです。
注意点：ページキャッシュプラグインを使用する場合は取扱に注意
「W3 Toal Cache」などのキャッシュプラグインの中にはページキャッシュを静的なHTMLファイルとして保持するものがあります。
「W3 Toal Cache」のページキャッシュの機能では「Disk: Enhanced」を選択した場合に、ページ全体がHTMLファイルに保存されます。（設定によってはgzip圧縮されたHTMLファイルも追加で保存されます。）
サーバーの負荷低減や高速化の観点では望ましい状態です。CloudFlareなどのCDNを使用する場合はCDN上のキャッシュヒット率が非常に高くなることが期待できるため、より一層の高速化を期待できます。
デバイス別に表示する画像を変える場合は、キャッシュもデバイス別に振り分けなる必用があります。
そうしないと、初回アクセスがPCなのかスマートフォンなのかで、作成されるキャッシュ上で指定される画像ファイルがバラバラになってしまうためです。
「W3 Toal Cache」ではブラウザーの種類を特定するUA（ユーザーエージェント）という情報を使用して、キャッシュを分ける機能が搭載されていますので、こちらを使用してください。
注意点：テーマのアップデートに注意
テーマを自分で編集した場合、テーマをWordPressからアップデートすると自分でカスタマイズした箇所が上書きされて失われてしまいます。
必ずバックアップを取るなどして、上書きのリスクには備えてください。子テーマを使用する方法が本来的にはベストチョイスですが、自力で１から子テーマを作るのはWordPressやテーマカスタマイズに関する深い知識が必用となるのが実情です。
テーマの更新自体を非表示にしたい場合はfunctions.phpに以下のコードを追加してください。
//テーマ更新通知を非表示
remove_action( 'load-update-core.php', 'wp_update_themes' );
add_filter( 'pre_site_transient_update_themes', create_function( '$a', "return null;" ) );
テーマをアップデートしない欠点としては、テーマ自体にぜい弱性が見つかった場合にアップデートがされないということです。
使用しないテーマは削除する（もちろんプラグインについても同様）ことはもちろんですが、リスクに対する評価をおこなって決定してください。
時間と手間を掛けられるのであれば、以下のいずれかの方法をとることが望ましいです。
- 子テーマ化する。
- アップデート箇所をきちんと管理把握した上で、検証環境でテーマをアップデート→再カスタマイズ→検証→本番サイトへの適用。
サイトの規模や、重要性・収益性などと照らし合わせて決定してください。
WAF（ウェブ・アプリケーション・ファイアウォール）を使用して脆弱性に備えることも併せて行うと良いでしょう。
例えばロリポップではスタンダードプランなどの少額のプランでもWAFが使用できるので、おすすめです。
まとめ
少し長くなってしまったので、内容を簡単に箇条書きでまとめます。
- メディア設定で「大サイズ」・「中サイズ」・「サムネイルのサイズ」の3サイズを適切に設定しましょう。
- 「Imsanity」を使用してフルサイズについても制限を掛けましょう。
- 「Imsanity」を使用して過去にアップロードした画像もリサイズしましょう。
- カスタムサムネイルを活用して、使用する場面にあったサイズ選択をしましょう
- 「Regenerate Thumbnails」を使って過去にアップロードした画像のサムネイルを再作成しましょう。
- 「EWWW Image Optimizer」を使用して画質を最適化しましょう。
- テーマを編集する場合は、バックアップとテーマのアップデートに注意しましょう。
今回の記事の内容を応用して、画像サイズの最適化に役立てていただけたらうれしいです。
