「次世代フォーマットでの画像の配信」をプラグイン　EWWW Image Optimizer　でスピード解決する方法

PageSpeed Insights　改善シリーズの新作です。

▼該当記事

2022.05.27

超簡単！ページ表示速度の改善方法は、PageSpeed Insightsが診断した上で改善方法を提示してくれます

ぺージの表示速度の改善方法 Webサイト(ホームぺージ)をクリックしてページが表示するまでに3秒以上かかってしまうと、半数以上のユーザーが...

今回は、「次世代フォーマットでの画像の配信」についてお伝えいたします。

EWWW Image Optimizerとは

EWWW Image Optimizerとは、画像を圧縮して表示速度を高速化するプラグインです。
ただ圧縮するではなく画像を劣化させることなく画像サイズを圧縮してくれます。

プラグインをインストールしておくだけで、新しくアップロードする画像を自動的に圧縮してくれる優れもの！！

また既存の画像も一括で圧縮できるので、SEO対策には欠かせないプラグインです。

EWWW Image Optimizerが出来る事

そんなEWWW Image Optimizerは画像を圧縮してくれるほかに、次世代フォーマット画像WebPへの変換作業もできるという優れものです。

そう！「次世代フォーマットでの画像の配信」問題はEWWW Image Optimizerを利用した次世代フォーマット画像WebPへの変換という事で解決です。

WebPとは

WebP（ウェッピー）とは次世代フォーマット画像の一つで、高圧縮でありながら、高解像度を維持できるGoogleが開発した画像拡張子です。ファイルの拡張子は「.webp」と表示されます。

jpegと同じ解像度にも関わらず、30％近く容量が軽く、アニメーションの表現もでき、PNGのような透過表現にも対応しています。まさに次世代の画像フォーマットですね。

では、早速にインストールしていきましょう。

インストール方法

プラグインの新規追加で検索窓にewwwと入れると検索結果に出てきます。

【今すぐインストール】をクリックし、有効化すれば完了です。

設定方法

プラグインからEWWW Image Optimizerを探して【設定】をクリックします。

初期設定

上側のチェックボックスは目指す目標を選択します。
選択した方に最適な設定を推奨してくれるようになります。
今回はサイト表示スピードの向上が目的なので【サイトの高速化】にチェックを入れます。

下側のチェックボックスは有料のサポートが必要か、無料モードの選択になりますので【今は無料モードのままにする】にチェックを入れて【次】を押します。

基本的にはデフォルト状態のチェック項目のままで問題ありません。

• メタデータを削除
  メタデータとは簡単に言えばデータのデータです。作成日やサイズなど、写真の場合は撮影した位置情報もメタデータです。
• 遅延読み込み
  遅延読み込みはファーストビュー以外の画像を後から後から表示します。初期表示の高速化になりますのでチェックしておいてください。
• WebP変換
• 1920幅の1920高さの上限で設定してください。
• 埋め込みヘルプ
  チェックあり。
• 著名の報告
  チェックなし。

以上を確認して頂いて【設定を保存】を押します。

【完了】を押せば初期設定は以上です。

基本設定

不足している寸法を追加にチェックするとレイアウトシフト対策になります。
不都合が起きたらチェックを外しましょう。

また、ブログで使用する画像幅を均等にする場合は画像のリサイズの幅を設定してください。
アップロードする画像が指定したピクセルより大きければ自動的にリサイズしてアップロードしてくれます。ただ大きく表示したい画像もリサイズされてしまうので注意しましょう。

WebPの設定

アップロードする画像を自動的にWebPに変換する設定です。

【WebP変換】にチェックを入れると、その下に.htaccessに書き足すコードが出てきます。これはWebP非対応のブラウザに対し、jpgやpngを代用する設定になります。

.htaccessはftpを使用して編集をします。ftpの使用方法は下記の記事を参考にしてください。

▼参考記事

2022.04.15

FFFTPの基本的な使い方をダウンロード方法から解説します

FFFTP（エフ・エフ・エフ・ティーピー）とは、Windows専用の無料で使える日本人が開発したFTPクライアントソフトウェアです。...

新しいブラウザはほぼWebPに対応していますが、古いブラウザや非対応のブラウザのために画像を表示できるようにする設定です。

コードは# END WordPressの直前にペーストすればOKです。
ペーストが完了したら保存しましょう。

.htaccessの編集が完了したら【リライトルールを挿入する】を押します。

緑色でWebPに変更されれば完了です。
【変更を保存】を押して設定を保存して下さい。

以上でこれからアップロードする画像は次世代フォーマット画像へ自動的に変換されます。

画像のWebP変換と圧縮

次はアップロード済みの画像の変換・圧縮作業に移ります。
引き続き設定画面での作業です。

設定画面の上の方にある【一括最適化】を選択します。

【最適化されていない画像をスキャンする】を選択します。
※一括最適化はWordPressダッシュボードのメディア→一括最適化があります。どちらから作業しても大丈夫です。

最適化できる画像が〇〇点ありますと出るので【〇〇点の画像を最適化】を押します。

完了になれば最適化終了です。

まとめ

簡単な操作で次世代フォーマットの画像に一括変換でき、アップデートする画像も自動で次世代フォーマットに変換してくれとても便利です。

もし、上手く設定出来ない時はエクセレントまでご相談頂ければと思います。

▼該当サービス

SEO対策が得意なホームぺージ制作会社エクセレント