wip

# Conflicts:
#	codecs/cpp.Dockerfile
#	codecs/imagequant/example.html
#	codecs/webp/dec/webp_dec.d.ts
#	codecs/webp/dec/webp_dec.js
#	codecs/webp/dec/webp_dec.wasm
#	codecs/webp/enc/webp_enc.d.ts
#	codecs/webp/enc/webp_enc.js
#	codecs/webp/enc/webp_enc.wasm
#	package-lock.json
#	package.json
#	src/codecs/tiny.webp
#	src_old/codecs/encoders.ts
#	src_old/codecs/processor-worker/tiny.avif
#	src_old/codecs/processor-worker/tiny.webp
#	src_old/codecs/tiny.webp
#	src_old/components/compress/index.tsx
#	src_old/lib/util.ts
#	src_old/sw/util.ts

src_old/components/results/FileSize.tsx

@@ -0,0 +1,43 @@
+import { h, Component } from 'preact';
+import * as prettyBytes from 'pretty-bytes';
+import * as style from './style.scss';
+
+interface Props {
+  blob: Blob;
+  compareTo?: Blob;
+}
+
+interface State {}
+
+export default class FileSize extends Component<Props, State> {
+  render({ blob, compareTo }: Props) {
+    let comparison: JSX.Element | undefined;
+
+    if (compareTo) {
+      const delta = blob.size / compareTo.size;
+      if (delta > 1) {
+        const percent = Math.round((delta - 1) * 100) + '%';
+        comparison = (
+          <span class={`${style.sizeDelta} ${style.sizeIncrease}`}>
+            {percent === '0%' ? 'slightly' : percent} bigger
+          </span>
+        );
+      } else if (delta < 1) {
+        const percent = Math.round((1 - delta) * 100) + '%';
+        comparison = (
+          <span class={`${style.sizeDelta} ${style.sizeDecrease}`}>
+            {percent === '0%' ? 'slightly' : percent} smaller
+          </span>
+        );
+      } else {
+        comparison = <span class={style.sizeDelta}>no change</span>;
+      }
+    }
+
+    return (
+      <span>
+        {prettyBytes(blob.size)} {comparison}
+      </span>
+    );
+  }
+}