画像を自動リサイズしてくれるImsanityの設定と使い方


今回は画像を自動リサイズしてくれる『Imsanity』というプラグインを説明していきます。

これを使うと?

これを使うとワードプレスに必要以上に大きな画像がアップロードされるのを防ぐことができます。

たとえば、画像サイトやデジカメで撮った写真なんかは大きな画像であることがほとんどですが、ファイルサイズを見てみると画像1枚で7メガもすることがあります。

1

この画像をそのまま記事に使おうとすると、画像サイズが大きすぎるので記事を読み込むまでに時間がかかり、ページの表示速度が目に見えて遅くなります。

そうなれば当然、ユーザーはストレスを感じますし、この影響で離脱率も上がります。

また、サーバーの容量を無駄に喰ってしまうため、サーバーを圧迫することにもつながります。

こんな具合に、画像サイズが大きすぎるとデメリットが大きいので、画像をWebに上げる場合は、いったん小さくリサイズしてからアップロードするのが基本です。

そして、これをいちいち手作業でリサイズすると面倒ですが、これを自動でやってくれるのがImsanityです。

※ Imsanityを使うとこんな具合に自動で縮小されます

a1

設定

それでは、Imsanityの使い方を説明していきます。

Imsanityの設定は、管理画面のサイドメニューの「設定」→「Imsanity」から設定ができます。

2

基本的にはデフォルトのままで十分ですが、ここでは設定しておくといいポイントに絞って説明していきます。

縦幅の上限解除

まず、縦幅の上限サイズを解除しておきましょう。

3

上から順に、

  • 固定ページ/投稿からアップロードしたときの設定
  • メディアライブラリに直接アップロードしたときの設定
  • その他の場所からアップロードしたときの設定

になっています。

デフォルトでは横幅も縦幅も”2048”となっていますが、縦幅のところに”0”と入れると上限サイズを解除することができます。

なぜ縦幅の上限サイズを解除するかというと、画像は横長な分には問題はあっても、縦長な分には特に問題がないからです。

Webページは縦にスクロールされるように設計されているので、画像が縦に長い分に関しては閲覧時に特に支障をきたしません。

しかし、横に長いと画面からはみ出したり、これとは逆に画面サイズに合うように自動調整が行われて画像が極端に小さくなって見づらくなってしまうことがあります。

そのため、Webで使う画像は基本的に横幅を基準にリサイズすれば大丈夫です。

横幅に関しては好みに応じて変えてください。

参考までに、私は「page/post」のみ横幅を”1280”に変更しています。

変更しない方がいい設定

続いて、「Convert PNG to JPG」という設定がありますが、これはpngファイルをアップロードしたときにjpgファイルに自動変換するかどうかの設定になります。

基本的にはpngの方が画像のクオリティが高いので、この設定は「No」のままにしておきましょう。

4

以上で、基本的な設定は終わりです。

使い方

設定が終われば、あとは画像をアップロードするときに自動でリサイズしてくれるようになります。

アップロード済みの画像をリサイズする

また、既にアップロードしてある画像に関しても「Bulk Resize Images」からリサイズすることができます。

5

「Search Images…」を押すと、アップロード済みの画像を検索し始めますので、検索が終わったら「Resize Checked Images…」を実行します。

6

すると、先ほど設定した上限サイズの設定でリサイズが始まります。

少し待つと”RESIZE COMPLETE”と表示されるので、これがリサイズ完了のサインになります。

7

おわりに

以上が、Imsanityの使い方になります。

これを使えば大きいサイズの画像を自動リサイズしてくれるので、サーバーの余計な圧迫や、ページの表示速度が遅くなるといったことを未然に防いでくれるようにます。

PS

これと同時に画像を自動圧縮してくれるこちらのプラグインを使うことで、さらにページの表示速度を上げることができます。

画像を自動圧縮してくれるEWWW Image Optimizerの使い方と設定