WordPressでのWebP画像の仕組み

ウェブサイトを検索エンジンにうまく配置するためには、ウェブサイトの読み込み速度が重要な要素であることは、すでに何度も述べています。 また、Google Speedでトップに立つ必要はないかもしれませんが、画像の最適化に関連するあらゆる努力は、SEOを改善する上で特に重要です。

WordPressコミュニティはこれをよく認識しており、このため、最新バージョン5.8では、WebP画像形式をサポートする機能が追加されました。

WebP画像とは何ですか

WebPは、2010年にGoogleによって開発された画像形式であり、PNGやJPGなどの形式に代わるものであり、同様の画像品質を維持しながら、はるかに小さいファイルサイズを生成します。 他の形式とは異なり、WebPは非可逆圧縮と可逆圧縮、および透明度とアニメーションをサポートしています。

これらの機能を備えていても、WebPは常に他の機能よりも小さいファイルサイズを提供します。 これらの画像形式のGoogle比較調査では、WebPの不可逆画像は、平均してJPGよりも30％小さく、PNGよりも25％小さいことがわかりました。

さらに、ウェブサイトの最適化レベルの評価者であるGoogle PageSpeed Insightsは、ウェブサイトの読み込み速度を向上させる機会の1つとして、最新の画像形式を使用することをお勧めします。

WebPにすべての画像を含める必要があるかどうかを検討する際の質問の1つは、さまざまなブラウザーの現在のサポートです。 あなたが望む最後のことはあなたの読者が画像を正しく見ることができないことです。

そして現実には、それぞれの支持が高まっています。 現在、95％のサポートについて話し合っています。

画像をWebPに変換する方法

WebP画像をライブラリにアップロードするには、明らかに、最初に必要なのは、問題の形式の画像です。 画像バンクから画像をダウンロードする場合は、必ずJPEGまたはPNG形式でダウンロードしてください。 したがって、最初のタスクは、画像をその形式に変換することです。 どのような選択肢がありますか？

画像デザインツール

Sketch、Adobe Photoshop、Cloudinaryなどの一部の画像デザインツールには、任意の画像をWebP形式で保存するオプションが含まれています。 変換したい画像を開いて、新しい形式で保存するのと同じくらい簡単です。

ただし、これが当てはまらない場合でも、以下に示すように、無料の代替手段があるので心配しないでください。

公式Googleツール

もう1つのオプションは、Linux、Widows、またはMac用のツールであるcwebpをダウンロードして、PNGまたはJPG画像をWebPに変換することです。 ダウンロードしてインストールすると、命令を直接実行して、コンピューター上の任意のイメージを変換できます。 したがって、たとえば、次のコマンドを使用して、PNG画像ファイルを品質範囲80のWebP画像に変換できます。

cwebp -q 80 image.png -o image.webp

同時に多数の画像を変換する必要がある場合は、この記事で、Unixライクな環境（macOSやUbuntuなど）での手順について説明します。これにより、大量の画像を変換できます。

また、同じ記事で、imagin-webpツールを使用してNode.jsで変換をプログラミングする方法についても説明しています。

オンラインコンバーター

1行のコードを記述したくない場合の別の方法は、オンライン画像コンバーターを使用することです。 グーグルすると、次のようなコンバーターの長いリストが簡単に表示されます。

• Ezgif Webp
• Cloudconvert
• Convertio
• オンライン-変換
• FreeConvert

それらすべてにおいて、あなたは画像をアップロードし、変換を実行し、変換されたファイルをダウンロードするだけです。

WordPressプラグイン

最後に、以下で説明するように、WordPressサイトに画像をアップロードするときに画像をWebP形式に変換するプラグインもあることがわかります。

WebP画像をメディアライブラリにアップロードする方法

この形式の画像ができたら、通常どおりWordPressメディアライブラリにアップロードできるはずですが…

おっと、それは動作しません！ 少なくとも、それは私にはありませんでした。 また、現在使用しているホスティングプロバイダーによっては、同じ問題が発生する可能性があります。

WordPressには、セキュリティ上の理由からサイトにアップロードできるMIMEファイルタイプに組み込みの制限があります。 MIMEは、Multipurpose InternetMailExtensionsの略です。 MIMEタイプは、ページに関連付けられているコンテンツのタイプを判別するためにブラウザーやその他のインターネットデバイスによって使用されます。 たとえば、ページに.pngファイルと.jpegファイルがある場合、ブラウザはMIMEタイプ（ファイル拡張子ではなく）から、両方のファイルをビデオやその他のファイルタイプではなく画像として処理する必要があることを認識します。

デフォルトでは、WordPressは登録されたMIMEタイプのリストをwp-includes/functions.phpに保存します。 ただし、認識されているすべてのMIMEタイプをアップロードできるわけではありません。

また、WebPの場合のように、この事前定義されたリストの外に拡張子を持つファイルをアップロードしようとすると、上記のエラーメッセージが表示されます。

ホスティング会社のドキュメントには、この新しいMIMEタイプのアップロードを許可する方法を変更するためのいくつかの選択肢があります。 これは通常、追加のファイルタイプを追加したり、ファイルを直接変更したりできるプラグインを使用するか、次のコードで独自のプラグインを使用することによって行われます。

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

または、次のコード行を追加して、 wp-config.phpファイルを変更します。

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

必要な変更を加えると、画像をアップロードできるようになります。 次の試み…

えーと、それも不可能なようです…

この場合、WordPressフォーラムで説明されているように、一部の解決策は、imagickライブラリがインストールされていることを確認し、サーバーを再起動することでした。 他の人（私の場合のように）の場合、画像をロードする唯一の方法は、画像のロードパネルの下部にあるブラウザ-アップローダーリンクを使用することでした。

そして出来上がり、私は私のWebP画像をアップロードしました！

画像をWebPに変換するWordPressプラグイン

このWebP形式の画像を使用することによるスペースと負荷の節約についてはすでに説明しました。 また、サーバーにアップロード済みのすべての画像を変換する方法を考えると、問題が発生します。 幸いなことに、WordPressの大部分の場合、この仕事を実行できるプラグインがいくつかあります。

これだけでなく、一部の画像は、ライブラリに画像をアップロードする前に、心配することなく画像をWebPに強制的に変換できます。 最もよく知られているもののいくつかは次のとおりです。

• EWWWイメージオプティマイザー
• WebP Express
• ShortPixel
• 想像する
• オプティモール
• メディア用WebPConverter

最後に、主要なWordPressホスティング会社は、Webサイトで画像を最適化することの重要性を非常に認識していることに注意してください。 このため、一部のプラグインは、サーバーに組み込まれた独自のプラグインをすでに提供しています。これらのプラグインは、ライブラリにアップロードした画像をWebPに自動的に生成し、それらをサポートするブラウザーに常に提供されるようにします。 これは、たとえば、SitegroundのSGOptimizerプラグインの場合です。

結論

WebPは高速で効率的であり、勢いを増しています。 私たちは、WordPressやブラウザでの大量採用に私たちが思っているよりも確かに近いです。 WordPressが取り残されていないこと、そしてWebP画像形式をサポートすることでWebサイトのSEOを最適化できることを嬉しく思います。

Unsplashのマリーナの注目の画像。