2021-07-23
2021-9-22
SEO対策にも。Google開発の次世代フォーマット、「webp」を使ってみた
frontend,
最近は自社のホームページ制作を担当しています。 画像の読み込みが遅いので対応策を調べていたところ、webpが良いのかなと思ったのでまとめてみました。
webpとは
webp(ウェッピーと読むそうです)とは画像フォーマットのことです。画像の拡張子といえば、「.jpg」や.「png」を思い浮かべると思うのですが、 それらの次世代フォーマットと言われています。「.webp 」が拡張子になります。
登場は2010年
次世代と言われていますが、登場したのは2010年です。当時は対応ブラウザが少ないことなどから目立つことはありませんでした。しかし、近年になって対応ブラウザが増えたことから、注目されるようになりました。
ファイルサイズが小さい
.webpの一番のメリットは、ファイルサイズが小さいことです。.png、.jpgなどと同等の画質で、それらと比べファイルサイズが25%ほど削減できます。ファイルサイズは小さければ小さいほど良いですから魅力的ですよね。
SEO対策にも
ファイルサイズが小さければ、当然読み込み速度も速くなりますよね。 画像の読み込み速度はユーザー体験を向上されるものの一つで疎かにはできません。画像の表示速度はSEOにも反映されます。
Lighthouseでも次世代フォーマットを使うことを推奨しています。
next/imageはwebpに自動変換対応
Next.jsの持つnext/imageでは、自動画像最適化によりブラウザがwebpに対応している時に、自動で変換して提供してくれます。さすがNext.js。
実際に画像を最適化し、webpに変換する
1, まずは、Optimizillaを使って画像を最適化するのが良いでしょう。
画像をドロップするだけで、簡単に圧縮してくれます。圧縮率がすごいですね。
2, 拡張子を「.webp」に変換しましょう。 ちなみにVSCodeだと「.webp」のアイコンがあります(専用なのかな？）。
これだけで、画像の読み込み速度に違いを感じれるのではないかと思います。
ぜひ試してみてください。
