今回は、WEB業界でもよく使用する「webp」について解説していくよ。
「Webp」って何？
【Webp（ウェッピー）とは？】画像を軽量化してサイトの表示速度を改善
WebP (ウェッピー)とは、GoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットのことで、画像の画質はそのままで軽量化した画像を書き出すことができます。
ファイルの拡張子（ファイル形式）は「.webp」が使用されています。
画像データをwebpにすることで、以下のような効果があります。
- 画像サイズを軽量化する
- サイトの表示スピードを上げる
- SEO的にもメリットがある
SEO的にも「Webp」を使用することが推奨されている
Webpは画像サイズが軽く、ホームページ制作やWebサイト制作では、SEOの観点から利用することが推奨されています。
しかし、「JPG」や「PNG」は知っていても、「Webp」という拡張子に関しては知らない方もまだまだ多いのではないでしょうか。
私自身もWEBの業界で働き始めてから知りました。
Googleが提供している「PageSpeed Insights」をブログやサイトなどに使用していると表示速度が遅いことが気になったことはありませんか？
実はこの画像の容量が重いとこのページの表示速度が遅くなってしまうのです。
Webpは画像の圧縮率が高く、表示速度の高速化に有利に働くことができるのです。
画像圧縮がSEO的に必要な理由
- 訪問者の直帰率を防ぐため
- SEOの評価を下げないため
- ユーザーにとって使いやすいサイトにするため
訪問者の直帰率を防ぐため
訪問者がWebサイトを訪問した際、コンテンツがなかなか表示されない場合、直帰率が上がるというデータがGoogleより発表されています。
そのためにも画像を圧縮し、WEBサイトを軽くすることで読み込む速度を速める必要があります。
SEOの評価を下げないため
Googleではユーザビリティの観点から、WEBサイトの表示速度も検索結果のランキングに影響するとしています。
画像が重たくWEBサイトの表示速度が遅い場合、SEOの評価が低くなってしまう可能性があります。
ユーザーにとって使いやすいサイトにするため
WEBサイトの読み込み速度が遅いと、ユーザーにストレスがかかり、結果的にWEBサイトの滞在時間が短くなったり、離脱率が上がったりし、SEOの評価が低下する可能性があります。
以上の理由から画像の圧縮は必要不可欠といえます。
「Webp」をWEBサイトに使用する際の注意点
- 対応していないブラウザも存在する可能性がある
- JavaScriptから使用判定が出ない場合がある
対応していないブラウザも存在する可能性がある
徐々にWebpに対応しているブラウザも増えていますが、古いブラウザでは対応されていないケースがあるので確認が必要です。
しかしながら現在ほとんどのブラウザでは対応しているため、基本的には問題ありません。
JavaScriptから使用判定が出ない場合がある
JavaScriptを使用して開発されたWebアプリケーションなどでは、Webpの使用判定が出ない場合があります。特にJavaScriptがメインになるアプリケーションでは、Webpの使用が出来ない可能性があります。
imageタグにWebpを直接埋め込むことで使用判定は出せるものの、工数がかかるため推奨していません。
Webpへ変換方法
- 変換サイトを使用する
- WordPressのプラグインを使用する
変換サイトを使用する
私がよく使用するのは「サルワカ」さんの「webp変換サイト」。
画像データをドラッグ＆ドロップするだけで、簡単にwebpに変換することができます。
WordPressのプラグインを使用する
WordPressにも、画像データを自動でWebpに変換してくれるプラグインがあります。
「WebP Converter for Media」です。
こちらのプラグインはWebpが使えるブラウザであるかを自動で判別し、使える場合はWebpにて表示、使えない場合はJPEGやPNGなどで表示してくれる優秀なプラグインです。
自動で判別してくれるので、作業側の負担を減らしてくれます。
さらに、すでにWordPressにある画像も一括でWebpに変換し、Webpに変換した画像を自動的に別のディレクトリに保存してくれます。
WordPressでWebサイトを運営している場合は、「WebP Converter for Media」をインストールするのがおすすめです！
まとめ
今回はWebP (ウェッピー)、GoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットについてご紹介しました。
webpを使用することで以下のようなメリットがあります。
- 画像サイズを軽量化する
- サイトの表示スピードを上げる
- SEO的にもメリットがある
知らなかった人は是非試してみてくださいね！
コメント