ワードプレス・ブログ関連

EWWW Image Optimizerで画像をWebPに変換した時の備忘録

投稿日:

旅行や趣味の記事がメインのハヤマの休日では、記事内で実際に撮ってきた写真や画像をもとに説明する機会が多々あった。

しかし、記事内の画像が増えるということはサイトの読み込み速度にも影響を与えてしまう。

せっかく訪問者が訪れてくれても、表示速度が遅いせいで直帰されてしまうようでは訪問者に申し訳ないし、非常にもったない状況と言える。

画像ファイルの次世代のフォーマットとは何か

試しにGoogleのPageSpeed Insightsで表示速度のテストを行ったところ、画像ファイルを次世代のフォーマットにすべきという診断結果が表示された。

次世代のフォーマットが何なのか知らなかったので調べてみると、従来のファイルに比べて画像容量の小さいフォーマットであることが分かった。

また、次世代のフォーマットには「WebP」の他に、「JPEG XR」や「JPEG 2000」などもあるようだが、これらは対応ブラウザが限られるようなので「WebP」が最も無難な変換先であると言える。

私は今までサイトにアップロードしていた画像はほぼJPEGファイルだったが、今後は少しでもページ速度を改善したいので、ウェブサイトを作り直すにあたって試してみことした。

EWWW Image OptimizerでWebPへの変換手順

当初、画像ファイルの変換方法は難しいと思っていたが、調べてみるとプラグイン「EWWW Image Optimizer」できることが分かった。

「EWWW Image Optimizer」は画像ファイルの軽量化に便利なプラグインであり、ワードプレスのオススメプラグインとして多くのサイトで紹介されている定番のプラグインである。私も長らくこのプラグインを使用していたが、このプラグインにWebP変換機能があることは今回調べるまで知らなかった。

使い方はいたってシンプルで、私の場合は以下の手順で実施したら変換に成功した。

  1. インストール済みプラグイン>EWWW Image Optimizerの設定
  2. WebPのタブを選択
  3. JPG, PNG から WebPのチェックボックスにチェックを入れる
  4. 下のリライトルールを挿入するボタンを押す
  5. メディア>一括最適化を実行
  6. ブラウザのキャッシュを削除して、もう一度4の画面を開く
  7. 画面右下に赤枠で「PNG」と表示されていたものが緑色で「WEBP」表示になることを確認

いくつかの解説サイトによると「.htaccess」ファイルの冒頭にコードの追記が必要とあったが、私のサイトの場合はリライトルールを挿入ボタンを押しただけで、「.htaccess」への追記はなしで変換が完了した。

関係あるかは分からないが、画像ファイルが殆どないサイト作成直後の段階で実施したことが、すぐに変換が完了できた理由かもしれない。

そして、WebP変換後に、再度GoogleのPageSpeed Insightsで診断した結果、「次世代フォーマットでの画像の配信」の項目は表示されなくなった。

大幅にスコアが改善した訳ではないが、今後も少しづつ課題を修正し、ウェブサイトの最適化に取り組んでいきたい。

アドセンス336




アドセンス336




-ワードプレス・ブログ関連

執筆者:

関連記事

no image

【ページ速度向上】レンダリングを妨げるリソースの除外を解消した際の備忘録

今回Googleのスピードテストを行ったところ改善できる項目に「レンダリングを妨げるリソースの除外」とあったので、これの改善に着手してみた。 ネットで調べた方法である程度改善することができたので、実際 …

no image

ワードプレスでブログをゼロから作成した時の手順書備忘録

私自身、このハヤマの休日が人生で5つ目のウェブサイト作成となるが、毎度新しいサイトやブログを立ち上げる際に、そのやり方を都度調べていた。 もちろん時代の変化と新技術の登場によって、新しい方法や過去の作 …