次世代フォーマットでWebPへ変換!EWWW Image Optimizerの設定
こんにちは。
今日はサイト作成に欠かせない「次世代フォーマットWebP変換」を、画像を圧縮してくれるプラグイン「EWWW Image Optimizer」を使用しているなら、とても簡単な設定方法をお知らせしたいと思います。
次世代フォーマット WebPとは
WebPとは画像のフォーマット(どんな形で保存表示するかの形式)でスマホなどの普及でより軽く表示される画像が必要になってきています。
サイトを作り始めていくと、自分のサイトの性能SEOなどをチェックツールの「Lighthouse」やこのサイトでもインストールしている「Site Kit by Google」の中の機能「PageSpeed Insights(ページスピードインサイト)」などでも確認することができます。
サイトの採点はモバイル(スマホなど)でサイトを表示した時とパソコンで表示した時と二つで調べる事が出来ます。
現代はモバイルでの表示が多いので「モバイル」のテストをお勧めします。
テスト項目は
パフォーマンス(サイトの読込&表示スピード)
アクセシビリティ(サイトが見やすいか、検索エンジンに最適な作りになっているか)
ベストプラクティス(モバイル対応されたサイトでパフォーマンスはどうか)
SEO(サイトが検索されたときの状態はいいか)
PWA(プログレッシブウェブアプリと言われていてスマホなどのアプリに対応しているのか)
このテストで悩んでいたのがパフォーマンスで、この時に問題になってくるのが
「画像を次世代フォーマットでの提供」
と言う欄がサイトのパフォーマンス点数を大きく下げてしまっていました。
ファイル形式は「PNGやJPEGよりも優れた圧縮を提供します」と記載しています。
そこで「WebP」への画像変換を調べ始まました。
WebPファイル形式表示はプラグインと
WebPへ画像を変換するには、「プラグイン」だな。
と色々探していると、ありました。
画像関係のプラグインはすでに「EWWW Image Optimizer」をインストールしていますので、「干渉しないのかな?交換したほうがいいのかな?」と悩んでいる時、EWWW Image Optimizerの設定画面を調べていました。
???
基本設定の中に「WebP変換」の項目が???
EWWW Image Optimizerのプラグインの説明を読んでいくと
「インテリジェントな変換オプションを備えたアダプティブステアリングにより、ジョブに適した画像形式(JPG、PNG、GIF、またはWebP)を取得します。」
???
EWWW Image Optimizerでも出来るって事?
EWWW Image OptimizerでのWebP変換方法
EWWW Image Optimizerで出来るなら余計なブラグインは入れなくていいよね。と思い早速WebP変換作業へ
WPの管理画面メニューから「設定」➡「EWWW Image Optimizer」をクリック
基本設定の「WebP変換」の「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックを入れます。
すると画面が変わり、「リライトルールを変更する」をクリックすると、画像の配信方法がPNGからWebPに変更したではないですか!
下へ移動し設定保存をしっかりクリックし保存します。
出来た!と思いますが、これだけではWebPでの画像が表示されません。
今までアップし公開してきた画像をリライト(もう一度WebPに作り直す)作業をしなければいけないのです。
管理画面メニューから「メディア」➡「一括最適化」をクリックします。
今回初めてWebPに変換作業をするなら右にある項目で「再最適化を強制」と「 」にチェックを入れます。
「最適化されていない画像をスキャンする」をクリックします。
ほどなくして「○○○点の画像を最適化」と出ますので、クリックしますが!!長年制作しているサイトだと結構な時間がかかります。
(自分のもう一つのサイトでは3時間ぐらいかかりました)
と言う事で、支障が出ないじかんを見計らって最適化してください。
最適化が終了すると「完了」でサイトの表示画像はWebP形式に変更されました。
確認でサイトの画像を右クリックして「画像を保存」を選ぶと、保存ホルダーに表示されるファイルの形式は「WebP」になっていればOKです。
WebPのまとめ
WebPなんて以前は無かった形式なのですが、どんどん進化しているって事なんですね。
WebPへ変換は先ほど話したように、長年運営しているサイトはとても時間がかかります。
私自身WebPに変換する作業は、検索することから色々試したりと結構時間がかかりました。
サイトを作り始めたなら、真っ先に設定しておいた方がいい一つのアイテムと思い紹介してみました。
これで軽くてパフォーマンスが優れたサイトの始まりですね。
ディスカッション
コメント一覧
まだ、コメントがありません