アップロード済みの画像ファイルを圧縮するプラグイン「EWWW Image Optimizer」

Money Crush (105/365) By: Rocky Lubbers

Webページ読み込み速度は、ページの価値を決める要因の1つとなっています。

そのため、ページの価値を上げたいときは少しでも読み込み速度を早くする必要があります。

Googleがついに順位決定に表示速度を使い始めた(公式発表)

Webページの読み込み速度を上げるためにはページの容量を減らすことが1番です。

特に当ブログの様に文字と画像が主な構成要素の場合は、画面の容量を減らすことで読み込み速度が簡単にアップします。

「EWWW Image Optimizer」は、アップロード済みの画像を一括で圧縮してくれ、これから先アップロードする画像も自動で圧縮を行ってくれます。

EWWW Image Optimizer
  1. EWWW Image Optimizerの設定
  2. アップロード済みの画像の一括圧縮

EWWW Image Optimizerの設定

まずは「EWWW Image Optimizer 」をインストールし有効化します。
Autoptmize
「設定」>「EWWW Image Optimizer」をクリックして設定画面に移動します。
EWWWImageOptimizer2

「EWWW Image Optimizer」での設定は大きく分けて以下の4つがあります。

Cloud Settingsクラウドを利用した画像の最適化(有料)
General SettingsEWWW Image Optimizerの基本設定
Optimization Settings画像の最適化の設定
Conversion Settings画像変換の設定

Cloud Settings

Cloud Settingsを行うためには、有料のAPI Keyを取得する必要があるため、今回は説明を省きます。
CloudSetting

General Settings

General Settingsは特に変更しなくても問題ありません。
General Settings
Settings
Debuggingプラグインに問題が発生した場合にトラブルシューティングを行う
Scheduled optimization一定時間ごとに画像フォルダをスキャンし最適化を行う
Folders to optimizeWordPressのフォルダ外をスキャンする場合、その相対パスを記載する
Bulk Delay画像の最適化後の停止時間の設定
※大量の画像を一回で最適化するとサーバに負荷がかかるため、画像間で停止時間を設ける
Use System Paths利用するツールを別の場所にいれた場合にチェックを入れる
※pngout(pngファイルの最適化ツール)はデフォルトで入っていないため、別のシステムパスにインストールした場合などに利用
disable jpegtranjpegの最適化ツール(jpegtran)を無効にする
disable optipngpngの最適化ツール(optipng)を無効にする
disable pngoutpngの最適化ツール(pngout)を無効にする
※デフォルトでは入っていないため無効にするにチェックが入っている
disable gifsiclegifの最適化ツール(gifsicle)を無効にする

Optimization Settings

ここでは、画像の最適化の設定を行います。

Remove metadataにチェックを入れ、後はデフォルト設定のままにします。
OptimizationSettings
Settings
Remove metadataメタデータ(画像の位置情報、作成日時や作成者)の削除
※メタデータを削除することで容量が減らせるため、チェックを入れておきます
optipng optimization leveloptipngの最適化レベルの選択(※レベルが高いほど圧縮率が高くなる)
pngout optimization levelpngoutの最適化レベルの選択(※レベルが高いほど圧縮率が高くなる)
Lossy PNG optimization非可逆の最適化を行う
※元に戻せ無くなるため、注意してください
Exclude full-size images
from lossy optimization
フルサイズ画像(元画像)は非可逆の最適化対象外とする

Conversion Settings

「jpegからpng」や「pngからjpeg」の変換を行わない場合は、デフォルト設定のままにします。
ConversionSetting
Settings
Hide Conversion Links※この設定については使用方法が不明
Delete originals元画像を削除する
enable JPG to PNG conversionjpegからpngへの変換を行う
enable PNG to JPG conversionpngからjpegへの変換を行う
enable GIF to PNG conversiongifからpngに変換を行う
最後に「Save Changes」をクリックして設定を保存します
save

これで以降にアップロードした画像は自動で最適化が行われます。

アップロード済みの画像の一括圧縮

アップロード済みの画像を圧縮する場合は「メディア」>「Bulk Optimize」に移動し、「Import Images」をクリックします。
importImages
このメッセージが表示されたら、再度画面を開きなおします。
importImages1
開き直すと、このような画面が表示されますので「Start optmizing」ボタンをクリックし、画像の最適化を行ってください。
importImages2
※最適化する画像が多い場合は上のバーを右に移動させ、画像の最適化完了から次の画像の最適化を行うまでの最適化処理の停止時間を設定してください
(画像が少ない場合や、サーバの負荷を意識する必要が無い場合は初期値のままで問題ありません)
importImages3
ボタンをクリックすると、このようにアップロード済み画像の最適化が行われます。
importImages4

処理が終われば、アップロード済み画像の最適化が完了となります。

divider

Trackback URL

http://webnonotes.com/wordpress/ewww-image-optimizer/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>