LAMP通販サイトオープン
LAMP通販サイトオープン
2020.04.03
#2
LIG技術研究会

画像フォーマットWebP(ウェッピー)について詳しく調べてみた|WebP編

ぜんちゃん

こんにちは! フロントエンドエンジニアのぜんちゃんです。

最近発足したLIG技術研究会では、いろいろなテーマを決めて研究をしています。

LIG技術研究会って?
日頃感じているWeb技術に関する疑問や不明な点を、研究員(LIG社員)がそれぞれのアプローチによって紐解いていく会。まだまだ謎が多い。

今回もWebP編! WebPとはなにか、歴史や特徴、変換の方法について詳しく調べてみたのでご紹介したいと思います。

WebPとは

WebPとは、Googleが新しく作った画像フォーマットのことです!

画像は sample.png のように、拡張子でフォーマットが指定されていますよね。同じように、WebP画像も sample.webp のような形で保存されます。

ちなみに、読み方はウェッピーです。

また、Wikipediaには、

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
引用元:Wikipedia

と書いてあります。非可逆圧縮でもアルファチャンネルを扱えるということは、透過した画像もWebPとして書き出すことができるということです。

WebPの歴史

次世代フォーマットともいわれるWebPですが、なんと2010年から存在していたようです。

2010年9月30日にGoogle Chromeの公式ブログ上で仕様公表
2011年Google社がGoogle Chrome 9.0とAndroid 4.0をリリースし、WebPに対応
引用元:アニメーション画像の歴史 APNG-WebP戦争

現在(2020年2月時点)はブラウザ対応も進み、Chrome、Edge、Firefoxなどが対応しています。しかし、Safariは対応していません。
参考:Can I use… Support tables for HTML5, CSS3, etc

WebPのデメリット

iPhoneのシェア数が多い日本でWebPを使う場合、非対応ブラウザでは他の画像を表示するというような対応が必要そうですね。

過去記事に対応方法が書いてあるので、ぜひ参考にしてください!

WebPのメリット

ブラウザ対応をする必要がある一方で、WebPを使うことによるメリットもあります……!

それは、画像サイズを小さくできることなんですね〜。「JPEGと比較して25-34%小さくなる」といわれています。

サイズが小さくなるとページ表示速度が上がり、SEO対策にもなります!

JPEGとWebPの画像サイズを比較してみた

実際に、同じ画像を使って比較してみます!

私が以前書いた記事のアイキャッチ画像を使ってみます。

比較した結果は……
JPEGとWebP比較

もともとのJPEG画像が68KBに対して、WebPファイルに圧縮した画像は17KB!!!

WebP軽すぎる〜〜

WebPを導入するメリットは大きそうですね……。

WebP変換の方法まとめ

次に、WebPに変換するための方法を調べたので、ご紹介します。

WebサイトでWebP変換

調べたところ、WebP変換ツールができるサイトがたくさんありました。

コマンドを使ってWebP変換

WebP変換するために、Googleがコマンドを提供しています。

Getting Started  |  WebP  |  Google Developers

こちらのコマンドを使うためには、直接ダウンロードするか、Homebrewを使ってインストールします。
brew install webp

cwebp 画像ファイルをWebPファイルに圧縮する。
入力形式は、PNG、JPEG、TIFF、WebP。

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

オプションは、ドキュメント参照

dwebp WebPファイルを画像ファイルに解凍する。

dwebp image.webp -o image.png

gif2webp GIF画像をWebPに変換する。

gif2webp [options] input_file.gif -o output_file.webp

img2webp 入力画像のシーケンスからアニメーションWebPファイルを作成する。

img2webp argument_file_name

まとめ

WebPはブラウザ対応が必要になるので、他の画像フォーマットを使用するよりも少し手間がかかります。が、WebP対応をすれば画像が軽くなるので、読み込み速度がぐんと上がりそうですね!

引き続き、LIG技術研究会を通して技術を研究し、ブログで発信していけるように頑張っていきますので、また見ていただければ幸いです!

それでは! ぜんちゃんでした。