次世代画像フォーマットWebPをどんどん使っていこう 2019.12.07 SAT

WebPってなに？

WebPはGoogleが開発している、次世代の画像フォーマットです。
JPEGに比べて画像を軽量化できます。

しかし、現在対応しているブラウザは全てではなく、下記サイトが参考になります。
https://caniuse.com/#feat=webp
現在IE11、Safariなどでは表示できません。
まあ、ほぼほぼのブラウザでは問題なさそうです。

モニタの解像度はどんどん高くなるので、画像サイズも合わせていく必要がありますが、画像のサイズアップはサイトの速度低下に直結します。速度低下はSEO的にも不利になりますのでそろそろ対応してもよさそうです。

なんでもかんでも、Googleですやん

Googleの検索エンジン対策のために、Googleが開発した画像フォーマットを使用する。。
なんともGoogleの天下になりつつあります。

IE11などの非対応のブラウザへの対策

非対応のブラウザに対してはpicture要素で対応します。
が表示できない場合、jpgで代替されます。 下記はコードの例。 スクリプトなどでIE11の場合は通常のimg要素にするなど、工夫が必要です。
IEはいつの時代も足を引っ張る存在ですね！

<picture>
	<source type="image/webp" srcset="/img/upimg/0_78576d63-35c1-4590-9ad2-839fb3afab1d_600px.webp"></source>
	<img src="/img/upimg/0_78576d63-35c1-4590-9ad2-839fb3afab1d_600px.jpg" alt="代替テキスト">
</picture>

Picturefill.jsを使用すると、IEにも対応できるようですが、js読み込み時間を考えるとなんのこっちゃ分かりません。
スピードを考えると、asp.netやphpなどでヘルパーを作り、ブラウザを認識させ、切り替える方法がベストかと思います。

サーバーの設定（IIS）

IISでWebpに対応するにはMIME Typeを追加します。
Web.configに下記のコードを追記します。

<configuration>
  <system.webServer>
    <staticContent>
     <mimeMap fileExtension=".webp" mimeType="image/webp" />
  </staticContent>
  </system.webServer>
</configuration>

Jpgとの比較

jpgとwebpで比較してみます。

※変換には「ImageProcessor」を使用しました。
https://www.nuget.org/packages/ImageProcessor/
ImageProcessorにプラグインを入れます。
https://www.nuget.org/packages/ImageProcessor.Plugins.WebP/

だいぶ軽くなっているのがわかります。
下記は実際の画像です。
並べてみても違いはわかりません。

JPG

WebP (非対応ブラウザでは表示できません)