"Imsanity", a plug-in that automatically changes the width and height of the uploaded original image (full-size image) and compresses the image quality.

アップロードした元画像(フルサイズ画像)の幅・高さ変更と画質の圧縮を自動で行うプラグイン「Imsanity」

公開日:2014年4月29日 パフォーマンス改善 画像・動画
アップロードした元画像(フルサイズ画像)の幅・高さ変更と画質の圧縮を自動で行うプラグイン「Imsanity」

いきなりですが、サイトへ画像を使う際、巨大な画像サイズ(縦横のピクセル値)を適切に縮小してからアップロードしていますか?

はいと答えた方は、このプラグインを使う必要はありません。

いいえと答えた方、巨大なサイズの画像はより大きなファイル容量となり、サーバー容量を圧迫したり、フルサイズの画像を出力するページで表示速度の低下を招いているのをご存じでしょうか?

「え?それってWordPress側で自動的にリサイズ(サイズの縮小)がされるのでは?」と思った方、WordPressの動作の認識が間違っているかも知れません。

確かにWordPress5.3以降のバージョンでは、縦横いずれか長辺側のピクセル数が2560を超えるものは、アップロード後、自動的に長辺側を2560ピクセルにした画像が作られるようになりました。

問題はこの「作られる」という部分。自身のサイトで試しに巨大な画像をアップロードし、FTPやファイルマネージャーなどで状況を確認してみてください。

巨大な画像ファイルはそのまま残り、新たに「ファイル名-scaled」という画像が作られていることが分かります。つまり巨大な画像が自動で変換される(縮小される)わけではないのです。画像が1つ追加されるだけですから、逆にサーバー容量の圧迫を加速させる結果となっています。

さらに、WordPressでは「ファイル名-scaled」という画像を元サイズ(fullサイズ)の画像として取り扱い、メディア一覧やメディア編集では「ファイル名-scaled」に対する編集をする形となり、実質アップロードしたままの画像(本当の元画像)はどこにも使われることはありませんから、極端なことを言えば、サイトの中では半ば粗大ごみがどんどん蓄積されるという状況になります。

デジカメやスマートフォンのカメラ精度が向上したことで、1枚の画像が数メガバイトを超えてしまう場合も出てくるようになりました。

WordPressサイトへ画像をアップロードして使う場合、意識のある方は、オンラインツールや画像ソフトなどを使ってあらかじめ画像サイズを縮小してからアップロードしますが、複数で投稿するようなサイトの場合などでは、巨大な画像のまま何の気なしにアップロードされる方も少なくありません。

今回紹介する【Imsanity】を使ことで、パソコンでの加工作業をしなくても、忘れても、WordPressやサーバーの上限ファイルアップロードサイズさえ超えていなければ画像をそのままアップロードするだけで自動的にリサイズ&圧縮をしてくれます。

また、アップロードした本当の元画像に対して画質と画像サイズの変更を行ってくれるため、「-scaled」ファイルが作られる上限以下(2560以下)に設定しておけば、余分なファイルが作られることも、使われない巨大なファイルが残ってしまうこともありません。

【Imsanity】プラグインの用途や機能

  1. パソコンで画像を圧縮する必要なくアップロードすることができます
  2. 自動で設定した大きさに画像をリサイズします
  3. 自動で設定したクオリティに画像を圧縮します
  4. アップロード済みの画像を一括してリサイズすることができます

「-scaled」画像が既に生成されている過去の画像を一括変換した場合に、本当の元画像が圧縮(変換)されるかまではテストしていません。

本ページを最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用(試用)したテスト環境・公式ページなど

この紹介記事作成にあたって、試用(テスト)を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。

  • テストサーバー:カラフルボックス
  • WordPressのバージョン:5.7.1(5.8-RC4でも動作確認済)
  • PHPのバージョン:7.4.15(PHP8.0でも動作確認済)
  • テーマ:ha-Basic(オリジナルテーマ)
  • プラグインのバージョン:本記事で紹介しているバージョン  2.7.2/最新バージョン 2.7.2
  • 公式サイト(wordpress.org上):https://wordpress.org/plugins/imsanity/
  • 公式サイト(作者サイト):

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Imsanity】プラグインの設定画面や表示画面の日本語化と翻訳

【Imsanity】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

【Imsanity】プラグインのインストールと設定方法

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

基本的な設定方法と使用方法

有効化後「設定」→「Imsanity」で設定を行います。この設定内容は以降に画像をアップロードする際から動作します。

アップロードした元画像(フルサイズ画像)の幅・高さ変更と画質の圧縮を自動で行うプラグイン「Imsanity」の画像|Knowledge Base

バージョン2.7.2では上図のように日本語化されていますので、特に戸惑うことはないでしょう。

最後の「Delete Originals」設定は、アップロードした画像で「-scaled」ファイルがWordPress側で作成された場合に、本当の元画像を削除するかの設定です。

過去画像のリサイズを行うには

【Imsanity】には過去画像への適用機能もあります。これは設定画面上で一括変換することもできますし、リサイズ可能な画像はメディア一覧に「Resize Image」というボタンが表示されるので、それをクリックして1つ1つ適用させていくこともできます。

アップロードした元画像(フルサイズ画像)の幅・高さ変更と画質の圧縮を自動で行うプラグイン「Imsanity」の画像|Knowledge Base

【Imsanity】プラグインの便利な機能

プラグインを有効化すると、メディアライブラリ一覧へ、画像の縦・横サイズの情報が表示されるようになります。通常はメディア編集をクリックしないと見えない情報なので便利だと思います。

さらに前述の「Delete Originals」にチェックを入れると、WordPress側で「-scaled」ファイルが生成されている過去画像では、メディア一覧の画像サイズ情報のところに、「Remove Original」というボタンが表示され、クリックすればサーバーから「-scaled」でない(サイト内では使わない巨大画像)を削除してくれます。

アップロードした元画像(フルサイズ画像)の幅・高さ変更と画質の圧縮を自動で行うプラグイン「Imsanity」の画像|Knowledge Base

上記削除オプションが表示されるのは「-scaled」ファイルが生成されているかどうかの判断だけで、任意に画像の編集でサイズ変更を行ったものについてはWordPressの基本動作通り、元画像はそのまま残り、サイズ変更を行った画像が新たに作られ、そちらがフルサイズの画像として扱われるようになります(つまりゴミは残ります)。

このページの更新履歴

更新日更新内容
2014年 4月29日記事公開しました
2021年 7月16日バージョン2.7.2に対応する記事へ更新しました
  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。