シェアする

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う

シェアする

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う

thum063

前回の記事「サイトのスピードをチェックしてみました!」で、私のサイトは中々に表示が鈍足なのが痛いほど分かりました。

今回は赤点っぽいスピードを改善してくれそうなプラグインから「EWWW Image Optimizer」を紹介です。

スポンサーリンク

「EWWW Image Optimizer」とは

「EWWW Image Optimizer」は画像圧縮のプラグインで、サイトで使用する、使用している画像のファイルサイズを縮めてくれる働きをしてくれます。

画像をいっぱい使っているサイトほど、その効果は高いと考えました!

このサイトも解説に一ページ平均10枚、サイドバーに表示される画像も考えると中々の画像率です。

さっそく「EWWW Image Optimizer」を利用して、サイトの高速化を目指していきます。

「EWWW Image Optimizer」をインストール

おなじみ「プラグイン」→「新規追加」で、「EWWW Image Optimizer」を検索します。
画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う01

二つ「EWWW Image Optimizer」がでてきて少々戸惑いましたが、語尾に「Cloud」がついている方ではないですね。
通常の方を選びましょう。

「EWWW Image Optimizer」設定画面

インストール後「有効化」で、「設定」に「EWWW Image Optimizer」の項目が追加されております。
クリックして設定画面を見ていきましょう。
画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う02

かなり、英語です。
WordPressではお馴染みとも言えるでしょう。
画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う03

苦手な方もいらっしゃると思いますが、狙いを絞ればチェックする箇所はけっこう少ないので恐れずいきましょう。

左から

「Cloud Settings」
「Basic Settings」
「Advanced Settings」
「Conversion Settings」

の4つのタブがありますが、いきなり最初の「Cloud Settings」が有料オプション設定なので、私のように無料でこのプラグインを利用させて欲しい人だと触れる機会が無いタブだったりします。

Cloud Settings(有料クラウド設定)

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う03

ほぼ全てのチェック項目に「Cloud」の文字がついております。
クラウドを使った有料サービスの項目です。

先ほどお伝えしたとおり無料でこのプラグインを利用させて欲しい人だと触れる機会が無いタブなので、特にチェックするところはありません。

Basic Settings(基本設定)

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う04

「Debugging」
「Remove metadata」
「Lossy JPG optimization」
「Lossy PNG optimization」
「Bulk Delay」

の4つの項目があります。

2つの「Lossy…」の所の「WARNING」(警告)がちょっと気になりますが、「ほとんどのユーザーは気付くほどではありませんが、非可逆圧縮すると画質が劣化しますよー」ということが述べられています。

画像編集ソフトでJPGの保存とかやったことのある人ならお分かりかもしれませんが、よほど圧縮レベルを上げなければ劣化は気にならないレベルです。

早い話、ここで重要なのは上から二番目の「Remove metadata」だけです。

「Remove metadata」は画像データに入っている情報(Exif)を消去して容量を減らすかどうかのチェック項目です。
Exifにはカメラの種類などの他に、モノによってはGPS(撮影場所情報)まで入っていたりするので、ここはチェックしておくのをおすすめします。

Advanced Settings(詳細設定)

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う05

詳細設定画面だけに他のタブより縦長になってますが、実はなにもタッチしなくて良かったりします。

一応一番上の「optipng optimization level」の数字を上げることで圧縮回数を上げることができますが、上げすぎると当然画像の劣化が目立ってきます。

Conversion Settings(変換設定)

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う06

こちらも複数のチェックボックスが見えますが、気にするところは一番上の「Hide Conversion Links」です。

ここにチェックを入れると、JPG画像をPNG画像に、もしくはその逆に変換できる機能を非表示にできます。
逆にその機能が必要だ!という場合はチェックを外しておいてください。

ということでチェック項目は以上です。
チェックをつけ終わったら画面下の「Save Changes」を忘れずに。

新規追加した画像を圧縮してもらおう!

「EWWW Image Optimizer」を有効化したら、メディアライブラリで新規追加した画像が自動的に圧縮されます。

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う07

新規追加した画像をメディアライブラリで確認してみると、「Image Optimizer」の列が追加されていて、一画像ごとに

・Reduced by ~(圧縮した率と削減できたサイズ)
・Image Size: (元画像のファイルサイズ)
・Re-optimize (再圧縮ボタン)

と3つの情報が表示されます。

すでに入っている画像も全部圧縮してもらおう!

「メディア」の「Bulk Optimize」で行います。

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う08

「Bulk Optimize」画面の「Optimize Media Library」の「Start optimizing」で一括圧縮処理開始です!

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う09

処理が開始されます。しばらくお待ち下さい…

画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う10

元々こうして処理された画像の圧縮具合を見てみると、もともとそんなにファイルサイズが大きい画像使っていなかったなーと今さらながら思ってみたり。

「Finished」が表示されたら処理完了です。
画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う11

「EWWW Image Optimizer」でサイトの画像を全部圧縮した結果

こちらが圧縮前の「PageSpeed Insights」の採点。
画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う12

そしてこちらが「EWWW Image Optimizer」で画像をシェイプアップした後。
画像圧縮で速度UP&容量削減ができる「EWWW Image Optimizer」を使う13

あ、あまり変わっていないような…
いや、こういう細かな容量の節約が積み重なって軽いサイトになる…はずです。多分。

まだまだサイトの高速化の手段はあるので、色々試していこうと思います。

スポンサーリンク

シェアする

コメントをどうぞ

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)