【2021年最新】Imsanityの設定方法とおすすめの使い方:画像リサイズプラグイン【WordPress】
※本ページにはプロモーションが含まれている場合があります。
・Imsanityのおすすめの設定や使い方を知りたい!
・ブログの表示速度を速くして検索順位や売上を上げたい!
・Imsanity以外にも表示速度を速くする方法を知りたい!
本記事の内容
- Imsanityの機能や特徴
- Imsanityの導入方法
- おすすめの設定と使い方
- Imsanityの注意点
- さらに画像を圧縮してサイトを速くする方法
本記事を読むと、Imsanityのおすすめの設定や使い方だけでなく、さらにブログの表示速度を速くする方法が分かります。
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
\ 月間1300万PVのプロが解説 /
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説!
Imsanityとは
Imsanityとは、画像のサイズ(画像の幅と高さのこと!)を自動でリサイズして画像のデータサイズを小さくしてくれるプラグインです。
画像のデータサイズが小さくなることで、サーバーで余分に容量を消費することを抑え、さらにはページの表示速度を速くしてくれます。
Imsanityでできること
一言で言うと「画像をリサイズしてくれるプラグイン」ですが、具体的には以下のような機能があります。
- 画像をアップロードする度に自動でリサイズ
- アップロード済みの画像を一括で(あるいは個別で)リサイズ
- アップロード方法に合わせて、リサイズの大きさを自由に設定できる
- PNGやBMP形式の画像をJPG形式へ変換してくれる
画像をリサイズするとどうなるの?
画像をリサイズして画像のデータのサイズを小さくすることで、読み込み速度が速くなるのでページの表示速度が速くなります。
ページの表示速度が速くなると
- ユーザーの離脱率が下がって読まれやすくなり、売上が上がりやすい
- Googleに評価されて検索順位が上がりやすい
という効果があります。
つまりブログで稼ぎたいのであれば、表示速度を速くすることや、そのために画像をリサイズすることは必須!!
フリー素材などの大きな画像をアップロードしてそのまま使っていては自殺行為であるとも言えます。
ページ速度改善によるSEO対策の豆知識
画像をリサイズするだけでなく、HTMLやCSS・JavaScriptなどのファイルを最適化することでもページの表示を速くすることができます。
Autoptimizeというプラグインで自動でできるので合わせて導入しておきましょう。
以下の記事で詳しく解説しています。
>> 【2021年最新】Autoptimizeの設定方法と使い方:コード最適化プラグイン【WordPress】
Imsanityのインストールと有効化
それではさっそく!!
Imsanityの使い方を順番に解説していきます。
まずはインストールから始めます。
WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。
検索窓に「Imsanity」と入力して検索します。
上の画像のプラグインがImsanityになります。
「今すぐインストール」をクリックします。
「有効化」をクリックして、Imsanityを有効化します。
「プラグインを有効化しました。」と表示されれば、Imsanityのインストールと有効化は完了です。
Imsanityの使い方:自動リサイズの設定
続いてImsanityの自動リサイズの設定方法を解説します。
WordPressの管理画面から「設定」→「Imsanity」をクリックして、Imsanityの設定画面を開いてください。
上の画像のような画面が表示されます。
設定はこのページの項目をそれぞれいじるだけで完了できるのでとっても簡単です。
リサイズの最大の幅・高さの設定
上の画像の3つの項目が、画像のサイズ(幅・高さ)の設定です。
ここで指定したピクセル数よりも大きな画像がアップロードされた時には、ここで指定した数値まで画像をリサイズして小さくしてくれます。
Imsanityでは、画像のアップロード方法ごとに以下の3つの場合でそれぞれサイズを指定できます。
- 「固定ページ / 投稿でアップロードされた画像」
- 「メディアライブラリへ直接アップロードされた画像」
- 「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」
参考までにおすすめのピクセル数は以下の画像のようになっています。
このように、
→ 幅:1024px / 高さ:0px
・「メディアライブラリへ直接アップロードされた画像」
→ 幅:1024px / 高さ:0px
・「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」
→ 幅:0px / 高さ:0px
という設定がおすすめです!
それぞれ順に解説します。
「固定ページ / 投稿でアップロードされた画像」
「固定ページ / 投稿でアップロードされた画像」とは、その名の通り「固定ページ」や「投稿」の編集画面からアップロードされた画像です。
ブログを運営されている方がアップロードする画像ははほとんどの画像に該当すると思います。
ブログでは一般的に、幅が1024pxが最も良いと言われているので、幅を1024pxに設定しています。
高さを0にしておくことで、縦横比を保ったまま、横幅が大きすぎる時のみ画像をリサイズしてくれます。
「メディアライブラリへ直接アップロードされた画像」
WordPressの管理画面の「メディア」の「ライブラリ」や「新規追加」からアップロードされた画像です。
あまり使う機会がないと思いますが、投稿や固定ページのための画像をまとめてここからアップロードした際にもリサイズされるように、幅を1024px・高さを0pxとしています。
という方は、幅も高さも0pxにしておきましょう。
「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」
外観やテーマのカスタマイズなどからアップロードされた画像です。
サイトのアイコンやバナー・ヘッダーなど特別な画像をアップロードすることが多いはずです。
これらの画像は横幅が画面一杯になるように1024px以上でも使いたいことがあると思うので、幅も高さも0pxと設定して、リサイズされないようにしています。
その他の設定
残りの設定は以下の4つになります。
- 「JPG画像品質」
- 「BMP形式をJPG形式へ変換する」
- 「PNG形式をJPG形式へ変換する」
- 「Delete Originals」
おすすめの設定は、上の画像のように「Delete Originals」にのみチェックを入れて、あとはデフォルトにしておくのがおすすめです。
「JPG画像品質」
画像品質の設定です。
デフォルトの「82」のままでOKです。
「BMP形式をJPG形式へ変換する」
アップロードされた画像のファイル形式を変換するための設定で、BMP形式の画像をJPGに変換する設定です。
デフォルトは「ON」になっています。デフォルトのままでOKです。
「PNG形式をJPG形式へ変換する」
PNG画像をJPG画像へ変換する設置です。
デフォルトの「OFF」のままでOKです。
PNGやJPGで変換をすると画像が変化する可能性があるので、OFFのままがおすすめです。
「Delete Originals」
リサイズされる前のオリジナル画像を残しておくかどうかの設定です。
リサイズ前の画像は余分なので削除する設定にするのがおすすめです。
チェックを入れておきましょう。
ここまでできたら「変更を保存」をクリックして設定を保存しましょう。
これで画像を自動でリサイズするための設定は全て完了です!!
今後は画像をアップロードするだけで、自動でリサイズして縮小してくれます。
Imsanityの使い方:アップロード済みの画像を一括でリサイズ
Imsanityを設定した後にアップロードした画像は自動でリサイズされますが、それ以前にアップロードされていた画像は手動でリサイズをする必要があります。
一括で全てリサイズできるので、過去にアップロード済みの画像も手順に沿ってリサイズしておきましょう。
アップロード済み画像の一括リサイズの手順
まずは先ほどの設定と同じように、WordPressの管理画面の「設定」→「Imsanity」をクリックして、Imsanityの設定を開きます。
設定画面を下の方にスクロールしていくと、上の画像のように「一括画像リサイズ」という欄が表示されています。
赤枠の注意点の箇所には、注意点として「リサイズした画像は元に戻すことができない」ということが書かれています。
確認して問題なければ、「Start Resizing All Images」というボタンをクリックします。
上記のようなポップアップが表示されます。
英語で
と表示されますが、日本語にすると
という意味になります。
万が一のエラーに備えてWordPressデータのバックアップを取っておくことがおすすめです。
以下の記事でWordPressでバックアップを取る方法を解説しています。
バックアップを取ったあるいはバックアップが不要な方は、OKをクリックすると画像の一括でのリサイズが開始されます。
画像の一括リサイズ結果の見方
一括での画像リサイズが完了すると、上の画像のようにリサイズ結果が一覧で表示されます。
それぞれステータスは以下のことを表します。
- OK:無事リサイズが完了
- SKIP:画像サイズが元々小さいのでリサイズが不要
- ERROR:リサイズすると画像のデータサイズが大きくなるのでスキップ
(※上の画像では、実行する前から既にリサイズ済みの画像ばかりだったので「ERROR」や「スキップ」ばかりになっています。)
Imsanityの注意点
Imsanityを利用する上での注意点を簡単に解説します。
注意点①ヘッダー画像はリサイズしないようにしよう
画像のリサイズの大きさの設定でも解説したように、ヘッダー画像の幅は1040pxよりも大きいので、リサイズしないようにしましょう。
幅はWordPressのテーマによっても変わりますが、1600pxや2000pxのものが多いようです。
リサイズをしないように、設定で幅と高さを0にしておきましょう。
注意点②指定したサイズより小さな画像は拡大はされない
当然ではありますが、指定したサイズよりも小さな画像は拡大はされません。
指定した大きさよりも小さな画像をたくさん使っていると、ブログ記事の中で画像の大きさがバラバラでデコボコとして読みにくくなる可能性もあるので、ブログが見にくくならないように小さすぎにも注意しましょう。
注意点③幅と高さをリサイズするだけでは画像の圧縮は足りない
Imsanityを使用することで画像のサイズを小さくし、画像のデータサイズを小さくしてページの表示速度を早くしてくれます。
ですが、画像のデータサイズは幅や高さなどの見た目の大きさ以外の要素もあります。
見た目の大きさ以外も最適化をしないと画像の軽量化は十分ではありません。
「画像をさらに最適化して表示速度を速くする方法」の章で詳しく解説します。
注意点④リサイズ前にバックアップを取っておこう
Imsanityでは一度リサイズをすると画像を元に戻すことはできません。また、他のプラグインとの相性によっても、不具合が起こる可能性もあります。
大切はブログとデータなので、万が一に備えてバックアップを取っておきましょう。
WordPressでバックアップを取る方法は以下の記事で詳しく解説しています。
>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】
画像をさらに最適化して表示速度を速くする方法
最後に、Imsanityで画像をリサイズするだけでなく、さらに画像を圧縮してデータを小さくしてページを高速化する方法を解説します。
画像のデータは、画像の見た目のサイズ(幅・高さ)以外にも画素数(画質)や画像形式によっても変わります。
さらに、画像の作成日時やGPS情報など、隠れたデータもたくさん詰まっており、これらもデータのサイズが大きくなる要因になっています。
つまりこれらの不要なデータを削除することでさらに画像のデータのサイズを圧縮してサイトを高速化することが可能です。
EWWW Image Optimizerというプラグインを使うことで画像の不要なデータを削除し、画像データ自体も大幅に圧縮してくれるので、サイトを高速化するためにとてもおすすめのプラグインです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
Imsanityで自動で画像をリサイズしよう!
Imsanityで画像をリサイズする方法やおすすめの設定方法を解説しました。
ブログに使う画像はリサイズしないと、無駄にページの表示速度がどんどん遅くなっていくのでとてももったいないです。
Imsanityを使うととっても簡単に画像をリサイズしてくれてサイトの速度も改善されます。売上やSEOでの検索順位にも大きく影響してくるので、早速試してみてください。
画像のリサイズだけでなく圧縮もしてさらに軽量化したい方はEWWW Image Optimizerもおすすめです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
バックアップをしていない方は以下の記事を参考に、バックアップも取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】
この先も何があるか分からないので、手遅れになる前にバックアップを取っておきましょう。
▼画像の圧縮やサイトの高速化に役立つプラグインの他の記事
>> 【画像圧縮プラグイン】Compress JPEG & PNG imagesの設定と使い方
>> 【2021年最新】Autoptimizeの設定方法と使い方:コード最適化プラグイン【WordPress】