今回はGoogleが開発している静止画像フォーマットであるWebP(ウェッピー)をサイトに導入してみようというお話です。2021年5月にGoogleにてランキングに影響を与える新しいシグナル「ページエクスペリエンス」の導入や、ユーザビリティの向上の為に画像を軽くしましょう!などというGoogleの今後の方向性は間違いなくサイトの軽量化がテーマになります。WebP(ウェッピー)はサイトの軽量化に必須の画像の軽量化に最短の方法です。

ちなみに、サイトが重いかどうか?の確認はこれまたGoogleが提供している PageSpeed Insights(ページスピードインサイト)にて確認することができます。

PageSpeed Insights(ページスピードインサイト)とは?PageSpeed Insightsの使い方や機能
PageSpeed Insights(ページスピードインサイト)とは PageSpeed Insights(ページスピードインサイト)とは、ウェ…

WebP(ウェッピー)とは?

まずはおさらいです。WebP(ウェッピー)について知っておきましょう。

WebPとは?次のサイトに適した画像形式はWebPと言われるワケとは
サイトコンテンツを作る際、画像の作り掲載すると思います。その際の画像の形式として従来はJPEG・GIF・PNG・SVCあたりが使われてましたが、…
WebPの読み方はウェッピーです。WebPは2010年9月30日にGoogleから仕様が発表された新しい画像形式(静止画フォーマット)です。ファイルの拡張子は「.webp」になり、Googleが開発しています。開発がGoogleということもあり、ランキング要素であるCore Web Vitals(コアウェブバイタル)のPageSpeed Insightのスコアに対して、「.webp」を使用するようにと指摘が多く見受けられます。「.png」などでも画像圧縮をかけることで指摘をなくすことはできますが、それでもPageSpeed Insightの場合は、「.webp」を推奨してくることも多々あります。今後、Googleが開発していて、iOS14からAPPLE側(SAFARI)でも表示がされるようになったため、爆発的に普及していく可能性があります。

個人的な使用感ですが、確かにWebP(ウェッピー)の画像は容量がかなり圧縮されサイトでの画像表示スピードも早いです。ですが、WebPに対応していない画像編集のプラグインやツールもあるため、なかなか導入に踏み切れない企業様も多いと思います。サイトにおいての画像形式としてのみ使用するケースとしては今後増えていくことでしょう。

オンラインのWebP変換ツールを使用した場合、以下の画像のような圧縮になります。

圧縮の度合いでは、通常の画像圧縮ツールとそこまで大差ないかもしれません(笑)ですが、Googleが開発し、推奨しているのがこのWebPです。ですので、そこまで変わらないのであればWebPを使用していくほうが無難と考えます。

ワードプレスの画像圧縮プラグインはこれが便利!とっても簡単にサイト高速化!
ワードプレスのコアは、柔軟性を保つために、不必要なコードで膨れがらないように設計されています。ユーザーそれぞれが、特定のニーズに合った様々なプラ…

WebP(ウェッピー)に画像を変換する

WebP(ウェッピー)を作るには、Photoshopなどに追加でプラグインを入れるなどの対応で作成することが可能ですが、何かしら加えないと作成できません。ですので、WebPの画像形式を使う場合は、JPGやPNGなどの従来使用されてきた画像をWebPに変換して使うことがおすすめします。

2020年に将来的にWebP(ウェッピー)の使用が増えると考えられたため、2021年現在、様々なWebP変換のオンラインツールや、ソフトがありますが、その中でもおすすめのものをご紹介します。

まずはオンラインで画像をWebP(ウェッピー)に変換できるサイトですが。

  • SYNCER:オンラインWEBP変換ツール。1番使いやすいです。動作も早く圧縮も問題なく重宝させていただいてます。
  • iLoveIMG:画像圧縮でお世話になってました。こちらもWEBP変換に対応しています。
  • Convertio:動画の変換などで使用していた記憶がありますが、こちらもWebP対応です。

この3つがおすすめです。また、XnConvert、Advanced Batch Image Converterなどのフリーソフトでも対応しています。オフラインでPC上で行いたい方はそちらをご利用ください。

WebP(ウェッピー)をワードプレスサイトに導入

さて、上記をお読み頂いた上で、いざWebP(ウェッピー)で画像を作りアップロードしようとしてもワードプレスを用いたサイトだとアップロードができないケースがあります。

最初にメディア追加にて画像を追加しようとすると、WebPは通常のWindowsの仕様だと表示されません。カスタムファイルではなく、「すべてのファイル」を選択してみましょう。

次に、WebPの画像を選択して、追加しようとすると下記のようなエラーが出るかと思います。

WEBPをアップロードできない

ワードプレスを使用しているサイトでは、デフォルトの状態ではWebPは使用できません。使用したい場合は下記のような対応を行ってください。

FTPで直接WebP画像ファイルをアップロード

ワードプレスの記事投稿の際の「メディアファイルを追加」ではWebPの画像形式ではアップロードできませんが、FTPから直接アップロードする場合は、アップロード可能です。2つの画面を出すことになってしまいますが、FTPクライアントから直接メディアフォルダへ画像をアップロードしてあげてください。

こちらはSEOの教科書では推奨してません。手間なので。

ワードプレスのプラグインを利用してアップロード

画像圧縮などのプラグインでWebPに対応しているものは、アップロードと同時にWebPに変換してくれます。SEOの教科書でもご紹介している「EWWW Image Optimize」などは対応可能だそうです。プラグインをよく利用されているサイト運営者の方なら、このプラグインを使ってWebPの画像をアップロードするのが1番早く、難しくもないと思います。

おすすめ画像圧縮プラグイン」から選んでWebPに対応しているかはご確認ください。WebPに対応していないプラグインもまだ多いので、インストール前に確認することをおすすめします。

functions.phpでWebPを記載

SEOの教科書、また弊社が運営しているサイトはこのfunctions.phpに記載する方法を利用しています。

function custom_mime_types( $mimes ) {
$mimes[‘webp’] = ‘image/webp’;
return $mimes;
}
add_filter( ‘upload_mimes’, ‘custom_mime_types’ );

上記をそのままfunctions.phpというファイルに貼り付けて保存してください。記載するとJPGやPNGなどの他の画像形式と同様にWebPを使用することができます。投稿画面などのメディア追加でもWebPが選択できるので1番便利です。また、プラグインとは違い、通常の状態で使用できるので、投稿画面の遷移が早くおすすめです。

WebP(ウェッピー)をワードプレスのサイトに導入したい場合は、上記の3つの対策から1つを選んでやってみてください。

WebP(ウェッピー)の導入はこれからどんどん進んでいくことと思われます。ウェブサイト構築の際に、画像形式の選択を最初にするような流れにしていきましょう。