テーマカスタマイズ

Webサイト高速化のためにアイキャッチのサイズを最適化する

2017.09.11

2017.09.27

並ぶ写真

WordPressで構築されたWebサイトの高速化を図るなら、アイキャッチ画像のサイズを最適化することは外せない施策の一つです。アイキャッチ画像を用いない選択もありますが、SNSでのクリック率やサイトの見栄えのことを考えるとアイキャッチ画像は設定しておくべしっ!てのが定説です。

アイキャッチ画像は色んなサイズで利用されている

アイキャッチ画像はWebサイト内の色んな場所で利用されることが想定されます。例えば…

  • 記事詳細ページのメイン画像
  • 一覧ページ
  • サイドバー
  • 記事のフッター

など、色んな場所に設置されますので、全部同じサイズの画像を表示してしまうのはNGです。 詳細ページのメイン画像の大きなスペースとサイドバーの小さなスペースを同じ画像で表示すればロスでしかありません。場所毎にサイズを最適化することがWebサイトの高速化につながります。

WordPressで画像サイズを設定する2つの方法

WordPressで画像サイズを設定する方法は2つあります。管理画面の設定>メディアから行う方法と、functions.phpから行う方法です。管理画面からの設定で足りない場合はfunctions.phpで行います。私の場合は両方でやっちゃうと管理が煩雑になるので管理画面からは行わず、functions.php オンリーで行っています。

functions.phpを編集してアイキャッチのサイズを増やす

アイキャッチのサイズを増やすにはadd_image_sizeを用います。以下のように記述します。トリミングの有無はtrueとfalse

<?php add_image_size(サイズ名,横幅,縦幅,トリミングの有無) ?>
アイキャッチ画像のトリミングって??

トリミングは比率を維持しながらはみ出す部分をカットします。トリミングを行わない場合は長辺を基準にリサイズされます。画像サイズがレイアウトに影響を与える場合はトリミングを行う方が良いでしょう。赤枠に対して向かって左側がtrue、右側がfalseで設定したイメージです。

トリミング例

複数のアイキャッチ画像を増やすには?

バリエーションを増やすには単純にadd_image_sizeを増やせばOKです。

以下は740×457と360×222のトリミングありのアイキャッチ画像を増やす例です。

add_image_size( 'entdit', 740, 457,true);
add_image_size( 'thum-list', 360, 222,true);

アイキャッチ画像の出力方法についてはこちらの記事を参考にしてください。

アイキャッチ画像を増やす注意点

紹介したようにfunctions.phpに設定を増やせばアイキャッチ画像のサイズを増やすことはできますが、枚数が増えれば増えるほどサーバーに負荷がかかってしまいます。EWWW Image OptimizerやKUSANAGIの画像圧縮を有効にしていると、もっと負荷がかかります。

私の経験ですが一度に複数の画像をアップロードしてサーバーからエラーが返ってきたことがありました。サイズの上限などはサーバーに依存しますので、アイキャッチ画像のサイズを増やす際はその辺りも注意してください。

増やしたサイズの画像を再生成するには?

WordPressが各サイズの画像を生成するのはアップロードのタイミングで、functions.phpでサイズを増やしたからといって、それがアップされた画像に反映されるわけではありません。一枚一枚アップし直すのは現実的ではありませんし・・・そんな時に役立つのが、プラグイン「Regenerate Thumbnails」です。

Regenerate Thumbnailsは簡単な操作で、投稿画像の追加されたサイズを再生成してくれます。詳しくはこちらの記事をご参考に。

一手間加えて画像サイズを便利に増やす

画像のサイズを設定するときにいつも面倒だなぁ〜と思うのが各サイズの比率の割り出しです。なので高さは横幅を入力すれば比率で割り出せるようにしておくと便利です。以下は黄金比率で高さを割り出している例です。ちなみに当サイトトップページのメイン画像を例にしています。

$ratio = 1.618;
$kv_eye_width = 1380;
$kv_eye_height = floor($kv_eye_width/$ratio);
add_image_size( 'kv-size', $kv_eye_width, $kv_eye_height ,true);

$ratioの設定を変えれば16:9や4:3などわざわざサイズごとに高さを割り出す必要がなくなります。ちなみに16:9の高さの求め方は、width÷(16÷9)なので、$ratioを1.77777ぐらいにしておけば大丈夫かと思います。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する