Add WebP variants for asset icons

For browsers that support WebP, this reduces the size of asset images
by ~88%.  Other browsers will fall back to PNG images.

Change-Id: I47e973bf9df0db844f8a2dedd2a9a4ff56af4203

demo/asset_card.js

@@ -57,10 +57,25 @@ class AssetCard {
     titleDiv.appendChild(titleText);
 
     if (asset.iconUri) {
+      const picture = document.createElement('picture');
+
+      const webpSource = document.createElement('source');
+      webpSource.srcset = asset.iconUri.replace(/.png$/, '.webp');
+      webpSource.type = 'image/webp';
+
+      const pngSource = document.createElement('source');
+      pngSource.srcset = asset.iconUri;
+      pngSource.type = 'image/png';
+
       const img = document.createElement('img');
       img.src = asset.iconUri;
       img.alt = '';  // Not necessary to understand the page
-      this.card_.appendChild(img);
+
+      picture.appendChild(webpSource);
+      picture.appendChild(pngSource);
+      picture.appendChild(img);
+
+      this.card_.appendChild(picture);
     }
 
     if (asset.description && isFeatured) {