前回の記事では画像の拡張子をWebPに変換して読み込み速度を早くする方法を記載しました。
今回は今後アップロードする画像や、既にアップロードされている画像の横幅や高さを自動的に調整し、容量を抑えてくれるプラグイン「WWW Image Optimizer」の使い方や設定をご紹介します。
こちらもPageSpeed Insightsのスコアを伸ばしてくれるので是非活用しましょう。
画像サイズは意外と意識しないと見落としがちです。しっかりと容量を抑えてサイトの表示速度を上げていきましょう！
EWWW Image Optimizerの設定
プラグインのインストールは前回の記事でも説明してあるのでそちらは省きます。
初期設定
インストールが完了したら設定画面を開きましょう。
設定画面の開き方は上記画像のように「設定」→「EWWW Image Optimizer」の順でクリックします。
すると上記のような画像が表示されるので「サイトを高速化」と「今は無料モードのままにする」にチェックを入れたら「次」ボタンをクリックします。
続いて上記のような画像が表示されるので、問題がない場合は「設定を保存」をクリックします。
ただし、使用しているWordPressのテーマによっては不具合が起きるので、その都度設定を変更しましょう。
メタデータとは画像内にある情報のことで、どんなカメラで撮影されたとか、どこで撮影されたなどのデータになります。
ちなみに自分はWordPressのテーマに「Cocoon」を使ってるのですが「遅延読み込み」をONにすると画像が読み込まれないので設定をOFFにしています。皆さんもご自分のテーマに合わせて設定してください。
また、前回の記事を読んで既にWebPに自動変換設定をした方は「WebP変換」のチェックを外しておきましょう。
「幅の上限」と「高さの上限」は画像の最大サイズを指定サイズまで自動的に調整してくれます。
自分のサイトの場合はそこまで大きくなくても大丈夫なので1000pxに設定しています。
ここは特に触るところがないのでそのまま「完了」ボタンをクリックします。
これで初期設定は完了ですが、もう少しだけ設定を変更します。
変換、リサイズを設定する
初期設定が完了したら上記のような画面が表示されるので、左上の「Enable Ludicrous Mode」をクリックします。
するとタブの数が増えるので「変換」タブをクリックします。
そして「変換リンクを非表示」のチェックを入れて「変更を保存」をクリックします。
続けて「リサイズ」のタブをクリックし「既存の画像をリサイズ」と「他の画像をリサイズ」にチェックを入れます。
こちらも設定後「変更を保存」をクリックしましょう。
アップロードした画像を圧縮する
設定が完了したら、既にアップロードしている画像を一括で最適化しましょう。
「メディア」→「一括最適化」の順でクリックします。
一括最適化のページが表示されたら「最適化されていない画像をスキャンする」のボタンがあるのでクリックして最適化できる画像を探します。
なお、画像の枚数が多いとスキャンに少し時間がかかるので、気長に待ちましょう。
スキャンが完了すると「最適化できる画像が〇件あります」表示されるので「画像を最適化」のボタンをクリックしたら画像の最適化が始まります。
以上の操作がEWWW Image Optimizerの使い方になります。
ちなみに、新しく画像をアップロードすると自動的に画像が最適化されるので、毎回スキャン→最適化する必要がないので、かなり手間が省かれます。