WordPress で WebP 画像を使用する方法

公開: 2021-11-09

サイトに画像が多すぎる場合は、PNG または JPG 形式でアップロードされます。 WordPress で WebP 画像を使用する方法を学習すると、画像のファイルサイズを縮小し、サイトの画像を最適化して高速に読み込むことができます。

コンテンツ

1 WebPとは？

2 WebP画像のメリットとデメリット

3 WordPress で WebP 画像を使用するには?

3.1 CDN

3.2画像最適化プラグイン

3.3手動

WebPとは？

過去に JPEG、JPG、PNG などの広く使用されている画像ファイルの種類が必要です。これらの基本的な画像の種類に加えて、聞いたことのある他の画像ファイルの種類もあります。

WebP は、高速読み込みのために画像を最適化するために Google によって開発されました。ファイルサイズを縮小して画像ファイルを配信することに重点を置いています。サイトで定期的に画像を使用し、それらすべての画像のファイルサイズを小さくできれば、Web サイトの速度が大幅に向上します。

Pagespeed Insightsでサイトを確認すると、「画像を次世代形式で提供する」という推奨事項が表示されます。まだそれを行っておらず、 WebPがこれらの推奨形式の 1 つです。

次世代フォーマットで画像を提供 - PageSpeed Insights — 次世代フォーマットで画像を提供 – PageSpeed Insights

画像圧縮は、無損失または非可逆のいずれかです。 PNG 画像は可逆圧縮の良い例です。無損失圧縮中は、非可逆圧縮に比べて圧縮された画像の品質が低下しません。実際、ロスレス画像の圧縮は、画像に存在する不要なデータのビットを減らすことによって行われます。このため、必要に応じて解凍して元のイメージを復元できます。

一方、非可逆画像は、画像からデータのビットを完全に削除するため、可逆画像よりもファイルサイズが小さくなります。その結果、JPG/JPEG ファイルの圧縮では品質が低下します。

WebP 画像形式は、ロスレスタイプまたはロッシータイプのいずれかに圧縮することもできます。ただし、圧縮中の品質の低下を回避します。非可逆圧縮を使用する場合、WebP は予測コーディングを使用してファイルサイズを縮小しますが、可逆圧縮の場合、WebP は複雑な方法を使用して画像ファイルを圧縮します。その結果、WebP 画像圧縮は従来の PNG/JPG 圧縮よりも優れています。

Google は、WebP 画像ファイルのサイズは PNG 画像よりも26% 小さく、JPEG 画像よりも 25 ～ 34% 小さいと既に述べています。

そのため、可能な限り WordPress で WebP 画像を使用する方法を学ぶ必要があります。

WebP 画像の長所と短所

WebP 画像ファイルが機能するためには、ページの訪問者が WebP 互換ブラウザーを使用している必要があることに注意する必要があります。ユーザーの 95% 以上が、WebP をサポートする Web ブラウザーを使用しています。 Chrome、Firefox、Opera、Microsoft Edgeなどのブラウザーは、WebP 画像を完全にサポートしています。

最新バージョンのiosとmacOS Safariは WebP と互換性がありますが、古いバージョンは WebP をサポートしていません。また、Internet Explorer は WebP バージョンの画像をサポートしていません。ただし、Edge が IE に取って代わったことは一安心です。

WebP 画像を使用するとサイトが高速になることは既にわかっていますが、ブラウザのマイナーバージョンとは互換性がないため、サイトで WebP を使用することは良い方法でしょうか?

サイトを高速化しても、サポートされていないコンテンツをユーザーに配信しなければならないわけではありません。ただし、WebP 画像をサポートするブラウザーに配信する必要があります。 PNG/JPG 画像のコピーがある場合は、サポートされていないブラウザーに配信できます。これは、WebP バージョンの画像を処理する適切な方法です。

WordPress で WebP 画像を使用する方法

WebP 画像を追加するには、サイトに適した以下の方法のいずれかを選択できます。

CDN

WordPress サイトで使用できる CDN は多数あり、世界中のさまざまな場所から Web サイトのコンテンツを提供できます。 CDN を使用すると、使用しない場合よりも Web サイトが比較的高速になります。

最も一般的な CDN には、Cloudflare、MaxCDN、KeyCDN、および StackPath があります。これらの CDN のいずれかを使用すると、画像ファイルを WebP 形式に変換できます。また、これらのファイルは、互換性のあるブラウザーから閲覧するユーザーにも提供されます。

画像最適化プラグイン

JPG/PNG で画像をアップロードし、画像最適化プラグインを使用して WebP に変換することをお勧めします。画像ファイルをWebP形式に変換するおすすめプラグインの一覧です。

オプティモール

その助けを借りて、サイトの画像を Optimole によって最適化された画像 URL に置き換えることができます。 WebP 変換に加えて、ユーザーの画面に合わせて画像のサイズを自動的に変更します。

Optimole の無料プランには、毎月 5000 ビジターのクォータが含まれています。ただし、それでは不十分な場合は、プレミアムプランを購入して、その制限を 25000 にアップグレードできます。

プラグインをインストールして有効化したら、プラグインの設定の指示に従って API キーを作成する必要があります。プラグインが接続されると、画像が最適化され、CDN からサポートされているすべてのブラウザーに画像の WebP バージョンの提供が開始されます。

想像する

Imagify でアカウントを作成すると、有効化後にプラグインに入力する必要があるAPI キーが取得されます。毎月 200 枚未満の画像をアップロードする場合は、Imagify が最適です。無料プランには、1 か月あたり 20MB または 200 枚の画像が含まれます。十分でない場合は、利用可能なプレミアムプランにオプトインできます。

Imagify プラグインを使用して WordPress で WebP 画像を使用する方法

設定を見ればWebP版の画像を作成してサイトに表示することができます。画像を表示している間、書き換えルールよりも設定で画像タグを使用できます。

Imagify プラグインを使用する場合、WP Rocket プラグインのメディア設定を使用して Web サイトの速度を向上させることもできます。 WP Rocket と Imagify は WP Media によって作成されているため、プラグインも互換性があります。

WP Rocket 設定の WebP 互換性で、これらの画像を WP Rocket キャッシュから提供する場合は、 WebP キャッシュを有効にできます。

公式の WordPress リポジトリを見ると、他にもいくつかの画像最適化プラグインを入手できます。ただし、Web 画像のソリューションが必要な場合は、この記事で説明した 2 つのプラグインのいずれかを使用することをお勧めします。

手動で

WebP 画像を使用するには、CDN、プラグイン、またはこれらの両方を使用できます。手動の方法が気に入った場合は、以下の説明をご覧ください。

まず、アップロードする前に画像を WebP 形式に変換する必要があります。 Google で見つけることができるさまざまなオンラインコンバーターがあります。

Adobe Photoshop プラグインを使用すると、画像ファイルを WebP 形式で保存する権限が付与されることに注意してください。画像を WebP 形式に変換したら、次の方法でアップロードできます。あなたのダッシュボード。

アップロードする前に、テーマエディターにいくつかの変更を加える必要があります。アクティブなテーマの functions.php ファイルで、このコードを一番下に追加します。

 //** *webp 画像のアップロードを有効にします。*/
関数 enable_webp_mimes($existing_mimes) {
$existing_mimes['webp'] = '画像/webp';
$existing_mimes を返します。
}
add_filter('mime_types', 'enable_webp_mimes');

このコードを追加したら、[メディア] > [新規追加] に移動し、WebP ファイルを追加します。

まとめ

これで、WordPress で WebP 画像を使用する方法を理解できるはずです。投稿にリストされている方法のいずれかを試すことができます。投稿に関して提案や混乱がある場合は、 [email protected] までご連絡ください。

関連記事

WordPressでIPアドレスをブロックする方法
WordPressでコメントをオフにする方法
WordPressでホームページをカスタマイズする方法