WordPressでJPGやPNGの代わりにWebP画像を提供する方法

公開: 2019-11-20

Googleはインターネットの食物連鎖のトップに位置しています。 同社は、オンラインで行われる多くのことに影響を与えます(または指示します)。 そして、彼らの新しい画像フォーマットであるWebPは、その傾向を続けています。 ページの読み込み速度がますます重要になっているため(主にGoogleページランクのため)、開発者とデザイナーは、読み込み時間を短縮する最も簡単な方法として画像圧縮を検討しています。 GoogleのWebP画像は、通常のJPGまたはPNG画像よりも約30%小さく、同等の品質を維持します。 そして何よりも、画像を手動でWebPに変換することを心配する必要はありません。

この記事では、この新しい画像形式をWordPressで使用する方法を紹介しますが、デフォルトではまだサポートされていません。

それを手に入れましょう。

私たちのYoutubeチャンネルを購読する

Optimoleを使用してWordPressでWebPを提供する

画像形式としてのWebPは、WordPressではデフォルトでサポートされていません。 .webp画像をアップロードできますが、SVGファイルと同じように、エラーメッセージが表示されます。 また、WordPressでSVGファイルを使用するのと同様に、プラグインを介してWPサイトをズームする簡単な回避策があります。

WordPressでのWebP画像の使用

私たちが試したWebPサービスの中で、私たちのお気に入りはOptimoleです。 最小限の調整で動作させることができたので、セットアップ方法とWordPressインストールWebPの互換性を可能な限り簡単に取得する方法について説明します。

まず、明らかに、プラグイン自体をダウンロードしてインストールする必要があります。 WP.orgリポジトリにあり、完全に無料です。 それを強化するAPIベースのサービスもそうです(ある程度まで)。 PHPを使用して従来の画像をその場でWebPに変換することは可能ですが、すべてのWebホストがサーバーにその許可を与えるわけではありません。 その権限がある場合は、 WebPExpressプラグインを調べることもできます。 あなたはそれで多くのコントロールを得るが、それはスムーズに働くためにもっと微調整を必要とするものである。

OptimoleをWordPressWebサイトにインストールしてアクティブ化すると、 Media –Optimoleに新しいメニューオプションが表示されます。

OptimoleAPIキー

WordPressでのWebP画像の使用

設定や構成にアクセスする前に、Optimoleアカウントを持っている必要があります。 すでに設定している場合は、[ APIキーを既に持っています]ボタンをクリックできます。 そうでない場合は、 APIキーを登録してメールで送信します。 APIキーの基本アカウントは無料で、その層で約5,000回の訪問があります。 それ以上が必要な場合は、利用可能な価格帯があります。

WordPressでのWebP画像の使用

Optimoleは、訪問を「一度サイトにアクセスした人[。 。]各ユーザーは1回だけカウントされます。 彼らがあなたのサイトで何をするか、彼らがダウンロードする画像の数、または彼らが訪問するページの数は関係ありません。 たった1人のユーザーです。 彼らがあなたのサイトを離れて同じ日に戻ったとしても、彼らはまだ1人のユーザーです。

測定された訪問数がなくなると、WebP画像のみが提供されなくなります。 あなたの画像自体はそうではありません。 最上部のOptimoleダッシュボードにAPIキーがあります。

WordPressでのWebP画像の使用

WordPressダッシュボードに貼り付けるだけで、WordPressでWebP画像の提供を開始できます。

WordPressでのWebP画像の使用

OptimoleWordPressダッシュボード

WordPressダッシュボードでは、WebP最適化に関するいくつかの基本情報を取得します。 これにより、スピードアップが実際にどの程度成功しているかをトラブルシューティングして評価できます。 そうすれば、さまざまな設定を調整できます。

WordPressでのWebP画像の使用

まず、APIに関連付けられたアカウントが表示され、画面の下部に、プラグインに最新の最適化された画像が表示されます。 提供されたWebP画像が、WordPressにアップロードした元の画像からどれだけ小さいかを確認できます。

次に、最上部に[考えられる問題]タブがあります。 タブが強調表示されるのを好む人は誰もいませんが、どのような競合が発生する可能性があるかも確認する必要があります。

WordPressでのWebP画像の使用

私たちが直面した主な問題は、他の画像圧縮および配信プラグインに関するものです。 上の画像でわかるように、JetpackプラグインはPhoton APITを介してOptimoleと同じように機能するため、頭をぶつけることができます。 私たちにとって、これは訪問者に画像がまったく配信されていないこととして現れました。 TinyPNGやSmushなどの他の圧縮サービスには問題はありませんでした。

ダッシュボードの使用

サイトがWebPでどのように機能しているかについての詳細情報が必要な場合は、外部のOptimoleダッシュボードにその情報があります。

WordPressでのWebP画像の使用

単に9.5倍小さいのではなく、提供された実際のファイルサイズを確認できます。 また、30日間でどのファイル自体をファイルするか。

WordPressでのWebP画像の使用

Optimole(またはWP)ダッシュボードで透かしを設定して、WordPressサイトからWebPが提供されたときに、ロゴが自動的に紋章付きになるようにすることもできます。 これは単純なプロセスであり、不透明度や場所などを制御できます。

WordPressでのWebP画像の使用

基本的に、両方のダッシュボードから同じことを行うことができます。 WordPressの[設定]タブの下、またはOptimoleの外部ダッシュにアクセスしてください。 それは、あなたが最も快適なものと、いつでも必要なデータのレベルに完全に依存します。

さらに、圧縮のレベル、遅延読み込み、および特定の画像がファイル名に基づいてWebPとして提供されるかどうかを制御できます。 これらはすべて、 Media –Optimoleの[設定]タブにあります。

WordPressでのWebP画像の使用

まとめ

WordPress WebサイトでWebPを使用することの最大の利点は、ファイルを手動で操作する必要がないことです。 追加のアップロード、追加の圧縮時間、何もありません。 APIがどのように機能するかにより、すべての計算とプロセスがリアルタイムでオンザフライで実行されます。 Googleは、JPGやPNGではなくWebPを使用することで、インターネットの高速化を実現しました。 ただし、最大の利点は、サイズを大幅に縮小しても画像が同じ品質を維持することです。 あなたが彼らのフォーマットを使ってあなたのサイトをスピードアップしてあなたをより高くランク付けできるようにすることはグーグルの側で自己奉仕的かもしれません、エンドユーザーエクスペリエンスもより良いです。 そして、それが最終的に重要なことです。

Webサイトの訪問者にWebP画像を提供することについてどう思いますか?

vladwel /shutterstock.comによる記事特集画像