EWWW Image Optimizerで画像圧縮と次世代画像フォーマット変換

PageSpeed Insightsで検証した結果、かなりUser-unfriendlyなサイトになっている事が判明（こちら）。

対策１は、レンダリングを妨げるリソースの除外に挑戦し、ある程度効果が得られた（こちら）。

対策２として、次は画像サイズの縮小を検討。

画像サイズの縮小について

私は元々Photoshopで解像度を変更し、圧縮保存して、それぞれの画像を50kb以内に抑えるようにしてきたけれど、

調べると、劣化を最小限にしたままさらに画像サイズを縮小させられるよう。

因みにPhotoshopでWeb用に保存する場合、

• 通常の写真等はJPEG
• ロゴなどのはっきりした画像はPNG

で保存すると良い。

また、元々ある程度小さい画像なら、画像圧縮サイトを使うと便利。

今回は、EWWW Image Optimizerで画像圧縮を試みる。

また、次世代画像フォーマットWebPにも挑戦。

画像の一括圧縮

EWWW Image Optimizerのインストール 

管理画面 → プラグイン →新規追加 → EWWW Image Optimizerで検索 → インストール → 有効化

ベーシック：メタデータを削除にチェックを入れる → 変更を保存

写真にはレンズ焦点距離や露光量、撮影日時・場所などのメタデータが保存されているが、それらを削除する。

画像を軽くする観点でも、個人情報を護る意味でも設定するべし。

他の設定はデフォルトでOK。

変換：コンバージョンリンクを非表示にチェックを入れる → 変更を保存

Convertタブは特に触る必要はないが、コンバージョンリンクを非教示だけはチェックしておく必要あり。

画像形式の変換を意図しない形で変換しないようにする目的。

時々極端に劣化した画像になったりと、不都合が生じる事があるから。

一括最適化

1. 管理画面 → メディア → 一括最適化
2. 「最適化されていない画像をスキャンする」を選択
3. この時点で数千画像がピックアップされた。
4. 「最適化を開始」をクリック。
5. 候補画像を全て最適化してくれる → 終了。

WebPに変換

WebP（ウェッピー）は、Googleが提供する最新の静止画フォーマット。

既存の画像形式と比較して、約２，３割サイズを小さくすることが可能。

• Chrome, Microsoft Edge, Firefoxでは対応。
• Safari, IEは非対応。

WebP：WebP変換にチェックを入れる→変更を保存

ここにチェックを入れると、対応ブラウザではWebPに、非対応ブラウザではオリジナルフォーマットで表示してくれる。

表示されたコードを.htaccessファイルに追記

(1) が終了すると、コードが表示される。

※ まだWebP化されていない状態なので、画像は赤背景にPNGの文字 ↓

このコードをサーバーにアップロードする。私は、サーバ内へのアクセスにFFFTPソフトを使っている。

1. FFFTPを起動し、サーバ内にアクセス。
2. メインは、○○.com → public_html の中に、.htaccessのファイルがある。
3. サブドメインは、○○.com → public_html → サブドメインのフォルダ の中にある。
4. クリックし、ダウンロード。
5. テキストファイルで開き、トップに表示されていたコードを追記して.htaccessで保存。
6. FFFTP経由で同じ場所にアップロード。

アップロード後、画像は緑背景にWEBPの文字に変わる↓

これで、ちょっとはサイトスピードがあがったんだけれど、まだまだ赤信号の状態。

戦いは続く……

現時点での課題と対処状況

済「レンダリングを妨げるリソースの除外」

済「画像サイズの縮小と次世代フォーマットの適応」

未「使用していないJavaScriptの削除」

未「課題なROMサイズの回避」

未「アドセンスの自動広告を遅延読み込み」

References