高速(スピード)

WP(WordPress)

【WordPress】プラグイン「WebP Express」でWebP画像へ対応

WebPについて

現在、WordPress上から画像をアップロードする場合、多くの方が、JPEG画像やPNG画像をアップロードされているのではないでしょうか?

私も、アップロードする画像は、ほぼJPEG画像かPNG画像です。

ただ、最近はGoogleが開発しているWebP(ウェッピー)という形式の画像が注目を浴びており、
JPEG画像やPNG画像と比べて容量が20~30%ほど削減できると言われています。

画像を軽量化することにページの読み込み速度も改善されるのでSEO効果もあり、Google自身もWebPを推奨しています。

また、Google製の[ PageSpeed Insights ]でサイトの測定を行うと、
JPEGやPNGやGIF画像などを使用している場合、「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されます。
【WebP】PageSpeed Insightsでの測定結果

この測定結果を見るだけでも、かなりの軽量化が見込めそうですね。

ただ、全画像WebPに変換してアップロードするのは結構手間です。
過去に投稿済みの記事の画像まで含めると、対応しきれません。

そこで、便利なのが「WebP Express」というプラグインです。

WebP Expressの設定方法

まずは、WordPressの管理画面上から該当プラグインを検索して、インストール→有効化まで行います。
WPプラグイン「WebP Express」をインストール

有効化まで完了すると、管理画面左メニューの「設定」→「WebP Express」と遷移して下さい。
以下のような設定画面が表示されます。
WPプラグイン「WebP Express」の設定画面

こちらの画面で諸々の設定を行っていきます。

と言っても、基本的な設定方法は、
■「Operation mode」で「Varied image responses」を選択
■「Alter HTML」にチェック
になります。

この設定により、通常の<img>タグではなく<picture>タグが設定され、
WebP対応のブラウザであればWebP画像が、WebPに対応していないブラウザであれば投稿時の形式の画像が表示されます。
※主要ブラウザである、Chrome、Firefox、Edge辺りは、WebPに対応しています。

このような感じでタグが出力されます。

<picture>
<source srcset="https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu.jpg.webp 2000w, https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu-300x200.jpg.webp 300w, https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu-768x511.jpg.webp 768w, https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu-500x333.jpg.webp 500w" sizes="(max-width: 2000px) 100vw, 2000px" type="image/webp">
<img src="https://deep-blog.jp/engineer/wp-content/uploads/2019/06/konnohachimangu.jpg" alt="xxxxxxx" width="2000" height="1330" class="alignnone size-full wp-image-14960 webpexpress-processed" srcset="https://deep-blog.jp/engineer/wp-content/uploads/2019/06/konnohachimangu.jpg 2000w, https://deep-blog.jp/engineer/wp-content/uploads/2019/06/xkonnohachimangu-300x200.jpg 300w, https://deep-blog.jp/engineer/wp-content/uploads/2019/06/xkonnohachimangu-768x511.jpg 768w, https://deep-blog.jp/engineer/wp-content/uploads/2019/06/xkonnohachimangu-500x333.jpg 500w" sizes="(max-width: 2000px) 100vw, 2000px">
</picture>

画像枚数が少ないサイトであれば大きなメリットは無いですが、
大量に画像をアップロードされる方にはおすすめのプラグインです。

また、[ ページまるごとWebP変換・効果測定 ] という便利なサイトもあります。
WebPに対応することでどのくらい軽量化できるかを計算してくれるツールです。

興味のある方は、こちらのツールで、WebPに対応することでどのくらい効果があるかを見積もった上で、導入を決めてみてはいかがでしょうか。

WordPress短期学習プログラム

関連記事

  1. WP:WordPress(ワードプレス)

    WP(WordPress)

    Archives for a categoryというプラグイン

    ブログの右カラムに特定カテゴリの記事のみの新着一覧を表示させたくて、…

  2. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP アイキャッチ機能なんてものが追加されていた!!

    WordPress3.oからアイキャッチなどというものが追加されていま…

  3. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPress プラグイン「Edit Author Slug」でユーザー名を隠しましょう

    最近、ブログ投稿を少しさぼっていたので、いつもお世話に…

  4. WP:WordPress(ワードプレス)

    WP(WordPress)

    【WordPress】管理画面上部に「ログアウト」を表示

    ちょっとした事ですが、WordPressを使っていると、管理画…

  5. WP:WordPress(ワードプレス)

    WP(WordPress)

    WPではrobots.txtが自動生成されます

    今回は、WordPressでサイトを構築した際に自動で生成され…

  6. WordPress(WP)

最近の記事

  1. Technology-Connection-Net
  2. ドメインにハイフンを使うのは日本人だけ?
  3. SSL(HTTPS)
  4. ドメインについて
  5. WP:WordPress(ワードプレス)
  6. ドメイン(domain)
  7. JPドメイン
  8. 高速(スピード)
  9. ブログアクセス
  10. 高速(スピード)
PAGE TOP