WordPress上の .jpg や .png の画像を WebP(ウェッピー) に変換するプラグイン「WebP Converter for Media」

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート(月額会員制スポット
・某コミュニティの技術サポート
オルゴナイトのネットショップ店長
・職業訓練校のグラフィック/Web制作コースの講師3期目

アニメやマンガ好きで、子供の影響か?ギターの練習を再開しましたw

※当サイトのリンクは、Amazonを含めアフィリエイトリンクを利用しています。

口座やカードの自動取り込みが優秀すぎて、隙間時間に仕訳ができておすすめです^^

 

フリーランスの支払いトラブルを未然に防止


どうも、がみたか(@gamitaka02)です!

Googleから提供されている、サイトの表示速度をスコア化する「PageSpeed Insights(以下PSI)」。

そのPSIの仕様が大きく変わってから、スコアの判断基準に画像形式「WebP(ウェッピー)」というものが出てきました。

がみたか
PSIで「WebPを使え!」と出た当初は変換方法がよくわからず完全にスルーしていましたが、簡単に変換できるプラグインがあったのでご紹介しようと思います^^
偉大な冒険家
ただし、PSIのスコアにあまりこだわりすぎると泥沼だからほどほどにしような!

「WebP(ウェッピー)」とは?

WebP(ウェッピー)とは、調べてみたところ「圧縮性の高い画像形式」で、「背景透過PNG画像やGIFアニメーションにも対応している画像形式」で、割と使い勝手の良い軽い画像形式です。

出た当初は対応しているブラウザ(Chromeやedgeなど)がほとんどなかったのですが、ようやくいろんなブラウザで対応してくれるようになったみたいです。

偉大な冒険家
まあ、そうじゃないと運営者もユーザーも困るわけだがw

画像を「WebP(ウェッピー)」にする手段

ここではWordPressに限った話になりますが、今までアップロードした画像を一度「WebP(ウェッピー)」に変換してあげる必要があります。

一枚ずつ変換してアップロードし直すのはあまりにも手間なのですが、そこはWordPress。

プラグインを使って、まとめて変換することができます!

さらに、そのプラグインを有効化している限り、後からアップロードした画像も自動的に「WebP(ウェッピー)」に変換してくれるので、これは使わない手はありません。

その候補として…

・「WebP Converter for Media」
・「EWWW Image Optimizer」

この他にもありますが、このページでは「WebP Converter for Media」 を使った変換について解説していきます。

がみたか
「EWWW〜」はもともとの圧縮がショボかったので僕は使っていないというのもあります(^_^;)

「WebP Converter for Media」を使って変換する手順

まずはじめに、「WebP Converter for Media」をインストールします。

1.「プラグイン」→「新規追加」をクリック。

2.「WebP Converter for Media」で検索し、インストール→有効化。

※画像はすでにインストール済みです

3.プラグイン一覧から「Settings」もしくは、「設定」→「WebP Converter」をクリック。

4.変換する画像形式と、変換するディレクトリを選択する。

テーマで使われている画像は、テーマの更新時にリセットされる可能性がありますが、念の為…

5.変換後の画質を指定することもできます。

デフォルトは「85%」ですが、「75%」でも十分かと思います。

6.項目が英語で並んでいますが、画像の項目にチェックが入っていれば良いでしょう(デフォルト)

先ほどの圧縮率も含め、変更したら「Save Changes」で保存を忘れないようにしましょう。

7.「Regenerate All」をクリックするとWebP(ウェッピー)への変換が始まります。

アップロードされている画像の枚数によっては数十分掛かりますので、その間はページを閉じないようにしましょう。

がみたか
ちなみにこの「ブログサポーターがみたか」では30分以上かかりました(^_^;)

8.WebP(ウェッピー)に変換されているか確認するときはChromeの「検証」を使います。

「Network」のタブを開き、Typeが「webp」であれば成功しています。

偉大な冒険家
拡張子までは変わらないみたいなので、メディアライブラリでは確認できないみたいだな(^_^;)

「WebP Converter for Media」の使い方:まとめ

スコアを追いすぎると泥沼化してしまうPSIですが、簡単にできる対策はやっておくに越したことはありません。

これだけでも少しはスコアアップになると思いますので、一度試してみることをおすすめします^^

ちなみにこの「ブログサポーターがみたか」の現状はこのようなスコアです。

スマホ=35

PC=91

がみたか
テーマがやや古い(アルバトロス)とか、SNSのタイムラインを入れまくっているとか言い訳はたくさんありますが、夢も希望もないスコアでごめんなさいm(_ _)m

それでは今回はこの辺で!

また次の記事でお会いしましょう^^

ブログ運営者のためのサポート保険!

ブログのトラブルや困ったことに時間を取られて

自分のやるべきことが出来ていない人のためサービスです!


無料メールマガジン

WordPressに関するお役立ち情報や、

『WordPressに詳しくなるメール講座』を配信しています!


知識・経験ゼロから、

Webクリエイターを目指すためのメール講座を配信しています!


『ちょっと困った』時のスポットサポート!

WordPressやWebに関する「ちょっと困った」を、

30分 4,400円〜で解決するサービスです!


WordPressのお引越し!

安心・安全・快適で、ブログサポーターがおすすめする、

Xサーバーへのお引越しを代行します!


記事が気に入ったらシェアをお願いします^^