近年、Webサイトの作成にwebp(ウェッピー)というGoogleが開発した次世代画像フォーマットが利用されるようになりました。本記事ではwebpへ拡張子の変換方法や、JPG・PNGなどの従来の画像形式との違い、使用する上でのメリット・デメリットも徹底解説。GoogleでのSEO対策にも役立つので、ぜひ参考にしてみてください。
Webサイトで利用される画像の形式は、今まではJPGやJPEG、PNG、GIFが主流でした。
しかし、ここ最近、JPGやPNG、GIFに変わる画像形式としてWebPという形式が頻繁に使われるようになっています。この記事では、WebPとはどのような特徴を持つ画像形式で、JPGなどからどのように変換すればいいのか詳しく解説します。
WebP(ウェッピー)とは、Googleが次世代画像フォーマットとして2010年に仕様を公開した画像形式です。画質をある程度保ったまま高圧縮でき、高速表示が可能な画像形式であることから、Webサイトを作成するときにはWebP形式の画像を利用することが推奨されています。
JPGはJPEGと全く同じ画像形式で拡張子が違うだけです。JPEGとは「Joint Photographic Experts Group」を略したことばです。JPG・JPEGは1,677万色のフルカラーで表現できるのにデータ量が比較的軽いために、写真を保存する時のファイル形式としてよく利用されています。
ただし、画像の一部の透過処理はできません。背景が白いJPG・JPEGの画像を他の画像の上に載せても、JPG・JPEG画像の白い部分に下の画像を映すことはできません。
また、WebPもフルカラーの表現が可能です。同程度の画質の画像でデータ量を比べると、WebPのほうがデータ量が小さく表示速度が高速化します。WebサイトにはJPG・JPEGよりもWebPを利用したほうがいいでしょう。
PNGとは「Portable Network Graphics」を略したことばです。JPG・JPEGとの違いは背景透過が可能な点です。PNG画像は白い部分が透過するので、下に重ねた別の画像を背景として映し出すことができます。また、圧縮しても元に戻す事ができるので、何度も保存しても画像が劣化しません。
WebPとの違いはPNGはデータ容量が大きい点にあります。同じ画質の画像なら、2割から3割程度、PNGよりもWebPのほうがデータ量が小さくなります。WebPは透過もできる上にデータ量が少ないので、Webサイトの作成にはPNGよりもWebPのほうがおすすめです。
GIFとは「Graphics Interchange Format」を略したことばです。GIFはアニメーションを作るのに適したファイル形式です。ただし、最大256色しか使えません。また、他の画像形式と比べると画像が荒くなる傾向にあります。
WebPもアニメーションに対応しているので、今後のアニメーション画像はGIFではなくWebPが主流になっていくでしょう。
WebPのメリットは画質を落とすことなくファイルサイズを軽量化できます。同程度の画質の画像で比較した場合、JPGやPNGよりも最低でも25%程度WebPの画像のほうがサイズが軽量化します。
現在、SEO対策のポイントの一つがサイトの表示速度です。Googleはユーザーがリンクをクリックしてからページを読み込むまでにかかった時間を計測していて、より高速で読み込めるページにユーザビリティの高いサイトとして高評価を与えています。
ページに貼った画像ファイルのサイズは小さければ小さいほど表示速度は高速化します。画像の質を落とさずにページの表示速度を高速化したい場合には、JPGやPNGを使うよりもファイルサイズの軽いWebPを使ったほうがいいでしょう。WebPの利用はSEO対策としてもメリットが大きいのです。
WebPは、従来の画像形式であるJPG・JPEG、PNG、GIFのそれぞれが持つメリットにも対応しているという特徴があります。
JPG・JPEGのフルカラー対応、PNGの背景透過、GIFのアニメーションもWebP一つですべて対応しています。
WebPで背景透過やアニメーションにすると、単なる画像だけのWebPよりもファイルサイズは大きくなってしまいます。しかし、PNGやGIFを扱っていたときと比較するとファイル容量は小さくてすみます。
ファイル容量の大きいPNGやGIFの扱いに四苦八苦してきたWeb開発者は、WebPを導入することでサイトの容量を削減できる可能性が高いでしょう。
WebPを使うメリットには、背景透過が可能であるという点もあります。PNGと同じように背景透過ができる上に、ファイルサイズはPNGと比較すると小さくできます。
WebPを背景透過にするときには、補助データであるアルファチャンネルを扱う必要があります。アルファチャンネルを追加することで、従来のWebP画像よりも透過画像のファイルサイズは大きくなってしまいます。しかし、それでも同じ画質のPNGよりもファイルサイズは軽くなります。
画像の形式には可逆圧縮と非可逆圧縮があります。可逆圧縮とは、いったん切り取りや圧縮して保存しても、元の画像と同じ状態に戻すことができる圧縮形式です。画像形式ではPNGが可逆圧縮に対応しています。GIFもPNGほどではありませんが、可逆圧縮が可能です。
非可逆圧縮とは、切り取ったり拡大や縮小をして保存してしまうと、元の画像に戻すことができない画像のファイル形式です。もともとJPGやJPEGは非可逆圧縮で、加工したあとで保存してしまうと元のファイル形式には戻せません。
WebPも非可逆圧縮なので、加工後に保存してしまうと、元の画像に戻すことはできません。WebPを加工するときにはその点に注意して慎重に加工と保存を行いましょう。
WebサイトにJavaScriptを使う場合には、WebPは使用しない法が良いでしょう。その理由は、JavaScriptではWebPの使用判定が出ないことがあるためです。
どうしてもJavaScriptを使ったWebサイトやWebアプリケーションにWebPの画像を使いたい場合には、imageタグにWebPを直接埋め込めば利用できます。しかし、imageタグを使う方法では工数がかかりすぎるので、JavaScriptを利用する場合にはWebPは使わないほうがいいでしょう。
JPGやPNG、GIFのいいとこ取りとも言えるWebPが2010年に提供開始されたのに、今まで普及してこなかった理由は、対応しているブラウザが少なかったためです。
今まで対応してきたブラウザは、開発元であるGoogleのChromeの他にMicrosoft Edge、Firefoxのみでした。Windows10やAndroid端末で利用されている主要なブラウザはカバーしていますが、Internet Exploreには対応していません。また、MacとiPhoneのデフォルトのブラウザであるSafariにも対応していませんでした。
しかし、IEが提供されていたWindowsではWindows10ではEdgeが標準ブラウザとなり、IEもサポートの終了によってユーザーは激減しています。また、iOS14からはSafariでもWebPに対応しています。
今後は、WebPを使ったとしても、WebPを使ったサイトの閲覧ができないブラウザのユーザーが5%以下に減っていくので、WebPを導入するサイトが増えていくものと思われます。
1 / 2
続きを読む