【Converter for Media】で画像を高速表示させる設定方法

この記事で解決できるお悩み

【Converter for Media】プラグインのインストール方法はどうやるの？
「WebP（ウェッピー）」ってなに？
【Converter for Media】を使う前と使った後でどんな変化があるの？

こんなお悩みを解決できる記事になっています！

画像を軽量化するプラグインを2つ比較してみて、よかったプラグインを紹介していきます！

この記事を読むと、【Converter for Media】で画像を高速表示させる設定方法がわかります！

【Converter for Media】プラグインのインストール方法【4ステップ】
Converter for Mediaの初期設定【13ステップ】
Converter for Mediaでエラーが出た場合の対処法【2ステップ】
WebPが反映されているか確認する方法【4ステップ】
WebP（ウェッピー）：Googleが開発している次世代の画像フォーマット
Converter for Mediaのデメリット【2つ】
- ①テーマとの相性が悪かったら最悪
- ②初期設定がある
Converter for Mediaのメリット【3つ】
WebPを使う前と使った後の変化
- WebPを使う前
- WebPを使った後
JPEGmini Proで画像を軽量化した場合と比べると
- 画像軽量化アプリ（JPEGmini Pro・有料版）を使った場合
ページの速度を上げるためにできること
- Converter for Mediaを使った後のページ速度
- アイキャッチ画像のミニマム化をした結果
「EWWW Image Optimizer」プラグインは使わないの？
ブログをレベルアップさせよう！
Converter for Mediaに関連する質問
ブログ作りたいならコノハがおすすめ◎

【Converter for Media】プラグインのインストール方法【4ステップ】

1.管理画面の「プラグイン」→「新規プラグインを追加」をクリック

2.検索欄に「Converter for Media」と入力する

昔は、【WebP Converter for Media】でしたが、現在は【Converter for Media】です！

3.「今すぐインストール」をクリックする

4.「有効化」をクリックする

Converter for Mediaの初期設定【13ステップ】

1.「設定」→「Converter for Media」をクリック

2.一般設定の「WebP」に入ったチェックはそのまま

3.対応ディレクトリーの「/themes」にチェックをいれる

4.「変更を保存」をクリックする

5.「高度な設定」をクリックする

6.対応するファイル拡張子「.jpg / .jpeg」「.png」にチェックをいれる

選択したファイル形式の画像がWebPに変換されます！

7.無料版を使うために「GD」をクリックする

8.画像読み込みモードはそのままチェックを入れとく

9.デフォルトのままでOK！

10.「変更を保存」をクリックする

11.「一括最適化開始」をクリックする

12.　変換するのに時間がかかるので、しばらく待つ【個人差あり】

すべての変換作業が終わるまでウィンドウは閉じずに、そのまま待ってください！

今回、変換されるのにかかった時間は【50分】でした。

あなたのサイトが画像をたくさん使っていた場合、変換するのに時間がかかると思います！

13.　100％になったら変換作業が完了です！

画像がWebPに変換されました！

Converter for Mediaでエラーが出た場合の対処法【2ステップ】

An error occurred while connecting to REST API. Please try again.

上記のようなエラーが出た時は

管理画面の「設定」→「パーマリンク設定」をクリック

「投稿名」にチェックを入れ、【/%postname%/】を選択して「変更を保存」をクリックする

この2ステップをすればOKです！

WebPが反映されているか確認する方法【4ステップ】

①適当に記事を選んで、右クリック「検証」をクリックする

グーグルを使って検証していきます！

②「ネットワーク」→「画像」をクリックする

③スーパーリロードをする

Macの方は【　⌘+Shift+R　】
Windowsの方は【　Ctrl+Shift+R　】

③Type欄に「webp」が表示されていたら、正常に変換できています！

注意点として、全部の画像が置き換わるわけではないです。

もし、画像変換をやり直したくなったら、以下を試してみてください！

WebP画像生成をやり直したい場合は

「全画像を強制的に再変換する」をONにして「一括最適化開始」をクリックしていきます！

WebP（ウェッピー）：Googleが開発している次世代の画像フォーマット

WebP は、ウェブ上の画像に対する優れた可逆圧縮と非可逆圧縮が可能な最新の画像形式です。

ウェブマスターやウェブデベロッパーは、WebP を使用することで、サイズが小さくリッチな画像を作成して、ウェブを高速化できます。

WebP 可逆圧縮画像は、PNG 画像と比べてサイズが 26% 小さくなります。

WebP の非可逆画像は、同等の SSIM 品質インデックスで同等の JPEG 画像よりも 25 ～ 34% 小さくなります。
引用：WebP公式より

元画像がJPEG画像なら25~34%、png画像なら26%ほどファイルサイズを縮小することができるようになりました！

軽くなれば、サイトの表示速度も上がるので、すごく有利になるわけです◎

Converter for Mediaのデメリット【2つ】

①テーマとの相性が悪かったら最悪

使っているテーマが【Converter for Media】プラグインを使っても不具合を起こさないかどうか、事前に調べてから使ってください！

②初期設定がある

画像が軽量化することを考えたら、初期設定なんて朝飯前ですが、めんどうではあります！

しかし、１回設定すればいい話なので高速で済ませてしまいましょう！

Converter for Mediaのメリット【3つ】

①設定が簡単【初心者でも楽々】

事前にいくつか画像をアップデートしていても、ボタン一つで自動変換することが叶います♪

これからアップしたい画像もWordPressのメディアライブラリに画像をアップロードするだけで、画像をWebPに変換可能◎

すごく使いやすいです！

②ページの読み込み速度が上がる

たった3秒表示されるのが遅いだけでサイトを見てもらえない、厳しい世界です！

だからこそ、画像という重いものをどれだけ軽くできるかが勝負です！！

画像をWebPにするだけで爆速になるのなら、入れるしかない！！

③WebPを使うことが【当たり前の世界】になっている

出典：WebPのグローバル化を見ると、現在約97%がWebPに対応していることがわかります！

WebPを使う前と使った後の変化

「PageSpeed Insights」を使って検証してみました！

WebPを使う前

めちゃくちゃ重い感じが伝わるかと、、、

それがWebPを使うことで下記のように劇的に改善されました！！！

WebPを使った後

まだまだ他の部分で改善する余地が発見できたので、これを機に他のものも最小限に抑えていきたいです！

JPEGmini Proで画像を軽量化した場合と比べると

画像軽量化アプリ（JPEGmini Pro・有料版）を使った場合

元のJPEG 画像　1MB

①JPEGmini Proで軽量化してからWebP変換したとき：400KB

②WebP変換のみ：450KB

①JPEGmini Proで軽量化してからWebP変換したとき：元の品質をほとんど維持しながらファイルサイズが大幅に削減

②WebP変換のみ：適切なバランスで圧縮設定を調整することで、品質を保ちながらもサイズを削減

検証結果から、画像軽量化アプリを通した方が、より軽くなるということがわかりました！

ページの速度を上げるためにできること

記事を書くのも大事なことですが、それと同じくらい表示速度も大切です。

日頃、自分の書いた記事が何秒くらいで表示されるか気にはしていましたが、そこまで遅いとも感じていませんでした。

むしろ、満足していたくらい。

しかし、「PageSpeed Insights」を使うと90%以上ではなかったので落ち込みました。

Converter for Mediaを使った後のページ速度

86%なので悪くはない、むしろ普通くらいでした。

ほとんどの原因が画像が適したサイズになっていないとの指摘があったので以下のように改善してみました。

アイキャッチ画像のミニマム化をした結果

早速2つ試しました！

①アイキャッチ画像（各記事の表紙のこと、別名：サムネイル画像）をできるだけ「横1200px✖️縦675px」に近づけた。

②トップページに表示されるヘッダーアイキャッチ画像の表示をオフにした。

Converter for Mediaに加え、上記の2点を実行することで、13ポイント改善することができました！

ちょっとめんどくさいけど、日頃からしておくと後で一気にやるよりかは楽だと思います（自戒を込めて）

理想は100％です！

あと1％どうにかして余分なところを削ぎ落としていきたいと思います！