一つ一つ画像をWebPに変換するのは面倒くさい
WordPressのサイトをもっと高速で表示させたい
次世代画像フォーマットWebP(ウェッピー)
WebPとは、Googleが開発しているWeb向けの画像フォーマットで、Web上に掲載される画像のファイルサイズの圧縮を目的としています。
WebPで画像を圧縮すると、一般的に利用されているJPEG形式の画像と比べて、約25～34%近くデータ量が削減することが可能です。
このことでWebページ上での画像の読み込み速度が速くなり、Webページの読み込み速度を向上させることが出来ます。
しかも見た目的には、ほぼ変わりません(よーく見ると、ほんの少し画質が落ちてるかな？程度)。
綺麗な画像を紹介するサイトでなければ、ぜひ導入したいフォーマットです。
WebPに対応しているブラウザ
2019年5月現在、残念ながらすべてのブラウザが対応しているわけではありません。
特にApple系は全く対応しておらず、他に有名どころだとInternet Explorerも対応していません。
しかしながら、今では多くの企業サイトでもWebPを使っているとの情報もあり、今後スタンダードなフォーマットになっていく可能性もあります。
今回紹介するWebP化する方法は、対応していないブラウザで閲覧すると元の画像(JPG・PNG)が表示されるので安心です。
WordPressはデフォルトでWebPに対応していない
これもWebPを導入するにあたって障害となる点です。
ですが、今から紹介する「EWWW Image Optimizer」というプラグインを使えばWebPをWordPressに対応させることが出来ます。
それでは「EWWW Image Optimizer」を使ってWordPressの画像をWebP化していきましょう。
「EWWW Image Optimizer」で画像を一括でWebP化
ここからは「EWWW Image Optimizer」の導入から設定方法、画像をWebP化する方法をご紹介します。
※ インストール前にWordPressのバックアップを取ろう。
新しいプラグインをインストールすると、たまに不具合が起こる可能性がありますので、いつでも復元できるようにしましょう。
「EWWW Image Optimizer」のインスートールと有効化
まずは「EWWW Image Optimizer」をインストールしましょう。
WordPressの管理画面、左側メニューの「プラグイン」→「新規追加」を選択し、③の検索窓に「EWWW Image Optimizer」と入力します。
「EWWW Image Optimizer」が表示されたら「今すぐインストール」をクリック。
インストールが終わったら「有効化」をクリック。 
これで「EWWW Image Optimizer」のインストールと有効化は完了です。
EWWW Image Optimizerの設定方法
WordPressの管理画面、左側メニューの「設定」→「EWWW Image Optimizer」を選択。
次に画面上のタブから「WebP」を選択し、「JPG,PNG から WebP」のチェックボックスにチェックを入れ、「変更を保存」をクリックします。
するとその下に下記の画像の部分が表示されます。
赤枠の部分をコピーし、「.htaccess」に追記をします。
「.htaccess」ファイルに追記
慣れていないと、ここが一番難しく感じるところかもしれません。
方法としては、
- FTPソフトを使って「.htaccess」ファイルをアップロード
- サーバーの管理画面から直接「.htaccess」ファイルを編集
このどちらかになります。
今回は「サーバーの管理画面から直接「.htaccess」ファイルを編集」する方法でご説明しましょう。
ぼっちは「FUTOKA」というレンタルサーバーを使っていますので、「FUTOKA」でのやり方で説明しますが、他のサーバーでもだいたい一緒かと思います。
「FUTOKA」で「.htaccess」ファイルを編集する方法
まずは「FUTOKA」のコントロールパネルにログインし、「サーバーパネル」にログインします。
次に左側メニュー、「サイト」のグループ内にある「.Htaccess設定」をクリック。
次に「public html」をクリック。
編集したいドメイン名の右側の「編集」をクリック。
すると下記の画面が表示されます。
ここの一番上に「EWWW Image Optimizer」の設定のときにコピーしたコードを貼り付けます。
①の赤枠の部分が貼り付けたコードです。
貼り付けたら②の「編集する(確認)」をクリックします。
確認画面が表示されるので、間違いが無ければ「編集する(確定)」をクリック。
最後に「.htaccessの設定が完了しました」と表示されて、.htaccessの設定は完了です。
「EWWW Image Optimizer」にWebPが対応したか確認する
.htaccessの設定がうまくいっていれば、赤枠の部分が赤色の「PNG」から緑色の「WEBP」に変わります。
これでWebP化の準備は完了しました。
画像をWebPに一括変換
ではここからはお待ちかね、WordPressにアップロードされているJPGやPNG などの画像をWebPに変換していきます。
まずはWordPress管理画面の左側メニューの「メディア」→「一括最適化」をクリック。
次に「最適化されていない画像をスキャンする」をクリックします。
スキャンが終わったら「最適化を開始」をクリックすれば、WebPの一括変換が始まります。
画像の数が多いとそれなりに時間がかかりますので、終わるまでのんびり待ちましょう。
これからアップロードする画像はどうなるの？
今後アップロードする画像は「EWWW Image Optimizer」が自動的にWebP化してくれます。
なので、毎回一括変換する必要はありません。
らくチンですね♪
WebPに変換されているか確認する
とりあえず一括でJPGやPNGの画像をWebPに変換しましたが、ホントに変換されているか確認してみましょう。
WordPressでWebP化されているか確認
WordPressの管理画面から「メディア」をクリックすると画像の一覧が表示されます。
そこを見ていただくと、しっかりと「WebP」と表記されてますね。
画像をダウンロードして確認
アップロード済みの画像をダウンロードしても確認することができます。
自分が運営しているWordPressサイトの画像を、ドラッグ＆ドロップでデスクトップやフォルダにダウンロードしてみましょう。
そうすることで、拡張子が「.webp」になっていることが確認できます。
まとめ
いかがでしたでしょうか？
JPGやPNGなどの画像を、次世代フォーマットのWebPに変換すると聞くとなんだか大変そうな気がしてしまいますが、作業自体はそんなに難しくは無いかと思います。
画像のサイズが圧縮されたことでサイトの表示スピードが速くなり、サイトを見に来てくれた人々のストレス軽減にもつながることでしょう。
もちろんSEO的にも少し有利になると思います。
もしサイトの表示速度に不満のある方は、ぜひ試してみてください。
コメント