はじめに
今日は、WebP Converter for Mediaプラグインについて紹介します。
この記事を読むと次の疑問について知ることができます。
♥WebP Converter for Mediaの有料版はあるの?
♥WebP Converter for Mediaのインストールと有効化はどうするの?
♥WebP Converter for Mediaの設定と使い方はどうするの?
・設定(Settings)
・画像の再生成(Regenerate images)
♥テストでWebP Converter for Mediaプラグイン設定を確認したらどうだった?
OS、機種などで説明の仕方が変わってくることがありますので、私の使用しているパソコン環境について載せておきます。
パソコンOS : Windows10 Pro
Windowsバージョン : 20H2
WebP Converter for Mediaプラグインとは?
WebP Converter for Mediaプラグインは、EWWW Image Optimizer、Imagifyプラグインと同様にJPEG、PNG、GIFの静止画をWordoPressのブログ内で記事内に利用している際に、自動でリサイズ、自動圧縮などして、画像の最適化をしてくれるプラグインなんです。
また、最近になって色々なOSやブラウザーでも対応するようになった次世代画像フォーマットであるWebPにも自動で変換しくれます。
WebPを利用することにより、あなたのブログの読み込み速度を速めることができ、結果的に画像を含んだページの表示速度を上げる効果があります。
したがって、私などもそうですが、WordPressのサイトをPageSpeed Insightsで表示スピードを計測した際に悪いスコアーを出すサイトは、一番の解決策は画像容量を小さくすることがPageSpeed Insightsで表示スピードのスコアーを上げるために、最初に取り組む解決策でしょう。
そうすることにより、あなたのブログの表示スピードが速ければ、ブログを訪れてくれる方にも喜んでもらえ、強いては、あなたのブログの評価を上げる結果にもつながります。
WebP Converter for Mediaプラグインは、現時点(2021年5月18日)でのバージョンが3.0.1です。
このプラグインの「詳細表示」を見ると、有効インストール数70,000+となっており、7万以上の方がインストールして活用し、レビュー299件、評価が
となっており、EWWW Image Optimizer、Imagifyに比較すると利用者数は少ないですが、利用している方の評価は大変高いプラグインの一つです。このダウンロード数やレビュー数が少ないのも、このプラグインの安定したバージョン1.0.0がリリースされたのが、2019年6月16日ですので、まだまだ生まれたてホカホカのプラグインのためと考えられます。
逆に、リリースされて約2年足らずでこれだけの有効ダウンロード、レビューがあることは驚くべきことです。
このプラグインの使う上での利用条件は次の通り。
WebP Converter for Mediaの日本語表示
Google ChromeやMicrosft Edgeの場合ですと翻訳機能が付いているので、英語のページなどを日本語に翻訳してくれます。
WebP Converter for Mediaで英語表示されているところがあった際には、そのページの翻訳したい英語の表示部分で右クリックして表示されるメニューで「日本語に翻訳」を選択すれば、日本語に翻訳して表示してくれます。
例えば、WebP Converter for Mediaプラグイン画面で「詳細を表示」で現れるWebP Converter for Mediaの説明は英語で書かれていますが、この英語の部分で右クリックしてでるメニューで「日本語に翻訳」をクリックすれば、日本語に翻訳して表示してくれます。
この機能は、WebP Converter for Mediaのページに限らず、他の英語表記の部分でもできますので、試しにやってみて下さい。
WebP Converter for Mediaの有料版は?
WebP Converter for Mediaは、現時点では有料版があるわけではないようです。
でも、このプラグインを利用して良かったら寄付(provide us a coffee)をしてくれと言うようなことが書かれています。
WebP Converter for Mediaのインストールと有効化
このプラグインをインストールする前に、同様のプラグインEWWW Image Optimizer、Imagifyがインストールされている場合は、無効化にしてください。
WordPressのダッシュボードより、「プラグイン」⇒「新規追加」と順にクリックします。
上部右の方にあるキーワードプラグインの検索欄に「WebP」と記入して検索すると、でてくる「WebP Converter for Media」の右上にある「今すぐインストール」をクリックします。
その後に出る「有効化」をクリックすると、プラグイン画面の上部に「プラグインを有効化しました」と表示され、プラグイン画面の最上部に「Thank you for installing our plugin WebP Converter for Media!
Would you like to speed up your website using our plugin? Go to plugin settings and convert all your images to WebP with one click! Thank you for being with us!(メディア用プラグインWebPConverterをインストールしていただきありがとうございます。プラグインを使用してウェブサイトを高速化しますか?
プラグイン設定に移動し、ワンクリックですべての画像をWebPに変換します!一緒にいてくれてありがとう!) 」メッセージがあり、その下に「四角で囲われた中にSpeed up my website(私のウエブサイトをスピードアップ)」と記されてます。
これであなたのWordPrssでWebP Converter for Mediaを使える準備ができたことになります。
WebP Converter for Mediaプラグインの設定と使い方
Google Chrome、Microsoft Edgeを利用しているのであれば、プラグインの画面のどこでも良いので右クリックして、でてくるメニューで「日本語に翻訳」をクリックすると、英語表記の部分が日本語に翻訳されます。
WebP Converter for Mediaプラグインを有効化して、プラグインの上部に表示されている「Speed up my website(私のウエブサイトをスピードアップ)」をクリックすると、設定画面となります。
設定(Settings)
設定では、7つの設定する箇所があり、基本はデフォルトのままでOKです。
1つ目の設定は、あなたのサイトで画像などがあるページを読み込んだ際に、「.htaccess」ファイルに書かれた規則にしたがって読み込みますよ。と言う設定になります。
1つ目は、画像読み込むモードの設定(Image loading mode)で、
☑ via .htaccess (recommended)
via .htaccessにチェック
二つ目が、サポートされているファイル拡張子のリスト(List of supported files extensions)の設定で、
☑ .jpg
☑ .jpeg
☑ .png
Jpg、Jpeg、Pngにチェック
三つ目が、サポートされているディレクトリのリスト(List of supported directories)ので設定で
☑ / uploads
/ uploadsにチェック
四つ目の設定は、変換方法の設定であり、その詳細はGDなどを参照してください。
四つ目が、変換方法(Conversion method)の設定で、
☑ GD(recommended)
GD(recommended)にチェック
五つ目は、画像の出力フォーマットの設定であり、変換した画像をWebPに変換しますよ。と言う設定になります。
五つ目が、サポートされている出力形式のリスト(List of supported output formats)の設定で、
☑ WebP
WebPにチェック
六つ目は、画質の設定で、WebPに変換する際の画質を元の85%(デフォルト)にするよ。と言う設定になりますが、他の記事などを読むと75%でも十分と言うことが書かれていましたので、ここでは、75%に設定します。
六つ目が、画質(Images quality)の設定で
75%
を選択クリック。
七つ目が、追加機能(Extra features)の設定で、
☑ Automatic removal of WebP files larger than original( 元のサイズよりも大きいWebPファイルの自動削除)
☑ Browser Caching for WebP files (saving images in browser cache memory)(WebPファイルのブラウザキャッシュ(ブラウザのキャッシュメモリに画像を保存する)
□ Keep images metadata stored in EXIF or XMP formats (only available for Imagick conversion method)( 画像のメタデータをEXIFまたはXMP形式で保存します(Imagick変換方法でのみ使用可能))
□ Enable cron to automatically convert images from outside Media Library (images from Media Library are converted immediately after upload)( cronがメディアライブラリの外部からの画像を自動的に変換できるようにします(メディアライブラリの画像はアップロード直後に変換されます))
☑ Enable cron to convert images uploaded to Media Library to speed up process of adding images (deactivate this option if images added to Media Library are not automatically converted)( cronがメディアライブラリにアップロードされた画像を変換できるようにして、画像を追加するプロセスを高速化します(メディアライブラリに追加された画像が自動的に変換されない場合は、このオプションを無効にします))
□ Force redirections to WebP for all domains (by default, images in WebP are loaded only in domain of your website - when image is displayed via URL on another domain that original file is loaded)( すべてのドメインのWebPへのリダイレクトを強制します(デフォルトでは、WebPの画像はWebサイトのドメインにのみ読み込まれます-画像が元のファイルが読み込まれる別のドメインのURLを介して表示される場合))
☑ Log errors while converting to debug.log file (when debugging in WordPress is active)( debug.logファイルへの変換中にエラーをログに記録します(WordPressでのデバッグがアクティブな場合))
強調した部分にチェック
画像の再生成(Regenerate images)
この画像の再生成とは、元々ある画像はWebPでない画像のために、それら元の画像をすべてWebP画像に変換するための操作です。
やり方は簡単で、「☑Force convert all images again( すべての画像を再度強制変換します)」にチェックを入れ、「Regenerate All(すべて再生)」をクリックすると、変換が始まり、終わると(私の場合は、画像の重量を節約:27.90 MB(82%))と言うような表示がされ、元の画像がWebPに変換され、かなり圧縮されていることが分かります。
テストでWebP Converter for Mediaプラグインの設定を確認
テスト(WebP Converter for Media)と言うタイトルの記事を新規作成し、そこに1024×768ピクセルの画像ファイル(PNGの2.03MB)を挿入してみました。
その結果、CoreserverのV2サーバーのファイルマネージャーで調べたら、挿入された画像ファイルは、圧縮されずに画像サイス1024 x 756ピクセルの容量2MBのPNGファイル以外に、6種類のリサイズされたPNGが生成され、さらに、別ディレクトリー(/uploads-webpc)にWenPファイル(3.38KB)が作成されていました。
表示されている画像がどのタイプかを見るために、テスト(WebP Converter for Media)を別タブウインドウで表示させ、F12を押し、Chromeのデベロッパモードにし、F5を押して書き換えたのち、「Network」⇒「img」とクリックして、表示されている画像ファイルのTypeを見た時に「WebP」となっていたので、WebP Converter for Mediaが正常に動作していることを確認しました。
おわりに
如何だったでしょうか?
WebP Converter for Mediaプラグインとはどのようなもの?、WebP Converter for Mediaの有料版はあるの?、WebP Converter for Mediaのインストールと有効化はどうするの?、WebP Converter for Mediaの設定と使い方はどうするの?、設定(Settings)、画像の再生成(Regenerate images)、テストでWebP Converter for Mediaプラグイン設定を確認したらどうだった?などについて解説してきました。
この記事が少しでもあなたのお役に立てれば、これほど嬉しいことはありません。
以上です。
コメント
WebP Converter for Media のご説明ありがとうございます。読ませていただきました。
「 EWWW Image Optimizer 」でも同じことができるとのことですが、(EWWW Image Optimizerの記事も読ませていただきました)wordpressではどちらを使うのがベストなのでしょうか。
イトク 様
はじめまして、エイじーと申します。
私の「WebP Converter for Media」に関する記事などを読んでいただき有難うございます。
さて、質問で、『WordPressでは「WebP Converter for Media」と「 EWWW Image Optimizer」のどちらを使うのがベストですか?』とのことですが、私はどちらもWordPressのプラグインであり、頻繁にバージョンアップもされておりますので、どちらを使っても良いと思います。
あなたの好みで良いと思いますよ!
あなたが使い易い方を選ばれたらよろしいと思います。
エイじーより