【2021年最新】Imsanityの設定方法とおすすめの使い方:画像リサイズプラグイン【WordPress】

ブログ

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・Imsanityのおすすめの設定や使い方を知りたい!
・ブログの表示速度を速くして検索順位や売上を上げたい!
・Imsanity以外にも表示速度を速くする方法を知りたい!

本記事の内容

  • Imsanityの機能や特徴
  • Imsanityの導入方法
  • おすすめの設定と使い方
  • Imsanityの注意点
  • さらに画像を圧縮してサイトを速くする方法

本記事を読むと、Imsanityのおすすめの設定や使い方だけでなく、さらにブログの表示速度を速くする方法が分かります。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪
なべたろの実績

  • ライター100名以上の組織の法人を経営→株式譲渡
  • 立ち上げから半年で月間1,000万PVを達成
  • 1年で月間1200万PVを達成
  • 年商約1億円を達成
  • 法人向けコンサル1社あたり月額60~100万円
  • PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

\ 月間1300万PVのプロが解説 /
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説!

Imsanityとは

①Imsanityとは
Imsanity
>> Imsanity

Imsanityとは、画像のサイズ(画像の幅と高さのこと!)を自動でリサイズして画像のデータサイズを小さくしてくれるプラグインです。

画像のデータサイズが小さくなることで、サーバーで余分に容量を消費することを抑え、さらにはページの表示速度を速くしてくれます。

SEO対策をしてブログで稼ぎたいブロガーは是非入れておきたいプラグイン!

Imsanityでできること

一言で言うと「画像をリサイズしてくれるプラグイン」ですが、具体的には以下のような機能があります。

  • 画像をアップロードする度に自動でリサイズ
  • アップロード済みの画像を一括で(あるいは個別で)リサイズ
  • アップロード方法に合わせて、リサイズの大きさを自由に設定できる
  • PNGやBMP形式の画像をJPG形式へ変換してくれる
一度設定するだけで、それからは画像をアップロードする度に勝手にリサイズしてくれるからとっても楽だよ♪

画像をリサイズするとどうなるの?

画像をリサイズして画像のデータのサイズを小さくすることで、読み込み速度が速くなるのでページの表示速度が速くなります。

ページの表示速度が速くなると

  • ユーザーの離脱率が下がって読まれやすくなり、売上が上がりやすい
  • Googleに評価されて検索順位が上がりやすい

という効果があります。

つまりブログで稼ぎたいのであれば、表示速度を速くすることや、そのために画像をリサイズすることは必須!!

フリー素材などの大きな画像をアップロードしてそのまま使っていては自殺行為であるとも言えます。

ページ速度改善によるSEO対策の豆知識

画像をリサイズするだけでなく、HTMLやCSS・JavaScriptなどのファイルを最適化することでもページの表示を速くすることができます。

Autoptimizeというプラグインで自動でできるので合わせて導入しておきましょう。

以下の記事で詳しく解説しています。

>> 【2021年最新】Autoptimizeの設定方法と使い方:コード最適化プラグイン【WordPress】
 

Imsanityのインストールと有効化

②Imsanityのインストールと有効化
それではさっそく!!

Imsanityの使い方を順番に解説していきます。

まずはインストールから始めます。
Imsanityのインストールと有効化-1
WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。
Imsanityのインストールと有効化-2
検索窓に「Imsanity」と入力して検索します。
Imsanityのインストールと有効化-3
上の画像のプラグインがImsanityになります。

「今すぐインストール」をクリックします。
Imsanityのインストールと有効化-4
「有効化」をクリックして、Imsanityを有効化します。
Imsanityのインストールと有効化-5
「プラグインを有効化しました。」と表示されれば、Imsanityのインストールと有効化は完了です。

Imsanityの使い方:自動リサイズの設定

③Imsanityの使い方:自動リサイズの設定
続いてImsanityの自動リサイズの設定方法を解説します。

とっても簡単だよ♪

Imsanityの設定方法-1
WordPressの管理画面から「設定」→「Imsanity」をクリックして、Imsanityの設定画面を開いてください。
Imsanityの設定方法-2
上の画像のような画面が表示されます。

設定はこのページの項目をそれぞれいじるだけで完了できるのでとっても簡単です。

リサイズの最大の幅・高さの設定

画像の大きさの設定!これがメインだよ♪

Imsanityの設定方法-3
上の画像の3つの項目が、画像のサイズ(幅・高さ)の設定です。

ここで指定したピクセル数よりも大きな画像がアップロードされた時には、ここで指定した数値まで画像をリサイズして小さくしてくれます。

Imsanityでは、画像のアップロード方法ごとに以下の3つの場合でそれぞれサイズを指定できます。

  • 「固定ページ / 投稿でアップロードされた画像」
  • 「メディアライブラリへ直接アップロードされた画像」
  • 「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」
他のプラグインではできない嬉しい機能!

参考までにおすすめのピクセル数は以下の画像のようになっています。

Imsanityの設定方法-4

このように、

・「固定ページ / 投稿でアップロードされた画像」
 幅:1024px / 高さ:0px
・「メディアライブラリへ直接アップロードされた画像」
 幅:1024px / 高さ:0px
・「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」
 幅:0px / 高さ:0px

という設定がおすすめです!

それぞれ順に解説します。

「固定ページ / 投稿でアップロードされた画像」

Imsanityの設定:固定ページ / 投稿でアップロードされた画像
「固定ページ / 投稿でアップロードされた画像」とは、その名の通り「固定ページ」や「投稿」の編集画面からアップロードされた画像です。

ブログを運営されている方がアップロードする画像ははほとんどの画像に該当すると思います。

ブログでは一般的に、幅が1024pxが最も良いと言われているので、幅を1024pxに設定しています。

高さを0にしておくことで、縦横比を保ったまま、横幅が大きすぎる時のみ画像をリサイズしてくれます。

「メディアライブラリへ直接アップロードされた画像」

Imsanityの設定:メディアライブラリへ直接アップロードされた画像
WordPressの管理画面の「メディア」の「ライブラリ」や「新規追加」からアップロードされた画像です。

あまり使う機会がないと思いますが、投稿や固定ページのための画像をまとめてここからアップロードした際にもリサイズされるように、幅を1024px・高さを0pxとしています。

「メディアライブラリに直接アップロードした画像はリサイズせずにそのままのサイズで使いた!!」

という方は、幅も高さも0pxにしておきましょう。

「その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)」

Imsanityの設定:その他の方法でアップロードされた画像(テーマヘッダー、背景、ロゴなど)
外観やテーマのカスタマイズなどからアップロードされた画像です。

サイトのアイコンやバナー・ヘッダーなど特別な画像をアップロードすることが多いはずです。

これらの画像は横幅が画面一杯になるように1024px以上でも使いたいことがあると思うので、幅も高さも0pxと設定して、リサイズされないようにしています。

WordPressにアップロードする前にちょうど良いサイズにリサイズしておこう♪

その他の設定

Imsanityの設定方法-5
残りの設定は以下の4つになります。

  • 「JPG画像品質」
  • 「BMP形式をJPG形式へ変換する」
  • 「PNG形式をJPG形式へ変換する」
  • 「Delete Originals」

Imsanityの設定方法-6
おすすめの設定は、上の画像のように「Delete Originals」にのみチェックを入れて、あとはデフォルトにしておくのがおすすめです。

それぞれさらっと解説します♪

「JPG画像品質」

Imsanityの設定:JPG画像品質
画像品質の設定です。

デフォルトの「82」のままでOKです。

「BMP形式をJPG形式へ変換する」

Imsanityの設定:BMP形式をJPG形式へ変換する
アップロードされた画像のファイル形式を変換するための設定で、BMP形式の画像をJPGに変換する設定です。

デフォルトは「ON」になっています。デフォルトのままでOKです。

「PNG形式をJPG形式へ変換する」

Imsanityの設定:PNG形式をJPG形式へ変換する

PNG画像をJPG画像へ変換する設置です。

デフォルトの「OFF」のままでOKです。

PNGやJPGで変換をすると画像が変化する可能性があるので、OFFのままがおすすめです。

「Delete Originals」

Imsanityの設定:Delete Originals
リサイズされる前のオリジナル画像を残しておくかどうかの設定です。

リサイズ前の画像は余分なので削除する設定にするのがおすすめです。

チェックを入れておきましょう。
Imsanityの設定方法-7
ここまでできたら「変更を保存」をクリックして設定を保存しましょう。

これで画像を自動でリサイズするための設定は全て完了です!!

今後は画像をアップロードするだけで、自動でリサイズして縮小してくれます。

とっても便利♪

Imsanityの使い方:アップロード済みの画像を一括でリサイズ

④Imsanityの使い方:アップロード済みの画像を一括でリサイズ
Imsanityを設定した後にアップロードした画像は自動でリサイズされますが、それ以前にアップロードされていた画像は手動でリサイズをする必要があります。

一括で全てリサイズできるので、過去にアップロード済みの画像も手順に沿ってリサイズしておきましょう。

アップロード済み画像の一括リサイズの手順

Imsanityの使い方-画像の一括リサイズ-1
まずは先ほどの設定と同じように、WordPressの管理画面の「設定」→「Imsanity」をクリックして、Imsanityの設定を開きます。

Imsanityの使い方-画像の一括リサイズ-2

設定画面を下の方にスクロールしていくと、上の画像のように「一括画像リサイズ」という欄が表示されています。
Imsanityの使い方-画像の一括リサイズ-3
赤枠の注意点の箇所には、注意点として「リサイズした画像は元に戻すことができない」ということが書かれています。
Imsanityの使い方-画像の一括リサイズ-4
確認して問題なければ、「Start Resizing All Images」というボタンをクリックします。
Imsanityの使い方-画像の一括リサイズ-5
上記のようなポップアップが表示されます。

英語で

「You are about to resize all your existing images. Please be sure your site is backed up before proceeding. Do you wish to continue?」

と表示されますが、日本語にすると

「既存のすべての画像のサイズを変更しようとしています。続行する前に、サイトがバックアップされていることを確認してください。続行しますか?」

という意味になります。

注意!!

万が一のエラーに備えてWordPressデータのバックアップを取っておくことがおすすめです。

以下の記事でWordPressでバックアップを取る方法を解説しています。

>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】

Imsanityの使い方-画像の一括リサイズ-6
バックアップを取ったあるいはバックアップが不要な方は、OKをクリックすると画像の一括でのリサイズが開始されます。

数分も待てば大体完了するよ♪

画像の一括リサイズ結果の見方

Imsanityでの画像の一括リサイズ結果
一括での画像リサイズが完了すると、上の画像のようにリサイズ結果が一覧で表示されます。

それぞれステータスは以下のことを表します。

  • OK:無事リサイズが完了
  • SKIP:画像サイズが元々小さいのでリサイズが不要
  • ERROR:リサイズすると画像のデータサイズが大きくなるのでスキップ

(※上の画像では、実行する前から既にリサイズ済みの画像ばかりだったので「ERROR」や「スキップ」ばかりになっています。)

「ERROR」と表示されるとビックリしますが、不具合ではないので安心してください♪

Imsanityの注意点

⑤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で画像をリサイズする方法やおすすめの設定方法を解説しました。

ブログに使う画像はリサイズしないと、無駄にページの表示速度がどんどん遅くなっていくのでとてももったいないです。

Imsanityを使うととっても簡単に画像をリサイズしてくれてサイトの速度も改善されます。売上やSEOでの検索順位にも大きく影響してくるので、早速試してみてください。

画像のリサイズだけでなく圧縮もしてさらに軽量化したい方はEWWW Image Optimizerもおすすめです。

>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

バックアップをしていない方は以下の記事を参考に、バックアップも取っておきましょう。

>> 【2021年最新】BackWPupの正しい設定方法と使い方:自動バックアッププラグイン【WordPress】

この先も何があるか分からないので、手遅れになる前にバックアップを取っておきましょう。

▼画像の圧縮やサイトの高速化に役立つプラグインの他の記事

>> 【画像圧縮プラグイン】Compress JPEG & PNG imagesの設定と使い方

>> 【2021年最新】Autoptimizeの設定方法と使い方:コード最適化プラグイン【WordPress】

\【無料ブログ講座】LINE限定でノウハウを配信/

ブログの無料講座:公式LINE

公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。

LINE参加者の声


400名が以上参加中!無料で読めます♪

\ 最短で収益化 /公式LINEで無料で学ぶ

\年商1億超えのプロが解説!ブログの収益化方法/
無料で受け取る
\ 年商1億超えのプロが解説!ブログの収益化方法 /
無料で受け取る