次世代画像フォーマットを使ってみる

WebP


日々テクノロジーが進化していますが、Webにおける画像の形式も進化が必要なようです。
その一つにあるのが「WebP」という画像フォーマット。ちなみに読み方はウェッピーと読むそうです。
Googleが開発しているオープンな静止画フォーマットでファイルの拡張子は「.webp」となっています。
歴史は意外と古く2010年ぐらいから開発していたそうです。

特徴


最大の特徴は「画質綺麗なのに軽い」というところ。
PNGに比べて26%軽く、JPGより25~34%も軽くなるそうです。
モバイルでのWeb読み込み速度のアップにつながるのでかなり大きいのではないでしょうか。
ちなみに、透過画像やアニメーションもできるそうです。

普及度


気になる普及度です。当然ながら対応していないブラウザでWebPは表示することはできません。
まぁ、結論から言うと最近のブラウザであればまずまず問題はなさそう。

唯一対応していないのはSafariぐらいでしょうか。
IEもまぁ、対応していないといえばいないですが…

共存?


こういった最新の技術につきものの古い子をどうするか。
WordpressであればEWWW Image Optimizerあたりを使っていれば、WebPへの変換オプションが付いているのでそれを使えば今のところ楽できます。
そんでもって、アクセスしてきた人がWebP対応ブラウザで、且つWebP画像が用意されていれば表示するといったようにhtaccessで制御をするだけですかね。

htaccessめも

調べていくつかあったので適当にメモ。
古いChromeとかFirefoxとか使ってると場合によってうまく出ない時があるような気がする。

EWWWのやつ

アイデアマンズブログより

よくあるやつの改良型

最後に


今回、この記事で使われている画像はすべてWebPに変換をしてアップロードをしてみました。
一応、EWWWによってPNGにも自動で変換されているっぽいのであまり利用する人は気にしなくてもよさそうなんですけどね。
しばらくの間はこうやって2つ用意しないといけないのはちょっと面倒よね。
あと検証はいろいろしているが、htaccessがうまいこと行ってるかがなかなか不安。