今日はプラグイン「EWWW Image Optimizer」をご紹介します。
具体的には下記の通りです。
・「EWWW Image Optimizer」とは?
・「EWWW Image Optimizer」設定方法
それでは早速、ご紹介していきましょう!
「EWWW Image Optimizer」とは?
「EWWW Image Optimizer」は画像の最適化をしてくれるプラグインです。
今後、ブログを作っていくとたくさんの画像を使うことになります。
それらの画像を最適化しておかないと、サーバの保存領域を圧迫したり。
画像を使ったページの表示速度が遅く(画像の読み込み速度が遅く)なったりします。
1つ1つは大したことないかもしれません。
でも、対策していないブログよりも対策しているブログの方が断然よいです。
そのため、しっかりと入れて設定しましょう。
「EWWW Image Optimizer」設定方法
「EWWW Image Optimizer」で画像を最適化するための設定方法をご紹介していきます。
具体的に言うと、今後ブログに投稿する画像をWebP(ウェッピー)という形式になるよう設定します。
WordPressで「EWWW Image Optimizer」の設定と、サーバ側の設定が必要なので、ちょっと難しいです。
ですが、手順通りに設定すれば問題ないので、チャレンジしていきましょう。
※WebPは画像のデータ量を小さくできるファイル形式です。
※WEBPと表記されることもあります。
※昔はJPGやPNGなどが画像の基本的な形式でした。(今もよく使います。)
まずは「EWWW Image Optimizer」のプラグインを入れてください。
※プラグインの入れ方が分からない場合は下記を参考にしてください。
設定画面に行くと下記画像のように表示されるので、赤枠の設定をして「次」をクリック。
下記画像のように表示されるので、赤枠の設定をして「設定を保存」をクリック。
※幅の上限は”2000″にしておけばとりあえず大丈夫だと思います。
下記画像のように表示されるので、「完了」をクリック。
「EWWW Image Optimizer」の詳細な設定画面が開くと思うので、「基本」を選択。
※画像と表示が異なる場合、青枠部分をクリックしてみてください。
さらに詳細な設定が可能になります。
画像は既に詳細な設定画面なので、簡単モードへの切り替えボタンになっています。
下の方に行って、WebP変換にチェックを入れて「変更を保存」をクリック。
その後、青枠をコピーしてください。
※オレンジ枠が「赤塗りのPNG」などになっていると思います。
設定を進めると「緑塗りのWEBP」になります。
サーバー側の設定に映ります。
今回はXserverで解説するので、ログインして「サーバー管理」をクリック。
「.htaccess編集」をクリック。
※「.htaccess」の読み方は(ドットエイチティアクセス)
※サーバに色んな設定を付けられるファイルのイメージでOK
自分が作っているドメインから「選択する」をクリック。
※私は複数ドメインを所有しているのでたくさん表示されています。
「.htaccess編集」をクリック。
※「.htaccess編集」は上級者向けなので基本的に触れない方がいいです。(下記の画像でも警告文が出ていますね。)
※今回ご紹介する手順通りに注意して設定をお願いいたします。
「.htaccess」にコピーした内容を貼り付けて「確認画面へ進む」をクリック。
※「.htaccess」は上に書いた設定内容から順にサーバへ読み込まれます。
※今回は一番下に追記して問題ないです。
追記できていることを確認して「実行する」をクリック。
※確認ポイントは主に3つ
・ドメインが合っているか?
・元の内容を削除していないか?
・追記したい内容がすべて貼り付けられているか?
設定は以上です。
最後にちゃんと設定されているか、WordPressの「EWWW Image Optimizer」で確認しましょう。
先ほど少し登場した下記の画像で、「緑塗りのWEBP」が表示されていればOKです。
※もし、表示されていない場合はしばらく待ってから、再度ご確認ください。
※それでも表示されない場合は、手順に不備がなかったかご確認ください。
これで今後、ブログに投稿する画像はWEBP形式に変換されるようになります。