今回は前回に引き続きサイトの読み込み速度を向上させるプラグインをご紹介します！
前回の記事でもご紹介しましたが、ホームページの読み込み速度は思った以上に色々なことに影響を与えます。

読み込みが遅いとユーザーにストレスがかかり、読み込み速度が3秒遅くなるとユーザー離脱率が倍になるとまで言われているほどです。

そして読み込み速度が遅くなる原因としてよく挙がるのが画像の読み込み時間です。
前回は「遅延読み込み」という方法で読み込み速度の向上を図りましたが、そもそも画像サイズは適切でしょうか？

WEB上では高解像度で大きな画像をアップロードしても表示上意味はありません。
むしろ大きすぎる画像ファイルは快適な表示の妨げになってしまします。

今回は画像を適切なサイズにリサイズしてくれるプラグイン「Imsanity」をご紹介いたします。

WEB上にアップする画像の適切なサイズ

みなさん、ホームページにアップする写真やイラストはどのように用意するでしょうか？

• デジカメやスマホで撮影する
• 素材サイトからダウンロードして使う
• 紙媒体を複合機などでスキャンする

など色々ですが、実はこのまま画像をアップしてしまうと画像が大きすぎることがほとんどです。

例えばiphone 8で撮った写真などはデフォルトで4032px × 3024pxありますが、ホームページで使う場合このサイズは大きすぎます。

用途にもよりますが、

• PCのブラウザで画面いっぱいに表示させたい場合…1800px
• スマホの場合960px

もあれば事足ります。

普通に表示させる画像や、サムネイルに関してはもっと小さくても問題ありません。

大きすぎる画像を用意してもウェブブラウザ上で表示される際は指定したサイズに縮小され表示されるので、ただ読み込み時間の増加に繋がるだけです。

そして、デジカメで撮った写真や、配布販売されている素材の画像は、より大きなサイズになっているのでこれらのリサイズ作業は必須と言っていいでしょう。

画像リサイズの方法

では適切な画像はどのように用意すればいいでしょうか？
方法をいくつかご紹介します。

スマホやデジカメの設定をする
写真を撮影するスマホやデジカメの設定で、画像のサイズを設定することができます。
ホームページで使う場合は小さいサイズに設定してから撮影します。

ツールでリサイズする
「photoshop」などのツールで意図したサイズにリサイズします。
Web上でリサイズしてくれるサービスもあるのでこれらを利用するのも手です。

外部リンク:オンラインでJPGを瞬時にサイズ変更

プラグインを利用する
WordPressプラグインを導入することで、アップロードした画像を自動的にリサイズしてくれるようになります。

WordPress画像リサイズプラグイン「Imsanity」のご紹介

そして今回は画像の自動リサイズプラグイン「Imsanity」をご紹介します。
導入することで、大きすぎる画像のサイズを設定した適切な大きさにリサイズしてくれます。

「Imsanity」のインストール方法

「Imsanity」の設定方法

注意点

Imsanityは「アップロードする画像」をリサイズするプラグインです。
導入前からある画像の大きさは変わりません。

Imsanityの設定画面に「一括画像リサイズ」という機能があります。
現在メディア上に上がっている画像全てを一括で設定通りにリサイズしてくれる機能になります。
この機能で導入前からある画像もリサイズする事ができますが、一度リサイズしてしまうと元に戻すことは出来ません。
リサイズしたことにより予期しないページデザインの崩れなどが起こってしまうこともあるので、実行は慎重に行ってください。

まとめ

今回は画像のリサイズ設定を行うプラグイン「Imsanity」をご紹介しました。

前回でも解説しましたが、ホームページの表示スピードはユーザーの使い心地に影響し、SEOにも大事な要素になります。
画像を適切なサイズにリサイズすることはページ速度の改善の第一歩といえます

S&Eパートナーズではサイトの表示速度にも考慮したSEO施策をご提案しています。
もし運用されているホームページの読み込みスピードが気になる方はお気軽にお問い合わせくださいませ。

ご相談、お問合せはこちら

関連記事
ホームページの読み込みスピードUP！WPプラグインできるSEO対策 vol.9「Lazy Load」