タグにWebPとJPEGを両方書いてWebP対応

2018年11月26日

Voiced by Amazon Polly

WebPとJPEGを利用しつつ何も考えなくて良い方法

Chrome Dev Summitで披露された高速化のテクニックの数々(所感を含む)」を見てみると

<picture>
    <source type="image/webp" src="image.webp">
    <img src="image.jpg">
</picture>

WebP対応ブラウザならWebP、WebP未対応ならJPEGという書き方ができるらしい。

テスト用のJPEG画像を用意してSquooshで圧縮とフォーマット変更してWebP画像JPEG画像を用意

これを参考にHTMLを書いてみた。

<picture>
<source type="image/webp" srcset="https://cdn.barasu.org/2018/11/2018112301-WebP.webp">
<img src="https://cdn.barasu.org/2018/11/2018112301-JPEG.jpg">
</picture>

素晴らしい!!!!

Chromeでの表示(WebP画像)

Edgeでの表示(WebP画像)

Safariでの表示(JPEG画像)

Firefoxではテストしていないけど十分使えるWebP

WebPとJPEGの画像の容量の違い

フォーマット 容量
JPEG 147 KB
WebP 90K

容量が小さいのは良いことだ。

HICE形式でもいいんだろうけど・・・ブラウザに搭載はされないような気もする

  • 容量が小さい = 高速化
  • 容量が小さい = 転送コスト削減

はまったところ

でもWebPの画像をアップロードしようとしたら・・・
セキュリティ上の理由によりこのファイル形式は許可されていません。なんてでてアップロードに失敗します。

今回はWebPのテストなのでS3に直接ファイルをアップロード^^;;
解決は後回し。

まとめ

JPEGなりPNGのファイルを自動的にWebPに変換して\<img>タグを\<picture>タグに入れ替えてWebP画像を\<source>に入れ込むプラグインってないかなぁ〜

さすがに手動なりコンテンツ修正はやってらんない。