2018年11月23日2018年11月26日

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の画像の容量の違い

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

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

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

はまったところ

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

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

まとめ

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

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