WORDPRESS

【2021年】「Imsanity」の設定方法と使い方を初心者向けに解説【WordPressプラグイン/アップロード画像を自動リサイズしてサイト高速化】

「Imsanity」の設定方法と使い方
 

あずきです🐥

WordPressにおける定番プラグインの1つ…

Imsanity

について、その導入手順と「基本的な設定方法&使い方」をブログ初心者さん向けに1から解説していきます

 

まず!

「Imsanity」は、WordPressにアップロードした画像のサイズ、正確には「横幅・高さ」の…

px=ピクセル数

を、それぞれ指定した大きさに…

自動リサイズ

するためのプラグインです

 

この「リサイズ」という工程が行われることで、結果的に画像の「容量」を大幅に軽減させられます

つまり、ページの読み込みをスムーズにできるよ!
 
 

そもそも!

「スマホで撮った写真」にしても、「フリー画像サイトなどから取得した画像」にしても、それらブログに使っていく各種画像を…

 

リサイズなしでWordPressにアップするのは無謀

 

と言えるくらい、この「リサイズ」という作業はWordPress運営において重要なものです

 

今回の「Imsanity」というプラグインは、そんな「画像の自動リサイズ」について…

  • 「投稿・固定ページ」の編集画面からアップロードした画像
  • 「メディアライブラリ」からアップロードした画像
  • その他の方法でアップロードした画像(例 TOPヘッダー / 背景 )

という風に、3つのカテゴリーで「リサイズ後の大きさを個別に指定」できるんですね

この「個別に」というのが凄く重要!
 

例えば!

「TOPヘッダー」や「背景」に使う画像というのは、通常の「投稿」に貼りつける画像の定番サイズである…

横幅 1024px

という数値では正直足りず…

横幅 2000px以上

を推奨しているWordPressテーマもあるので、ここを個別に設定できるのは「Imsanity」の大きな魅力です

個別に設定できないプラグインだと、仮に「1024px」に設定したらヘッダー画像も「1024px」になっちゃう…
 

参考までに!

このブログでも愛用しているテーマ「ACTION AFFINGER6」の場合、TOPヘッダーの画像サイズは…

横幅 2200px / 高さ 500px

という数値が推奨されています

 

ということで、今回のステップは3つです

  1. 「Imsanity」の導入手順【インストールと有効化】
  2. 「Imsanity」の基本的な設定方法
  3. すでにアップロードしてある画像を「まとめてリサイズ」するやり方

さっそく見ていきましょー🐥

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

【2021年】「Imsanity」の設定方法と使い方を初心者向けに解説【WordPressプラグイン/アップロード画像を自動リサイズしてサイト高速化】

ステップ1:プラグイン「Imsanity」をWordPressに導入する手順【インストール&有効化】

WordPress ヘッダー b-01

 

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください

 

関連:WordPressプラグイン「BackWPup」の設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

 

はじめに…

プラグイン「Imsanity」の導入手順

について

 

WordPress管理画面の左側にある一覧メニューから…

WordPressプラグイン インストール 1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグイン インストール 1-02

↑ こちらの検索フォームに Imsanity と入力し、その下の検索結果から…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-1-01

↑ このアイコンが目印のプラグイン「Imsanity」を探し、右上の「今すぐインストール」ボタンをクリックします

 

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

お次は「設定方法」を見ていこう!
 

ステップ2:プラグイン「Imsanity」の基本的な設定方法【おすすめのピクセル数】

WordPress ヘッダー b-02

 

つづいて2つ目のステップは…

プラグイン「Imsanity」の設定方法

について

 

WordPress管理画面の一覧メニューから…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-2-01

↑ 設定 > Imsanity をクリックします

 

「Imsanity」の設定画面を開いたら、まずは上側に表示されている…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-2-02-a

↑ こちらの3項目から見ていきましょう

 

デフォルトでは、上の画像のように3つとも…

横幅 1920px / 高さ 1920px

というざっくりな設定になっているので、ここから任意の数値にカスタマイズしていきます

 

参考までに、おすすめな数値(=ピクセル数)としては…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-2-02-b

↑ このように…

  • 固定ページ / 投稿でアップロードされた画像 → 幅 1024px / 高さ 0px
  • メディアライブラリへ直接アップロードされた画像 → 幅 0px / 高さ 0px
  • その他の方法でアップロードされた画像 → 幅 0px / 高さ 0px

という形です

要点はそれぞれ次の通り!
 

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

「投稿」や「固定ページ」の編集画面からアップロードした画像のことで、通常はWordPressに画像をアップするときの大半がこのパターンに該当すると思います

 

まず「幅 1024px」というのは、ブログに使用する画像で定番となっているサイズの1つです

 

それ以上のサイズは、画像の容量=ファイルサイズを考慮したときに、あまりおすすめできません(写真などの、ファイルサイズがかさむ画像は特に)

 
WordPressブログでおすすめな画像サイズについて アイキャッチ
WordPressブログでおすすめな、画像サイズ(ピクセル数)ってどのくらい?【リサイズの基準】

続きを見る

 

また高さについては「0px」にしておくことで、幅のリサイズ比率に合わせて自動で縮小されます

 

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

WordPress管理画面の メディア > 新規追加 からアップロードした画像を指しますが、あえてこの方法で画像をアップする機会は、普段のブログ運営においてめったにないと思います

 

なので、なにか特別な用途(例えば、「幅 1024px」を超えるサイズのまま使いたい画像など)にも対応できるように…

  • 幅 0px
  • 高さ 0px

にしておくのが無難という結論です(これで、この方法でアップした画像の「自動リサイズ」は無効になります)

 

「その他の方法でアップロードされた画像」について

通常の記事に貼る画像とは別で、 WordPress > カスタマイズ などからアップロードした画像を指します

 

そのなかには、TOPヘッダーや背景など「幅 1024px」を超えるサイズが求められる画像もあるので、こちらも…

  • 幅 0px
  • 高さ 0px

で「自動リサイズ」は無効にしておいて、それらの画像は必要に応じて「自分でリサイズしてからWordPressにアップ」する形がおすすめです

 
ペイントで「画像サイズのリサイズ」&「ファイル形式の変換」をする方法 アイキャッチ
【画像編集】ペイントで、「画像サイズのリサイズ」&「ファイル形式の変換」をする方法【jpg・pngなどの拡張子変更】

続きを見る

 

つづいて、その下に表示されている…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-2-03-a

↑ この4つの項目ですが、基本的には…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-2-03-b

↑ こちらの「Delete Originals」という項目だけチェックを入れておきます

残りの3項目についてはデフォルトのまま!
 

ちなみに!

この「Delete Originals」は「元画像の削除」といった意味で、その右の英語説明については…

Remove the large pre-scaled originals that WordPress retains for thumbnail generation.
WordPressがサムネイル生成のために保持している「リサイズ前」の元画像を削除します

といった内容になります

 

せっかく「自動リサイズ」で画像を縮小しても、リサイズ前の「元画像」がWordPressに保存されたままだと…

サーバーの容量を圧迫してしまう

ので、基本的には「チェックあり」が妥当だと思います

 

ということで…

ここまで一通り設定できたら、「変更を保存」ボタンを忘れずにクリックして基本的な設定は完了です🐣

これで今後WordPressにアップロードする画像については、設定した内容で「自動リサイズ」されるよ!
 

ただし!

 

「Imsanity」を導入する前からすでにアップロードしてある画像については、「自動リサイズ」の対象外

 

なので注意しましょう

 

この「自動リサイズされないアップロード済み画像」については、「Imsanity」の…

一括画像リサイズ

という方法で「まとめてリサイズ」できます

ということで、3つ目のステップへ!

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ステップ3:すでにアップロードしてある画像を、「Imsanity」でまとめてリサイズするやり方【一括画像リサイズ】

WordPress ヘッダー b-03

 

最後の3つ目のステップは、「Imsanity」を導入する前からすでにアップロードしてある画像を…

「一括リサイズ」するやり方

について

 

WordPress管理画面の一覧メニューから、さきほどの【ステップ2】と同様に…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-3-01

↑ 設定 > Imsanity をクリックしましょう

 

「Imsanity」の設定画面をまた開いたら、今度は画面の下部に表示されている…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-3-02-a

↑「一括画像リサイズ」というエリアを見ていきます

 

まず!

WordPressプラグイン「Imsanity」の設定方法と使い方 1-3-02-b

↑ こちらの赤枠メッセージにもある通り、この「一括画像リサイズ」というのを行うと…

「リサイズ前の元画像」には戻せなくなる

という点を確認・理解したうえで、その下にある…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-3-02-c

↑「Start Resizing All Images」というボタンをクリックします

 

すると、画面の上部に…

WordPressプラグイン「Imsanity」の設定方法と使い方 1-3-03

↑ こちらの…

You are about to resize all your existing images. Please be sure your site is backed up before proceeding. Do you wish to continue?
既存のすべての画像をリサイズしようとしています。 続行する前に、サイトがバックアップされていることを確認してください。 続行しますか?

というポップアップ画面が表示されるので、各種データ&ファイルの「バックアップ」を済ませたうえで、実行して問題なければ「OK」ボタンをクリックします

「OK」ボタンをクリックすると、すぐに「一括画像リサイズ」の処理が始まります🐥

あとは完了まで待てばOK!
 
 

今回の記事はこちらの章に属しています

 第4章 プラグイン 編         

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

全9章のTOPです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS