webpファイルワードプレス

WordPressウェブサイトの総読み込み時間に大きな役割を果たすため、画像の最適化が非常に重要であることは、ほとんどの人が知っています。今日は、GoogleのWebPファイルをWordPressサイトに統合する簡単な方法を紹介したいと思います。一部のユーザーは、70%以上の画像ファイルサイズの縮小を見てきました!


WebPとは?

に慣れていない場合 WebP, これは、より小さくて高速な画像を作成することを目的として、Googleのウェブパフォーマンスチームが作成した画像ファイル形式です。これは2010年に最初に発表され、非可逆圧縮方式と可逆圧縮方式の両方を備えています。画像は、使用するMIMEタイプに基づいて、ウェブサーバーからウェブブラウザに配信されます。 画像/ webp.

WebPロスレス画像は 26%小さい PNGと比較してサイズが大きく、WebP非可逆画像は 25〜34%小さい JPEGより.

YouTubeやeBayなどの企業は、すでにWebPを使用して多くのサイトを静かに強化しています。以下はeBayの例で、ホームページでは平均して約30のWebPファイルが使用されています。.

webpの使用法ebay

なぜWebPがそれほど重要なのですか?による httparchive, 2016年8月現在, 画像は、平均的なWebページの重みの64%以上を占める. 通常は、CSS、JS、HTMLを組み合わせただけではありません。したがって、ページの重みをできるだけ減らすことができるように、堅牢な画像最適化方法とWebPなどの画像形式を選択することが重要です。一般に、ページが小さいほど、読み込みが速くなります。そしてそれはあなたの訪問者だけでなくGoogleも喜ばせるでしょう ページ速度はランキング要素です.

WebPサポート

WebPは非常にエキサイティングですが、ブラウザのサポートについて言及することも重要です。現在、すべての最新ブラウザーがWebPをサポートしているわけではありません。による 使ってもいいですか, WebPは現在、Chrome 23以降、Opera 39以降、Opera miniのすべてのバージョン、Androidブラウザー4.3以降、Chrome for Androidでサポートされています.

webpブラウザーのサポート

ちょっと待って!失望しすぎないでください。チュートリアルでは以下に説明しますので、 WebPファイルをサポートされているブラウザーとJPG / PNGにフォールバックとして配信する. つまり、サポートされていないブラウザでは壊れた画像は表示されず、以前に表示されていたものだけが表示されます。 WebPは、移行ではなく、WordPressサイトへの追加として考える.

による W3Schools, Chromeはブラウザの市場シェアを70%強で独占しています。ただし、市場シェアを確固たる証拠として捉えるだけでなく、自分のビジターのデータを見て、彼らが使用しているブラウザを確認してください。ニッチによって異なる場合があるためです。統計がどれほど歪んでいるかに驚かれるかもしれません。 Googleアナリティクスの[オーディエンス]で[ブラウザとOS]をクリックして、ユーザーがサイトにアクセスしたときに使用しているブラウザを確認できます。ランダムなWebサイトをプルしました。以下に示すように、訪問者の67%がChromeから、さらに1%がOperaからです。そう これらの人々の68%は、WebPを表示して利益を得ることができます 画像ファイル形式!

ブラウザchrome webp

WordPressでWebPファイルを使用する方法

今日の例では、2つの異なるWordPressプラグインの組み合わせを使用して、WebPを起動し、WordPressで実行します。これらは、グローバルコンテンツ配信ネットワーク(CDN)であるKeyCDNでチームによって作成および開発されています。.

  1. 【プレミアム】 Optimus Image Optimizer:WordPress用のロスレス画像圧縮プラグイン、画像をWebPに変換
  2. [自由] WordPressキャッシュイネーブラー:キャッシュプラグイン WebPを提供できます サポートされているブラウザへ

Optimus Image Optimizer

Optimus Image Optimizerは、 WordPressリポジトリ, から optimus.io, または、プラグインダッシュボード内から。注:画像をWebPに変換する場合は、プレミアムライセンスが必要です。インストールしたら、プラグイン設定で「WebPファイルの作成」を有効にできます.

webpファイルの作成

WebPが有効になった後、これは基本的に、変換されるすべてのものの追加のイメージを作成します。したがって、PNGファイルまたはJPGをアップロードすると、画像の.webpバージョンも存在するようになります。 PNG / JPGはまだサポートされていないブラウザへの配信に使用されているため、PNG / JPGは引き続き必要です。 Optimusはロスレス圧縮を行うため、PNGおよびJPGも圧縮されます.

webpおよびpngファイル

以前に画像をすでに圧縮していて、それでもWebPに変換する必要がある場合に備えて、一括オプティマイザーオプションもあります。.

一括画像オプティマイザー

WordPressキャッシュイネーブラー

WebP画像が作成されたので、サポートされているブラウザーにWebP画像を提供し、他のブラウザーにPNG / JPGを提供するようにWordPressに指示する方法が必要です。これは、無料のWordPress Cache Enablerプラグインで実現できます。プラグインは、 WordPressリポジトリ または、プラグインダッシュボード内からインストールします。インストールしたら、プラグイン設定で「追加のWebPキャッシュバージョンの作成」を有効にできます.

キャッシュイネーブラ設定

このオプションを有効にすると、ページの追加のキャッシュされたWebPバージョンが作成されます.webpバージョン

これで完了です。これで、WordPress WebサイトでWebPファイルが実行されます。.

JPGとWebPの比較

の比較を実行しました JPGからWebP 達成できる違いを示す.

ファイル名元のJPG圧縮されたJPGWEBPフォーマットサイズ差%
jpg-to-webp-1.jpg758 KB685 KB109 KB86%
jpg-to-webp-2.jpg599 KB529 KB58.8 KB90%
jpg-to-webp-3.jpg960 KB881 KB200 KB79%
jpg-to-webp-4.jpg862 KB791 KB146 KB83%
jpg-to-webp-5.jpg960 KB877 KB71.7 KB93%

WebPは 平均画像サイズが85.87%減少.

PNGとWebPの比較

繰り返しになりますが、 PNGからWebPに 達成できる違いを示す.

ファイル名元のPNG圧縮されたPNGWebP形式サイズの違い%
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

WebPは 平均画像サイズが42.8%減少.

概要

ご覧のとおり、WebPはWordPressサイトに非常に簡単に実装でき、大幅に小さい画像ファイルサイズを実現できます。 WebPの節約に匹敵するような画像圧縮はありません。ああ、それから、WebPにはロスレス圧縮を使用する機能があると言ったでしょうか。つまり、品質が著しく低下することはありません。 WordPressを高速化するためのより良い方法を探しているなら、WebPは素晴らしいソリューションです.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me