WebP対応しました

サムネイルだけですがWebP対応しました。
オリジナルサイズはどうするか悩んでいるところです。
静的配信をしてるのでserverで出し分けるのではなくpicture tagを利用してやっています。

対応差分は次のような感じです。

-    <img class="pc" src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
-    <img class="sp" src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/>
+    <picture class="pc">
+        <source srcset="{{ $imageWebPURL }}" type="image/webp" >
+        <img src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+    </picture>
+    <picture class="sp">
+        <source srcset="{{ $mobileImageWebPURL }}" type="image/webp">
+        <img src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/>
+    </picture>