WordPress で WebP ファイルを使用する方法
画像の最適化は WordPress ウェブサイトの総読み込み時間に大きな影響を与えるため、非常に重要であることはほとんどの人が知っています。今日は、Google の WebP ファイルを WordPress サイトに統合する簡単な代替方法を共有したいと思います。一部のユーザーは、画像ファイルのサイズが 70% 以上削減されたことを確認しています。
WebPとは何ですか?
WebP に詳しくない方のために説明すると、WebP は、より小さくて高速な画像を作成することを目的として、Google のウェブ パフォーマンス チームによって作成された画像ファイル形式です。 2010 年に初めて発表され、非可逆圧縮方式と可逆圧縮方式の両方が特徴です。画像は、image/webp という MIME タイプに基づいてウェブサーバーからウェブブラウザに配信されます。
WebP ロスレス画像は PNG と比較してサイズが 26% 小さく、WebP ロスレス画像は JPEG より 25 ～ 34% 小さくなります。
YouTube や eBay などの企業は、すでに WebP を使用して多くのサイトをサイレントに強化しています。以下は eBay の例です。eBay のホームページには、平均して約 30 個の WebP ファイルがあります。
WebP はなぜそれほど重要なのでしょうか? httparchive によると、2016 年 8 月の時点で画像は平均的なウェブページの重量の 64% 以上を占めています。通常、これは CSS、JS、HTML を組み合わせたもの以上のものになります。したがって、ページの重量を可能な限り減らすことができるように、堅牢な画像最適化方法と WebP などの画像形式を選択することが重要です。一般に、ページが小さいほど、読み込みが速くなります。ページ速度はランキング要素であるため、これは訪問者だけでなく Google にとっても喜ばしいことです。
WebP のサポート
WebP は非常に興味深いものですが、ブラウザーのサポートについても言及することが重要です。現時点では、最新のブラウザすべてが WebP をサポートしているわけではありません。 caniuse 氏によると、WebP は現在 Chrome 23 以降、Opera 39 以降、Opera mini のすべてのバージョン、Android ブラウザ 4.3 以降、Chrome for Android でサポートされています。
ちょっと待って！あまりガッカリしないでください。以下で説明するチュートリアルでは、WebP ファイルをサポートされているブラウザに配信し、JPG/PNG をフォールバックとして配信する方法があるからです。これは、サポートされていないブラウザでは壊れた画像が表示されず、以前に表示されていたものだけが表示されることを意味します。 WebP は移行ではなく、WordPress サイトへの追加であると考えてください。
W3Schools によると、ブラウザ市場シェアは Chrome が 70% 強を独占しています。ただし、市場シェアだけを確実な証拠として捉えるのではなく、自社の訪問者のデータを調べ、訪問者がどのブラウザを使用しているかを確認してください。これは、専門分野によって異なる可能性があります。ただし、統計がどれほど偏っているかに驚かれるかもしれません。 Google Analytics の [Audience] で、[Browser & OS] をクリックすると、サイトにアクセスしたときにユーザーが使用しているブラウザを確認できます。ランダムな Web サイトを抽出したところ、以下に示すように、訪問者の 67% が Chrome から、さらに 1% が Opera から来ていました。つまり、これらのユーザーの 68% が WebP を表示してその恩恵を受けることができるということになります。
WordPress で WebP ファイルを使用する方法
今日の例では、2 つの異なる WordPress プラグインを組み合わせて使用し、WordPress で WebP を起動して実行します。これらは、グローバル コンテンツ配信ネットワーク (CDN) である KeyCDN のチームによって作成および開発されています。
- [プレミアム] Optimus Image Optimizer: WordPress 用のロスレス画像圧縮プラグイン、画像を WebP に変換します
- [無料] WordPress Cache Enabler: サポートされているブラウザに WebP を提供できるようにするキャッシュ プラグイン
オプティマスイメージオプティマイザー
Optimus Image Optimizer は、WordPress リポジトリ、optimus.io、またはプラグイン ダッシュボード内からダウンロードできます。注: 画像を WebP に変換する場合は、プレミアム ライセンスが必要です。インストールしたら、プラグイン設定で「WebP ファイルの作成」を有効にすることができます。
WebP を有効にすると、基本的に、変換されるすべてのものに対して追加のイメージが作成されます。したがって、PNG ファイルまたは JPG をアップロードすると、画像の .webp バージョンも追加されるようになります。 PNG/JPG はサポートされていないブラウザに提供するために引き続き使用されるため、依然として必要であることに注意してください。 Optimus は可逆圧縮を行うため、PNG と JPG も圧縮されます。
画像をすでに圧縮していて、WebP に変換する必要がある場合に備えて、一括オプティマイザー オプションもあります。
WordPress キャッシュ イネーブラー
WebP 画像を用意したので、サポートされているブラウザには WebP 画像を提供し、他のブラウザには PNG/JPG を提供するように WordPress に指示する方法が必要です。これは、無料の WordPress Cache Enabler プラグインを使用して実現できます。プラグインは WordPress リポジトリからダウンロードすることも、プラグイン ダッシュボード内からインストールすることもできます。インストールしたら、プラグイン設定で「追加の WebP キャッシュ バージョンを作成」を有効にできます。
このオプションを有効にすると、ページの追加のキャッシュされた WebP バージョンが作成されます。
それがそれです！これで、WordPress Web サイト上で WebP ファイルが実行されるはずです。
JPG と WebP の比較
JPG と WebP を比較して、達成できる違いを示しました。
| FILE NAME | ORIGINAL JPG | COMPRESSED JPG | WEBP FORMAT | SIZE DIFFERENCE % |
|---|---|---|---|---|
| jpg-to-webp-1.jpg | 758 KB | 685 KB | 109 KB | 86% |
| jpg-to-webp-2.jpg | 599 KB | 529 KB | 58.8 KB | 90% |
| jpg-to-webp-3.jpg | 960 KB | 881 KB | 200 KB | 79% |
| jpg-to-webp-4.jpg | 862 KB | 791 KB | 146 KB | 83% |
| jpg-to-webp-5.jpg | 960 KB | 877 KB | 71.7 KB | 93% |
WebP により平均画像サイズが 85.87% 減少しました。
PNG と WebP の比較
繰り返しますが、達成できる違いを示すために、PNG と WebP の比較も実行しました。
| File Name | Original PNG | Compressed PNG | WebP Format | Size Difference % |
|---|---|---|---|---|
| png-to-webp-1.png | 44 KB | 34 KB | 30 KB | 32% |
| png-to-webp-2.png | 46 KB | 35 KB | 33 KB | 28% |
| png-to-webp-3.png | 43 KB | 31 KB | 25 KB | 42% |
| png-to-webp-4.png | 30 KB | 24 KB | 18 KB | 40% |
| png-to-webp-5.png | 15 KB | 11 KB | 8 KB | 47% |
| png-to-webp-6.png | 34 KB | 24 KB | 18 KB | 47% |
| png-to-webp-7.png | 15 KB | 13 KB | 8 KB | 47% |
| png-to-webp-8.png | 63 KB | 47 KB | 44 KB | 30% |
| png-to-webp-9.png | 48 KB | 36 KB | 33 KB | 31% |
| png-to-webp-10.png | 17 KB | 14 KB | 11 KB | 35% |
| png-to-webp-11.png | 18 KB | 13 KB | 9 KB | 50% |
| png-to-webp-12.png | 61 KB | 45 KB | 39 KB | 36% |
| png-to-webp-13.png | 32 KB | 25 KB | 21 KB | 35% |
| png-to-webp-14.png | 26 KB | 21 KB | 17 KB | 35% |
| png-to-webp-15.png | 14 KB | 12 KB | 9 KB | 36% |
| png-to-webp-16.png | 36 KB | 27 KB | 24 KB | 33% |
| png-to-webp-17.png | 14 KB | 12 KB | 8 KB | 43% |
| png-to-webp-18.png | 21 KB | 18 KB | 13 KB | 38% |
| png-to-webp-19.png | 42 KB | 30 KB | 27 KB | 36% |
| png-to-webp-20.png | 23 KB | 20 KB | 18 KB | 22% |
WebP により平均画像サイズが 42.8% 減少しました。
まとめ
ご覧のとおり、WebP は WordPress サイトに非常に簡単に実装でき、画像ファイルのサイズを大幅に小さくすることができます。 WebP による節約に匹敵する画像圧縮はありません。ああ、WebP には可逆圧縮を使用できる機能があることについては触れましたか?つまり、目立った品質の低下は見られません。 WordPress を高速化するためのより良い方法を探している場合、WebP は優れたソリューションとなります。