EWWW Image OptimizeでWebP画像変換のメリットデメリット
EWWW Image OptimizeでWebP変換導入の解説
サイトの表示速度について「ウェブページの読み込み時間を短くしましょう」とGoogleが強く推奨しています。
↓サイトの表示速度チェックはこちらのパラメーターで確認できます。
>> Google PageSpeed Insights グーグルページスピードインサイツ
よくサイトの重量問題での原因で言われるのが、画像が重いことです。
WordPressの記事更新時に、スマホで撮影した画像やフリー画像をそのままアップロードし続けることでサイトが重くなります。
その結果表示速度が遅くなり、Googleの評価が下がって検索順位が落ちる、という内訳です。
今回は画像のリサイズや解像度に無頓着な方でも表示速度を下げないですむ、画像ファイル「webP(ウェッピー)」への自動変換についてお伝えしたいと思います。
更に一歩踏み込んで、プラグインEWWW Image OptimizeでのWebP自動変換機能を使うメリット・デメリットを解説します。
1、次世代画像形式「webP(ウェッピー)」とは
次世代画像形式「webP(ウェッピー)」とは、JPEG2000 や JPEG XR の画像形式と並ぶ最新の画像形式です。
画質が劣化することなく圧縮され、容量が軽いのが特徴です。
SEO対策としてホームページの表示速度を上げるのに取り入れるのが必須となると予想されます。
ちなみにスマホやiPhoneで写真を撮るとjpeg形式で、特にサイズ変更をしなければ大きなサイズで格納されます。
大きな画像は重いため、そのままサイトにアップロードするとサイトの表示速度は遅くなる、ということになります。
2、EWWW Image OptimizeでwebP自動変換の導入方法
ある程度デジタルやアプリに明るい方の場合は、自分で画像を適正サイズにリサイズし、さらに画像を圧縮したりしてからWPサイトに画像アップロードをするのが、当たり前になっているかもしれません。
しかしそういった手間をかけたくない人や、画像やアプリに疎い方にはこちらがオススメです。
アップロードした画像をWebPに一括変換し、更に今後アップロードする画像がwebPに自動変換されるプラグインの導入です。
プラグイン「EWWW Image Optimize」の設定方法をお伝えします!
EWWW Image Optimizer のインストール方法
WordPress管理画面の身左メニューの「プラグイン」 →
「新規プラグインを追加」をクリック →
右上の検索窓に「EWWW Image Optimizer」と入力 →
「今すぐインストール」をクリック →
「有効化」をクリック →
最初に出た画面は右下の、「二度と表示しない」をクリックし、次に進みます。
詳細設定
左メニューの「設定」をクリック →
「EWWW Image Optimizer」で設定画面を開く
「メタデータを削除」「WebP変換」この2つにチェックを入れて「変更を保存」をクリック
画面の上の「ルディクロスモード」をクリック →
「変換」タブを選択し、「変換リンクを非表示」にチェックを入れ、下にある「変更を保存」をクリック
Webp変換の設定方法
「Webp変換」にチェックを入れた際に、コードが出てきました。
その下にある「リライトルールを挿入する」をクリック →
「ルールが正常に検証されました」と表示、ボタンが緑色でWEBPと表示されれば完了
もし赤いままでしたら、コードをコピペして、レンタルサーバーにアクセスし「.htaccess」に以上を追記します。
</IfModule>の直前に加筆して下さい。ボタンが緑色でWEBPと表示されれば完了です。
今後アップロードした画像は自動で圧縮とWebPに変換されます。
ですが、 EWWW Image Optimizerのインストール前にアップロードした画像は手動で最適化する必要があります。
手動で最適化する設定方法
WordPress管理画面の身左メニューの「メディア」の「一括最適化」をクリック →
「最適化されていない画像をスキャンする」をクリック →
すると最適化できる画像が抽出されるので「画像を最適化」をクリック
時間がかかることも多いので、しばし待ちます。
最適化が終了したらメディアを開き確認します。
Webpになっていない際はEWWW Image Optimizerで最適化をもう一度、行います。
「WebPのみ」にチェックを入れる →
「最適化されていない画像をスキャンする」をクリック、これで完了です。
もしそれでもダメでしたら「メディア」を開き、右側の部分、手動で1枚づつ最適化を行って下さい。
3、WebP自動変換のメリット・デメリット
EWWW Image Optimizer でこれまでアップロード済み画像を一括変換した後に、ワードプレスの画像ファイルが格納されている「uploads」フォルダにアクセスしてみました。
すると、もともとの画像(jpg)はそのまま残っており、加えてWebP画像が生成されていました。
つまり、画像を1枚アップロードすると webP画像 が自動生成され、それがブラウザに読み込まれることで、元々の画像よりも軽いので表示速度が上がる、ということです。
WebP形式に返還というよりは、新たにwebP形式画像の自動生成されて元画像と一緒に格納される、というのが近いです。
「これはもしかして、、」とサイトサイズ(重さ)を確認したら、WebP導入後の方が重くなっていました。
要約すると「表示速度は上がるけれど、画像枚数(重量)は増える」のです。
WWW Image Optimizer の「WebP変換」解除してみると
フォトショップスキルがあるので、元々画像はサイトに適した形でアップロードしていました。
画像がサイトを圧迫することもないことから、WebPに自動変換にする必要も今の所あまりありない、
そう判断した上で、元に戻そうと思い、EWWW Image Optimizer の「WebP変換」解除しました(上の2の工程を元に戻しました)。
新たにアップロードする画像はWebP形式に自動返還はされなくなりました。
が、既に生成されてしまった WebP画像 はそのままです。
プラグインを停止しても元に戻ることはなく、自分自身で破棄しない限り生成されたWebPは残ります。
JPG画像を削除してみると
試しにFTPで「uploads」フォルダから、WebP画像は残して元々のjpg画像を削除してみました。
すると投稿ページで画像が表示されなくなりました。
つまり、元画像と変換されたWebPの両方が揃っていないと、ブラウザへのアプローチ(表示速度UP)は機能しないことが判明。
表示速度上げるには、元画像と変換されたWebPの両方が必要
WebP画像を取り入れるのに
最終的には、FTPで「uploads」フォルダから、WebP画像を手動で全て削除しました。
もしくはEWWWの「WebP画像を一括削除」で、できるかもしれません。
今後はアップロードする画像を自分でjpgからwebPにフォトショで書き換え保存して、サイトにアップロードすることにしました。
これが今の所、メリットが大きくデメリットが少ないかなと。
もし、画像の知識がない、またストレスなく画像を投稿で使用していきたい、更に表示速度を上げたいのであれば、プラグインEWWW Image Optimizer で「WebP変換」を取り入れるのが良いでしょう。
しかし自動で簡単な裏にはメリットと共にデメリットを見極め、自分で補える部分は手動で行い、苦手なところをカバーする形で取り入れる、ベストな選択をして下さい!
マッチングサイトに先生登録しませんか!?