【WebP】EWWW Image Optimizerで変換しよう!
![](https://pooloyolo.blog/wp-content/uploads/2021/05/a314d8c130b9f21e3f2a378d2b9a0686.jpg)
このブログでは、WordpressプラグインEWWW Image Optimizerを使ってJEPGやPNGなどの画像データを「WebP(ウェッピー)」変換する設定についてお話しします。
名前が可愛いですよね(*´▽`*)ウェッピー~(^^♪
WebP(ウェッピー)とは?
「WebP」とは、Googleが開発している画像フォーマットのことです。
JPEGやPNGといった画像フォーマットの一つで、次世代のフォーマットといわれています。
PNGのように背景透過が可能です。
JPEGやPNGより、25~34%のデータ量を圧縮できるとGoogleは発表しているので、webサイトの読み込みが軽くなり、読者様のストレスを軽減することができます。
しかしながら、すべてのブラウザに対応していません。
Googlechrome、Firefox、Edgeは対応しています。
WordPressプラグイン「EWWW Image Optimizer」
プラグインEWWW Image Optimizerは、インストールするだけで、画像データを自動的に圧縮して、ブログの表示速度を改善するものです。
![【WordPress】 EWWW Image Optimizerを使ってみよう](https://pooloyolo.blog/wp-content/uploads/2021/05/d99ec88815923a8548464dd82286948a-640x360.jpg)
EWWW Image Optimizerの設定で「WebP」変換
EWWW Image Optimizerの設定で「WebP」変換が可能です。
早速設定してみましょう。
「設定」から「EWWW Image Optimizer」をクリックします。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/009.png)
「基本」のタグを下の方にスクロールさせます。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/022.png)
「WebP」変換のところに✅をいれて、「変更を保存」をクリックするとコードが表示されます。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/021.png)
このコードをレンタルサーバーの「.htaccess」に挿入すると左下の赤い「PNG」が緑色の「WebP」と変わります。
エックスサーバーで説明します。
「サーバーパネル」より「.htaccess編集」をクリックします。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/015.png)
ブログのドメインを選択します。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/016.png)
「.htaccess編集」タグをクリックして、先ほどのコードを挿入します。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/017.png)
「確認画面へ進む」→「実行する」でレンタルサーバー側は設定完了です。
正常に設定が完了すると、先ほどのWordpress側設定画面の右下に緑色の「WebP」が表示されます。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/018.png)
WebPを一括最適化しよう
では、ブログで使ってきた画像データを一括で最適化してみましょう。
EWWW Image Optimizerで圧縮した画像データは、再び最適化しようとしてもスキャンしてくれないので、下の図のように2か所に✅を入れて「最適化されていない画像をスキャンする」をクリックします。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/023.png)
5579点の画像を最適化します。
15分程度かかってすべて最適化されました。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/024.png)
「完了」と表示されたら終わりです。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/025.png)
WebPになっているかを確認してみよう
画像がWebPになっているのかを確認してみます。
メディア一覧から「WebP」という文字が確認できます。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/026.png)
次に「Google chrome」で確認します。
ブログのプレビュー画面を開いたらキーボードの「F12」を押します。
すると、デベロッパーツールが開きます。
次に「再読み込み」を右クリックして、「キャッシュの消去とハード再読み込み」をクリックします。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/027.png)
下の図のように「Network」→「Img」をクリックします。
Typeが「WebP」となっていることが確認できます。
![](https://pooloyolo.blog/wp-content/uploads/2021/05/028.png)
以上で「WebP」への変換は完了です。
![「ワードプレス」【画像】のサイズを圧縮してみよう](https://pooloyolo.blog/wp-content/uploads/2020/10/9e422637633326abb96c56a3852f2bbc-640x360.png)
おわりに
いかがだったでしょうか。
今回のブログでは、「WebP」についてお話しさせていただきました。
「WebP」とはJPEGやPNGといった画像フォーマットのひとつで次世代のフォーマットです。
JPEGやPNGよりデータ量を軽減できるのでwebサイトの読み込みが軽くなります。
しかしながら、全てのブラウザに対応していないというのが現状の様です。
今後、「WebP」がどのようになっていくのかが楽しみですね。
最後まで読んでいただいてありがとうございました。
![PVアクセスランキング にほんブログ村](https://blogparts.blogmura.com/parts_image/user/pv11083824.gif)
![]() にほんブログ村 |
![]() にほんブログ村 |
![]() にほんブログ村 |