WORDPRESS

【2021年】WordPressプラグイン「Imsanity」の設定方法と使い方【ブログにアップする画像を自動リサイズ/一括画像リサイズも】

WordPressプラグイン「Imsanity」の設定方法と使い方 アイキャッチ
 

あずきです🐥

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

Imsanity

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

 

まず!

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

px=ピクセル数

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

自動リサイズ

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

 

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

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

そもそも!

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

「リサイズなし」でWordPressへアップロードするのは無謀

と言えるくらい、この「リサイズ」という作業はWordPressに必須なものです

 

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

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

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

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

例えば!

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

横幅 1024px

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

横幅 2000px以上

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

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

参考までに!

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

横幅 2200px / 高さ 500px

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

 

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

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

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

 

\ 本気で戦うなら /

WING AFFINGER5 バナー 02

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

「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

注意

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

 

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

 

【2021年版】WordPressプラグイン「Imsanity」の設定方法と使い方【ブログのアップロード画像を自動リサイズ/アップロード済み画像の一括リサイズも】

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

WordPressブログ「完全初心者」ガイド 見出し a-01

はじめに…

「Imsanity」の導入手順

について

 

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

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

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

 

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

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

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

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

↑ このアイコンが目印のプラグイン「Imsanity」を探します

 

無事見つかったら…

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

↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…

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

↑ このように「有効化」という表示へ切り替わったことを確認したら、こちらの「有効化」ボタンもクリックしましょう

「プラグインを有効化しました」の表示

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

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

 

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

WordPressブログ「完全初心者」ガイド 見出し a-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つ目のステップへ!
 

 

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

WordPressブログ「完全初心者」ガイド 見出し a-03

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

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

について

 

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

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!
 
 

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

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

\ このブログでも愛用中! /

WING AFFINGER5 banner-large-01

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

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!

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

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

About me

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

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

あずき

 

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

 

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

-WORDPRESS

© 2019 あずきのぶろぐ