EWWW Image OptimizerとImsanityで画像の圧縮率とサイズを最適化 – プラグインの導入と設定

EWWW Image OptimizerとImsanityで画像の圧縮率とサイズを最適化 – プラグインの導入と設定

EWWW Image OptimizerとImsanityで画像の圧縮率とサイズを最適化 – プラグインの導入と設定

ページの読み込み速度の改善には画像の圧縮と必要最小限のサイズにすることが重要です。ちなみに、WordPressは何も設定しないとオリジナルの画像以外にも自動的にいくつか別のサイズの画像を作成してしまうのですが、DB容量の削減を目的にするには自動的に作成しないようにすることが重要です。

デジタルコンテンツ販売サイトを作る際は、圧縮やサイズ変更の対象に販売用のコンテンツが含まれないように注意が必要です。その辺りのテストも兼ねてプラグインを二つ導入します。

EWWW Image Optimizerプラグイン

画像を圧縮するために以下のプラグインを導入します。

圧縮だけでなく、画像ファイルのmetaデータも削除できます。

設定>EWWW Image Optimizer

設定項目は多いので、目的や好みに合わせた設定ができます。ここでは私の目的に沿った設定を紹介しておきます。今後変更すると思いますので、その都度更新しておきます。

有料オプションとなる「Cloud Settings」は使いません。

Basic Settings

先ずは、「Basic Settings」の設定項目です。

画像のmetaデータは容量に関わらず消しておきたいので、「Remove metadata」をチェックします。

Advanced Settings

次に、「Advanced Settings」の設定です。

画像ファイルのアップロード時に圧縮処理をさせたい場合は下記の「バックグラウンド処理」の設定は不要です。「Disable Resizes」まで読み飛ばしてください。

画像ファイルのアップロード時に画像のサイズ調整もさせたい場合は、この記事の後半で紹介するImsanityプラグインで実現できます。

それぞれの処理が競合してしまわないかと調べてみましたが、EWWW Image Optimizerプラグインの作成者自らサポートフォーラムで問題ないと回答してくれています。

バックグラウンド処理

アップロード後にバックグランドで実行させたい場合には、「Scheduled Optimization」にチェックします。

1時間単位で誰かがウェブサイトにアクセスしたタイミングで処理が実行される動作になります。

手動による一括処理とスケジュールによる処理の対象とするディレクトリを「Folders to Optimize」で指定します。

ここでのディレクトリの指定には、ルートディレクトリ(例えば、/home/~)から対象とするディレクトリまでのフルパス(相対パスは使えません)が必要になります。ここで指定するディレクトリのフルパスとは、URLではありませんので注意してください。

また、複数のディレクトリを指定する場合は、1行に1パスを記載して指定します。

レンタルサーバーの場合などルートディレクトリからのパスがわからない場合は、以下のphpファイルを対象としたいディレクトリに作成して確認する方法が簡単です。

対象としたいディレクトリにアップロードした画像ファイルのURLを参考に、phpファイルのURLを確認したらブラウザでphpファイルにアクセスしてください。ブラウザにphpファイルのパスが表示されます。

「Disable Automatic Optimization」にチェックを入れると、アップロード時に処理しなくなります。

Disable Resizes

以下の「Disable Resizes」にて、圧縮する対象から除外する画像サイズを指定できます。ここではさらに自動的に作成されてしまう画像サイズを作成しないようにも設定できます。

DB容量を無駄に増やしたくない場合はここで使っていない画像サイズを作成しないように変更してください。

圧縮済みかどうかは、メディアライブラリで一覧を見るとわかるようになっています。一覧から個別に圧縮処理することも可能です。

Conversion Settings

最後は、「Conversion Settings」の設定です。画像形式を変換しない場合は設定不要です。

メディアライブラリの一覧に変換するためのリンクが表示されますが、不要なら「Hide Conversion Links」をチェックすることで非表示にできます。

画像変換させたい場合は、必要に応じて設定してください。

メディア>Bulk Optimize

手動で一括処理させたいときは、メディア>Bulk Optimizeから以下の画面に遷移して、「Start Optimizing」をクリックすることで実行できます。

EWWW Image Optimizerプラグインについての説明は以上です。

Imsanityプラグイン

次に、アップロード時に画像サイズの横幅を自動的に変更するために、Imsanityプラグインを導入します。

設定>Imsanity

変換設定は単純です。

変換対象として、ページ・記事内への画像追加の場合、メディアライブラリに直接アップロードする場合、それ以外へアップロードする場合とに分けてサイズ指定できます。

既にアップロード済みの画像ファイルに対しては、「Bulk Resize Images」で一括処理できます。一括処理させたい場合は「Search Images…」をクリックして進んでください。

元に戻せない処理なのでバックアップを取っておくことをお勧めします。

最後に

以上で、意識せずに画像ファイルの圧縮とサイズ変更できるようになります。

変換後の画像品質やページの読み込みに掛かる速度を比較して目的に合った設定にしてください。

DBの容量を減らすには、使っていない自動生成される画像ファイルを削除することと、自動生成させないように設定することが重要です。

Related Posts