Webpという画像拡張子と突然出会った。

プロパティを見ると「Chrome HTML Document」となっている。

画像ファイルではないのか…バグッたのかなと思ったが、これは米Googleが開発している静止画フォーマットとの事です。

読み方は「ウェッピー」

ゆるキャラみたいじゃないか！

開いてみるとエラーで開けない…表示するソフトはどうしたら良いのか。

とりあえず拡張子をjpgにリネームしてみたらいつものビューアで見ることは出来た。

このまま使うのは何だか不安なのでちょっと調べてみました。

ファイルの拡張子は .webp
採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。

• JPEGと比較してファイルサイズが25-34％小さくなる（非可逆圧縮モード）
• PNGと比較してファイルサイズが28％小さくなる（可逆圧縮モード）
• JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える
• エンコードは PNG よりも時間がかかるけど、デコードは PNG よりも高速

WebP lossy support
Google Chrome (desktop) 17+
Google Chrome for Android version 25+
Opera 11.10+
Native web browser, Android 4.0+ (ICS)
WebP lossy, lossless & alpha support
Google Chrome (desktop) 23+
Google Chrome for Android version 25+
Opera 12.10+
Native web browser, Android 4.2+ (JB-MR1)
Pale Moon 26+
WebP Animation support
Google Chrome (desktop and Android) 32+
Opera 19+

img要素にWebPファイルを指定することもできるのですが、Chromeでしか画像を表示できません。

なんとも不便ですね。普段は使うこと無さそう…

そこでひと工夫…picture 要素を使う必要があります。

<picture>
  <source type="image/webp" srcset="sample.webp" />
  <img src="sample.png" width="400" height="400" alt="サンプル画像" />
</picture>

picture要素のなかにimg要素を含めます。
alt 属性や width 属性・height 属性はimg 要素にのみ記述します。

そうするとWebP画像対応ブラウザーではsource要素に指定した画像が優先され
img要素内の src 属性が srcset 属性の内容に差し替わるようになります。

picture要素自体のブラウザ対応はIE以外は基本的にOKみたいです。
(2018/10/18 現在)

■無料ソフト
WebP画像を作る君

■GulpやGruntのプラグインを使う
grunt-webp
gulp-webp

■フォトショのプラグイン
WebP Format