Try encoding skin as webp

Author: captbaritone

packages/webamp/package.json

@@ -65,6 +65,7 @@
     "@babel/preset-typescript": "^7.7.2",
     "@babel/runtime": "^7.7.2",
     "@sentry/browser": "5.9.1",
+    "@squoosh/lib": "^0.4.0",
     "@types/classnames": "^2.2.6",
     "@types/css-font-loading-module": "^0.0.2",
     "@types/fscreen": "^1.0.1",

packages/webamp/scripts/postcss-optimize-data-uri-pngs.js

@@ -2,20 +2,38 @@ const postcss = require("postcss");
 const dataUriToBuffer = require("data-uri-to-buffer");
 const imagemin = require("imagemin");
 const imageminOptipng = require("imagemin-optipng");
+const { ImagePool } = require("@squoosh/lib");
 
 const DATA_URL_REGEX = new RegExp(/url\((data:image\/png;base64,.+)\)/gi);
 const DATA_URL_PROPS_REGEX = /^(background(?:-image)?)|(content)|(cursor)/;
 
-async function optimizeDataUri(dataUri) {
+async function optimizeDataUri(imagePool, dataUri) {
   const buffer = dataUriToBuffer(dataUri);
   const optimized = await imagemin.buffer(buffer, {
     use: [imageminOptipng()],
   });
+  try {
+    const image = imagePool.ingestImage(optimized);
+    await image.decoded;
+    const encodeOptions = {
+      webp: {
+        lossless: true,
+      },
+    };
+    await image.encode(encodeOptions);
+    const rawEncodedImage = (await image.encodedWith.webp).binary;
+    const b = new Buffer(rawEncodedImage);
+    return `data:image/webp;base64,${b.toString("base64")}`;
+  } catch (e) {
+    console.error("e", e);
+  }
   return `data:image/png;base64,${optimized.toString("base64")}`;
 }
 
 module.exports = postcss.plugin("postcss-optimize-data-uri-pngs", () => {
   return async function (css) {
+    const imagePool = new ImagePool();
+
     // walkDecls does not let us work async, so we collect the async work we
     // need to do here, and await it at the end
     const promisesFactories = [];
@@ -27,11 +45,12 @@ module.exports = postcss.plugin("postcss-optimize-data-uri-pngs", () => {
         promisesFactories.push(async () => {
           decl.value = decl.value.replace(
             dataUri,
-            await optimizeDataUri(dataUri)
+            await optimizeDataUri(imagePool, dataUri)
           );
         });
       }
     });
     await Promise.all(promisesFactories.map((p) => p()));
+    await imagePool.close();
   };
 });

yarn.lock

@@ -2921,6 +2921,14 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@squoosh/lib@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@squoosh/lib/-/lib-0.4.0.tgz#31d18cb082c69e404589e2e281414d10f91e1668"
+  integrity sha512-O1LyugWLZjMI4JZeZMA5vzfhfPjfMZXH5/HmVkRagP8B70wH3uoR7tjxfGNdSavey357MwL8YJDxbGwBBdHp7Q==
+  dependencies:
+    wasm-feature-detect "^1.2.11"
+    web-streams-polyfill "^3.0.3"
+
 "@testing-library/dom@^8.0.0":
   version "8.11.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.1.tgz#03fa2684aa09ade589b460db46b4c7be9fc69753"
@@ -16018,6 +16026,11 @@ warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
+wasm-feature-detect@^1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz#e21992fd1f1d41a47490e392a5893cb39d81e29e"
+  integrity sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w==
+
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
@@ -16040,6 +16053,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-streams-polyfill@^3.0.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz#a6b74026b38e4885869fb5c589e90b95ccfc7965"
+  integrity sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"