Destructuring args.

Fixing lossless slider for webP. Previously you couldn't select "9" :D
MozJPEG chroma subsampling and quality (#235 )
2018-11-06 13:47:18 +00:00 · 2018-11-06 13:47:18 +00:00 · 2018-11-06 13:46:52 +00:00 · 2018-11-06 13:44:15 +00:00 · 2018-11-06 13:41:08 +00:00 · 2018-11-06 13:39:03 +00:00
178 changed files with 17104 additions and 10310 deletions
--- a/.firebaserc
+++ b/.firebaserc
@ -1,5 +0,0 @@
 {
  "projects": {
    "default": "squoosh-beta"
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,4 @@ node_modules
 /*.log
 *.scss.d.ts
 *.css.d.ts
 *.o
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,5 @@
 language: node_js
 node_js:
 - node
 cache: npm
 script: npm run build || npm run build # scss ts definitions need to be generated before an actual build
--- a/codecs/example.webp
+++ b/codecs/example.webp
--- a/codecs/example_palette.png
+++ b/codecs/example_palette.png
--- a/codecs/imagequant/README.md
+++ b/codecs/imagequant/README.md
@ -0,0 +1,30 @@
 # ImageQuant
 - Source: <https://github.com/ImageOptim/libimagequant>
 - Version: v2.12.1
 ## Dependencies
 - Docker
 ## Example
 See `example.html`
 ## API
 ### `int version()`
 Returns the version of libimagequant as a number. va.b.c is encoded as 0x0a0b0c
 ### `RawImage quantize(std::string buffer, int image_width, int image_height, int numColors, float dithering)`
 Quantizes the given images, using at most `numColors`, a value between 2 and 256. `dithering` is a value between 0 and 1 controlling the amount of dithering. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.
 ### `RawImage zx_quantize(std::string buffer, int image_width, int image_height, float dithering)`
 ???
 ### `void free_result()`
 Frees the result created by `quantize()`.
--- a/codecs/imagequant/build.sh
+++ b/codecs/imagequant/build.sh
@ -0,0 +1,48 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 echo "============================================="
 echo "Compiling libimagequant"
 echo "============================================="
 (
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="imagequant"' \
    -I node_modules/libimagequant \
    --std=c99 \
    -c \
    node_modules/libimagequant/{libimagequant,pam,mediancut,blur,mempool,kmeans,nearest}.c
 )
 echo "============================================="
 echo "Compiling wasm module"
 echo "============================================="
 (
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="imagequant"' \
    -I node_modules/libimagequant \
    -o ./imagequant.js \
    --std=c++11 *.o \
    -x c++ \
    imagequant.cpp
 )
 echo "============================================="
 echo "Compiling wasm module done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/imagequant/example.html
+++ b/codecs/imagequant/example.html
@ -0,0 +1,41 @@
 <!doctype html>
 <style>
  canvas {
    image-rendering: pixelated;
  }
 </style>
 <script src='imagequant.js'></script>
 <script>
  const Module = imagequant();
  async function loadImage(src) {
    // Load image
    const img = document.createElement('img');
    img.src = src;
    await new Promise(resolve => img.onload = resolve);
    // Make canvas same size as image
    const canvas = document.createElement('canvas');
    [canvas.width, canvas.height] = [img.width, img.height];
    // Draw image onto canvas
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, img.width, img.height);
  }
  Module.onRuntimeInitialized = async _ => {
    console.log('Version:', Module.version().toString(16));
    const image = await loadImage('../example.png');
    // const rawImage = Module.quantize(image.data, image.width, image.height, 256, 1.0);
    const rawImage = Module.zx_quantize(image.data, image.width, image.height, 1.0);
    console.log('done');
    Module.free_result();
    const imageData = new ImageData(new Uint8ClampedArray(rawImage.buffer), rawImage.width, rawImage.height);
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
    document.body.appendChild(canvas);
  };
 </script>
--- a/codecs/imagequant/imagequant.cpp
+++ b/codecs/imagequant/imagequant.cpp
@ -0,0 +1,245 @@
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include <stdlib.h>
 #include <inttypes.h>
 #include <limits.h>
 #include <math.h>
 #include "libimagequant.h"
 using namespace emscripten;
 int version() {
  return (((LIQ_VERSION/10000) % 100) << 16) |
         (((LIQ_VERSION/100  ) % 100) << 8) |
         (((LIQ_VERSION/1    ) % 100) << 0);
 }
 class RawImage {
 public:
  val buffer;
  int width;
  int height;
  RawImage(val b, int w, int h)
    : buffer(b), width(w), height(h) {}
 };
 liq_attr *attr;
 liq_image *image;
 liq_result *res;
 uint8_t* result;
 RawImage quantize(std::string rawimage, int image_width, int image_height, int num_colors, float dithering) {
  const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
  int size = image_width * image_height;
  attr = liq_attr_create();
  image = liq_image_create_rgba(attr, image_buffer, image_width, image_height, 0);
  liq_set_max_colors(attr, num_colors);
  liq_image_quantize(image, attr, &res);
  liq_set_dithering_level(res, dithering);
  uint8_t* image8bit = (uint8_t*) malloc(size);
  result = (uint8_t*) malloc(size * 4);
  liq_write_remapped_image(res, image, image8bit, size);
  const liq_palette *pal = liq_get_palette(res);
  // Turn palletted image back into an RGBA image
  for(int i = 0; i < size; i++) {
    result[i * 4 + 0] = pal->entries[image8bit[i]].r;
    result[i * 4 + 1] = pal->entries[image8bit[i]].g;
    result[i * 4 + 2] = pal->entries[image8bit[i]].b;
    result[i * 4 + 3] = pal->entries[image8bit[i]].a;
  }
  free(image8bit);
  liq_result_destroy(res);
  liq_image_destroy(image);
  liq_attr_destroy(attr);
  return {
    val(typed_memory_view(image_width*image_height*4, result)),
    image_width,
    image_height
  };
 }
 const liq_color zx_colors[] = {
  {.a = 255, .r = 0, .g = 0, .b = 0},       // regular black
  {.a = 255, .r = 0, .g = 0, .b = 215},     // regular blue
  {.a = 255, .r = 215, .g = 0, .b = 0},     // regular red
  {.a = 255, .r = 215, .g = 0, .b = 215},   // regular magenta
  {.a = 255, .r = 0, .g = 215, .b = 0},     // regular green
  {.a = 255, .r = 0, .g = 215, .b = 215},   // regular cyan
  {.a = 255, .r = 215, .g = 215, .b = 0},   // regular yellow
  {.a = 255, .r = 215, .g = 215, .b = 215}, // regular white
  {.a = 255, .r = 0, .g = 0, .b = 255},     // bright blue
  {.a = 255, .r = 255, .g = 0, .b = 0},     // bright red
  {.a = 255, .r = 255, .g = 0, .b = 255},   // bright magenta
  {.a = 255, .r = 0, .g = 255, .b = 0},     // bright green
  {.a = 255, .r = 0, .g = 255, .b = 255},   // bright cyan
  {.a = 255, .r = 255, .g = 255, .b = 0},   // bright yellow
  {.a = 255, .r = 255, .g = 255, .b = 255}  // bright white
 };
 uint8_t block[8 * 8 * 4];
 /**
 * The ZX has one bit per pixel, but can assign two colours to an 8x8 block. The two colours must
 * both be 'regular' or 'bright'. Black exists as both regular and bright.
 */
 RawImage zx_quantize(std::string rawimage, int image_width, int image_height, float dithering) {
  const uint8_t* image_buffer = (uint8_t*) rawimage.c_str();
  int size = image_width * image_height;
  int bytes_per_pixel = 4;
  result = (uint8_t*) malloc(size * bytes_per_pixel);
  uint8_t* image8bit = (uint8_t*) malloc(8 * 8);
  // For each 8x8 grid
  for (int block_start_y = 0; block_start_y < image_height; block_start_y += 8) {
    for (int block_start_x = 0; block_start_x < image_width; block_start_x += 8) {
      int color_popularity[15] = {0};
      int block_index = 0;
      int block_width = 8;
      int block_height = 8;
      // If the block hangs off the right/bottom of the image dimensions, make it smaller to fit.
      if (block_start_y + block_height > image_height) {
        block_height = image_height - block_start_y;
      }
      if (block_start_x + block_width > image_width) {
        block_width = image_width - block_start_x;
      }
      // For each pixel in that block:
      for (int y = block_start_y; y < block_start_y + block_height; y++) {
        for (int x = block_start_x; x < block_start_x + block_width; x++) {
          int pixel_start = (y * image_width * bytes_per_pixel) + (x * bytes_per_pixel);
          int smallest_distance = INT_MAX;
          int winning_index = -1;
          // Copy pixel data for quantizing later
          block[block_index++] = image_buffer[pixel_start];
          block[block_index++] = image_buffer[pixel_start + 1];
          block[block_index++] = image_buffer[pixel_start + 2];
          block[block_index++] = image_buffer[pixel_start + 3];
          // Which zx color is this pixel closest to?
          for (int color_index = 0; color_index < 15; color_index++) {
            liq_color color = zx_colors[color_index];
            // Using Euclidean distance. LibQuant has better methods, but it requires conversion to
            // LAB, so I don't think it's worth it.
            int distance =
              pow(color.r - image_buffer[pixel_start + 0], 2) +
              pow(color.g - image_buffer[pixel_start + 1], 2) +
              pow(color.b - image_buffer[pixel_start + 2], 2);
            if (distance < smallest_distance) {
              winning_index = color_index;
              smallest_distance = distance;
            }
          }
          color_popularity[winning_index]++;
        }
      }
      // Get the three most popular colours for the block.
      int first_color_index = 0;
      int second_color_index = 0;
      int third_color_index = 0;
      int highest_popularity = -1;
      int second_highest_popularity = -1;
      int third_highest_popularity = -1;
      for (int color_index = 0; color_index < 15; color_index++) {
        if (color_popularity[color_index] > highest_popularity) {
          // Store this as the most popular pixel, and demote the current values:
          third_color_index = second_color_index;
          third_highest_popularity = second_highest_popularity;
          second_color_index = first_color_index;
          second_highest_popularity = highest_popularity;
          first_color_index = color_index;
          highest_popularity = color_popularity[color_index];
        } else if (color_popularity[color_index] > second_highest_popularity) {
          third_color_index = second_color_index;
          third_highest_popularity = second_highest_popularity;
          second_color_index = color_index;
          second_highest_popularity = color_popularity[color_index];
        } else if (color_popularity[color_index] > third_highest_popularity) {
          third_color_index = color_index;
          third_highest_popularity = color_popularity[color_index];
        }
      }
      // ZX images can't mix bright and regular colours, except black which appears in both.
      // Resolve any conflict:
      while (1) {
        // If either colour is black, there's no conflict to resolve.
        if (first_color_index != 0 && second_color_index != 0) {
          if (first_color_index >= 8 && second_color_index < 8) {
            // Make the second color bright
            second_color_index = second_color_index + 7;
          } else if (first_color_index < 8 && second_color_index >= 8) {
            // Make the second color regular
            second_color_index = second_color_index - 7;
          }
        }
        // If, during conflict resolving, we now have two of the same colour (because we initially
        // selected the bright & regular version of the same colour), retry again with the third
        // most popular colour.
        if (first_color_index == second_color_index) {
          second_color_index = third_color_index;
        } else break;
      }
      // Quantize
      attr = liq_attr_create();
      image = liq_image_create_rgba(attr, block, block_width, block_height, 0);
      liq_set_max_colors(attr, 2);
      liq_image_add_fixed_color(image, zx_colors[first_color_index]);
      liq_image_add_fixed_color(image, zx_colors[second_color_index]);
      liq_image_quantize(image, attr, &res);
      liq_set_dithering_level(res, dithering);
      liq_write_remapped_image(res, image, image8bit, size);
      const liq_palette *pal = liq_get_palette(res);
      // Turn palletted image back into an RGBA image, and write it into the full size result image.
      for(int y = 0; y < block_height; y++) {
        for(int x = 0; x < block_width; x++) {
          int image8BitPos = y * block_width + x;
          int resultStartPos = ((block_start_y + y) * bytes_per_pixel * image_width) + ((block_start_x + x) * bytes_per_pixel);
          result[resultStartPos + 0] = pal->entries[image8bit[image8BitPos]].r;
          result[resultStartPos + 1] = pal->entries[image8bit[image8BitPos]].g;
          result[resultStartPos + 2] = pal->entries[image8bit[image8BitPos]].b;
          result[resultStartPos + 3] = pal->entries[image8bit[image8BitPos]].a;
        }
      }
      liq_result_destroy(res);
      liq_image_destroy(image);
      liq_attr_destroy(attr);
    }
  }
  free(image8bit);
  return {
    val(typed_memory_view(image_width*image_height*4, result)),
    image_width,
    image_height
  };
 }
 void free_result() {
  free(result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  class_<RawImage>("RawImage")
    .property("buffer", &RawImage::buffer)
    .property("width", &RawImage::width)
    .property("height", &RawImage::height);
  function("quantize", &quantize);
  function("zx_quantize", &zx_quantize);
  function("version", &version);
  function("free_result", &free_result);
 }
--- a/codecs/imagequant/imagequant.d.ts
+++ b/codecs/imagequant/imagequant.d.ts
@ -0,0 +1,15 @@
 interface RawImage {
  buffer: Uint8Array;
  width: number;
  height: number;
 }
 interface QuantizerModule extends EmscriptenWasm.Module {
  quantize(data: BufferSource, width: number, height: number, numColors: number, dither: number): RawImage;
  zx_quantize(data: BufferSource, width: number, height: number, dither: number): RawImage;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): QuantizerModule;
--- a/codecs/imagequant/imagequant.js
+++ b/codecs/imagequant/imagequant.js
--- a/codecs/imagequant/imagequant.wasm
+++ b/codecs/imagequant/imagequant.wasm
--- a/codecs/imagequant/package-lock.json
+++ b/codecs/imagequant/package-lock.json
--- a/codecs/imagequant/package.json
+++ b/codecs/imagequant/package.json
@ -0,0 +1,13 @@
 {
  "name": "imagequant",
  "scripts": {
    "install": "napa",
    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
  },
  "napa": {
    "libimagequant": "ImageOptim/libimagequant#2.12.1"
  },
  "devDependencies": {
    "napa": "^3.0.0"
  }
 }
--- a/codecs/mozjpeg_enc/README.md
+++ b/codecs/mozjpeg_enc/README.md
@ -6,8 +6,6 @@
 ## Dependencies
 - Docker
 - Automake
 - pkg-config
 ## Example
@ -19,26 +17,31 @@ See `example.html`
 Returns the version of MozJPEG as a number. va.b.c is encoded as 0x0a0b0c
 ### `uint8_t* create_buffer(int width, int height)`
 Allocates an RGBA buffer for an image with the given dimension.
 ### `void destroy_buffer(uint8_t* p)`
 Frees a buffer created with `create_buffer`.
 ### `void encode(uint8_t* image_buffer, int image_width, int image_height, int quality)`
 Encodes the given image with given dimension to JPEG. `quality` is a number between 0 and 100. The higher the number, the better the quality of the encoded image. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
 ### `void free_result()`
 Frees the result created by `encode()`.
-### `int get_result_pointer()`
+### `Uint8Array encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts)`
-Returns the pointer to the start of the buffer holding the encoded data.
+Encodes the given image with given dimension to JPEG. Options looks like this:
-### `int get_result_size()`
+```c++
-
+struct MozJpegOptions {
-Returns the length of the buffer holding the encoded data.
+  int quality;
  bool baseline;
  bool arithmetic;
  bool progressive;
  bool optimize_coding;
  int smoothing;
  int color_space;
  int quant_table;
  bool trellis_multipass;
  bool trellis_opt_zero;
  bool trellis_opt_table;
  int trellis_loops;
  bool auto_subsample;
  int chroma_subsample;
  bool separate_chroma_quality;
  int chroma_quality;
 };
 ```
--- a/codecs/mozjpeg_enc/build.sh
+++ b/codecs/mozjpeg_enc/build.sh
@ -0,0 +1,53 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 apt-get update
 apt-get install -qqy autoconf libtool libpng-dev pkg-config
 echo "============================================="
 echo "Compiling mozjpeg"
 echo "============================================="
 (
  cd node_modules/mozjpeg
  autoreconf -fiv
  emconfigure ./configure --without-simd
  emmake make libjpeg.la
 )
 echo "============================================="
 echo "Compiling mozjpeg done"
 echo "============================================="
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
 (
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s WASM=1 \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="mozjpeg_enc"' \
    -I node_modules/mozjpeg \
    -o ./mozjpeg_enc.js \
    -Wno-deprecated-register \
    -Wno-writable-strings \
    node_modules/mozjpeg/rdswitch.c \
    -x c++ -std=c++11 \
    mozjpeg_enc.cpp \
    node_modules/mozjpeg/.libs/libjpeg.a
 )
 echo "============================================="
 echo "Compiling wasm bindings done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/mozjpeg_enc/example.html
+++ b/codecs/mozjpeg_enc/example.html
@ -1,7 +1,7 @@
 <!doctype html>
 <script src='mozjpeg_enc.js'></script>
 <script>
-  const Module = mozjpeg_enc();
+  const module = mozjpeg_enc();
  async function loadImage(src) {
    // Load image
@ -17,26 +17,27 @@
    return ctx.getImageData(0, 0, img.width, img.height);
  }
-  Module.onRuntimeInitialized = async _ => {
+  module.onRuntimeInitialized = async _ => {
-    const api = {
+    console.log('Version:', module.version().toString(16));
      version: Module.cwrap('version', 'number', []),
      create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
      destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
      encode: Module.cwrap('encode', '', ['number', 'number', 'number', 'number']),
      free_result: Module.cwrap('free_result', '', ['number']),
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_size: Module.cwrap('get_result_size', 'number', []),
    };
    const image = await loadImage('../example.png');
-    const p = api.create_buffer(image.width, image.height);
+    const result = module.encode(image.data, image.width, image.height, {
-    Module.HEAP8.set(image.data, p);
+      quality: 75,
-    api.encode(p, image.width, image.height, 2);
+      baseline: false,
-    const resultPointer = api.get_result_pointer();
+      arithmetic: false,
-    const resultSize = api.get_result_size();
+      progressive: true,
-    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+      optimize_coding: true,
-    const result = new Uint8Array(resultView);
+      smoothing: 0,
-    api.free_result(resultPointer);
+      color_space: 3,
-    api.destroy_buffer(p);
+      quant_table: 3,
      trellis_multipass: false,
      trellis_opt_zero: false,
      trellis_opt_table: false,
      trellis_loops: 1,
      auto_subsample: true,
      chroma_subsample: 2,
      separate_chroma_quality: false,
      chroma_quality: 75,
    });
    const blob = new Blob([result], {type: 'image/jpeg'});
    const blobURL = URL.createObjectURL(blob);
--- a/codecs/mozjpeg_enc/mozjpeg_enc.cpp
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.cpp
@ -1,17 +1,40 @@
-#include "emscripten.h"
+#include <emscripten/bind.h>
 #include <emscripten/val.h>
 #include <stdlib.h>
 #include <inttypes.h>
 #include <stdio.h>
 #include <setjmp.h>
 #include <string.h>
 #include "jpeglib.h"
 #include "config.h"
 #include "jpeglib.h"
 #include "cdjpeg.h"
-// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
+using namespace emscripten;
 // MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it
 // into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
 #define xstr(s) str(s)
 #define str(s) #s
-EMSCRIPTEN_KEEPALIVE
+struct MozJpegOptions {
  int quality;
  bool baseline;
  bool arithmetic;
  bool progressive;
  bool optimize_coding;
  int smoothing;
  int color_space;
  int quant_table;
  bool trellis_multipass;
  bool trellis_opt_zero;
  bool trellis_opt_table;
  int trellis_loops;
  bool auto_subsample;
  int chroma_subsample;
  bool separate_chroma_quality;
  int chroma_quality;
 };
 int version() {
  char buffer[] = xstr(MOZJPEG_VERSION);
  int version = 0;
@ -28,27 +51,11 @@ int version() {
  return version;
 }
-EMSCRIPTEN_KEEPALIVE
+uint8_t* last_result;
-uint8_t* create_buffer(int width, int height) {
+struct jpeg_compress_struct cinfo;
  return malloc(width * height * 4 * sizeof(uint8_t));
 }
-EMSCRIPTEN_KEEPALIVE
+val encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts) {
-void destroy_buffer(uint8_t* p) {
+  uint8_t* image_buffer = (uint8_t*) image_in.c_str();
  free(p);
 }
 int result[2];
 EMSCRIPTEN_KEEPALIVE
 void encode(uint8_t* image_buffer, int image_width, int image_height, int quality) {
  // Manually convert RGBA data into RGB
  for(int y = 0; y < image_height; y++) {
    for(int x = 0; x < image_width; x++) {
      image_buffer[(y*image_width + x)*3 + 0] = image_buffer[(y*image_width + x)*4 + 0];
      image_buffer[(y*image_width + x)*3 + 1] = image_buffer[(y*image_width + x)*4 + 1];
      image_buffer[(y*image_width + x)*3 + 2] = image_buffer[(y*image_width + x)*4 + 2];
    }
  }
  // The code below is basically the `write_JPEG_file` function from
  // https://github.com/mozilla/mozjpeg/blob/master/example.c
@ -61,7 +68,6 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
   * compression/decompression processes, in existence at once.  We refer
   * to any one struct (and its associated working data) as a "JPEG object".
   */
  struct jpeg_compress_struct cinfo;
  /* This struct represents a JPEG error handler.  It is declared separately
   * because applications often want to supply a specialized error handler
   * (see the second half of this file for an example).  But here we just
@ -109,18 +115,57 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
   */
  cinfo.image_width = image_width;      /* image width and height, in pixels */
  cinfo.image_height = image_height;
-  cinfo.input_components = 3;           /* # of color components per pixel */
+  cinfo.input_components = 4;           /* # of color components per pixel */
-  cinfo.in_color_space = JCS_RGB;       /* colorspace of input image */
+  cinfo.in_color_space = JCS_EXT_RGBA;  /* colorspace of input image */
  /* Now use the library's routine to set default compression parameters.
   * (You must set at least cinfo.in_color_space before calling this,
   * since the defaults depend on the source color space.)
   */
  jpeg_set_defaults(&cinfo);
  /* Now you can set any non-default parameters you wish to.
   * Here we just illustrate the use of quality (quantization table) scaling:
   */
  jpeg_set_quality(&cinfo, quality, TRUE /* limit to baseline-JPEG values */);
  jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE) opts.color_space);
  if (opts.quant_table != -1) {
    jpeg_c_set_int_param(&cinfo, JINT_BASE_QUANT_TBL_IDX, opts.quant_table);
  }
  cinfo.optimize_coding = opts.optimize_coding;
  if (opts.arithmetic) {
    cinfo.arith_code = TRUE;
    cinfo.optimize_coding = FALSE;
  }
  cinfo.smoothing_factor = opts.smoothing;
  jpeg_c_set_bool_param(&cinfo, JBOOLEAN_USE_SCANS_IN_TRELLIS, opts.trellis_multipass);
  jpeg_c_set_bool_param(&cinfo, JBOOLEAN_TRELLIS_EOB_OPT, opts.trellis_opt_zero);
  jpeg_c_set_bool_param(&cinfo, JBOOLEAN_TRELLIS_Q_OPT, opts.trellis_opt_table);
  jpeg_c_set_int_param(&cinfo, JINT_TRELLIS_NUM_LOOPS, opts.trellis_loops);
  // A little hacky to build a string for this, but it means we can use set_quality_ratings which
  // does some useful heuristic stuff.
  std::string quality_str = std::to_string(opts.quality);
  if (opts.separate_chroma_quality && opts.color_space == JCS_YCbCr) {
    quality_str += "," + std::to_string(opts.chroma_quality);
  }
  char const *pqual = quality_str.c_str();
  set_quality_ratings(&cinfo, (char*) pqual, opts.baseline);
  if (!opts.auto_subsample && opts.color_space == JCS_YCbCr) {
    cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
    cinfo.comp_info[0].v_samp_factor = opts.chroma_subsample;
  }
  if (!opts.baseline && opts.progressive) {
    jpeg_simple_progression(&cinfo);
  } else {
    cinfo.num_scans = 0;
    cinfo.scan_info = NULL;
  }
  /* Step 4: Start compressor */
  /* TRUE ensures that we will write a complete interchange-JPEG file.
@ -136,7 +181,7 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
   * To keep things simple, we pass one scanline per call; you can pass
   * more if you wish, though.
   */
-  row_stride = image_width * 3; /* JSAMPLEs per row in image_buffer */
+  row_stride = image_width * 4; /* JSAMPLEs per row in image_buffer */
  while (cinfo.next_scanline < cinfo.image_height) {
    /* jpeg_write_scanlines expects an array of pointers to scanlines.
@ -152,27 +197,38 @@ void encode(uint8_t* image_buffer, int image_width, int image_height, int qualit
  jpeg_finish_compress(&cinfo);
  /* Step 7: release JPEG compression object */
-  result[0] = (int)output;
+  last_result = output;
  result[1] = size;
  /* This is an important step since it will release a good deal of memory. */
  jpeg_destroy_compress(&cinfo);
  /* And we're done! */
  return val(typed_memory_view(size, output));
 }
 EMSCRIPTEN_KEEPALIVE
 void free_result() {
-  free(result[0]); // not sure if this is right with mozjpeg
+  /* This is an important step since it will release a good deal of memory. */
  jpeg_destroy_compress(&cinfo);
 }
-EMSCRIPTEN_KEEPALIVE
+EMSCRIPTEN_BINDINGS(my_module) {
-int get_result_pointer() {
+  value_object<MozJpegOptions>("MozJpegOptions")
-  return result[0];
+    .field("quality", &MozJpegOptions::quality)
-}
+    .field("baseline", &MozJpegOptions::baseline)
    .field("arithmetic", &MozJpegOptions::arithmetic)
    .field("progressive", &MozJpegOptions::progressive)
    .field("optimize_coding", &MozJpegOptions::optimize_coding)
    .field("smoothing", &MozJpegOptions::smoothing)
    .field("color_space", &MozJpegOptions::color_space)
    .field("quant_table", &MozJpegOptions::quant_table)
    .field("trellis_multipass", &MozJpegOptions::trellis_multipass)
    .field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
    .field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
    .field("trellis_loops", &MozJpegOptions::trellis_loops)
    .field("chroma_subsample", &MozJpegOptions::chroma_subsample)
    .field("auto_subsample", &MozJpegOptions::auto_subsample)
    .field("separate_chroma_quality", &MozJpegOptions::separate_chroma_quality)
    .field("chroma_quality", &MozJpegOptions::chroma_quality)
    ;
-EMSCRIPTEN_KEEPALIVE
+  function("version", &version);
-int get_result_size() {
+  function("encode", &encode);
-  return result[1];
+  function("free_result", &free_result);
 }
--- a/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
@ -1 +1,8 @@
-export default function(opts: EmscriptenWasm.ModuleOpts): EmscriptenWasm.Module;
+import { EncodeOptions } from '../../src/codecs/mozjpeg/encoder-meta';
 interface MozJPEGModule extends EmscriptenWasm.Module {
  encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): MozJPEGModule;
--- a/codecs/mozjpeg_enc/mozjpeg_enc.js
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.js
--- a/codecs/mozjpeg_enc/mozjpeg_enc.wasm
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.wasm
--- a/codecs/mozjpeg_enc/package-lock.json
+++ b/codecs/mozjpeg_enc/package-lock.json
@ -21,8 +21,8 @@
      "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
      "dev": true,
      "requires": {
-        "delegates": "1.0.0",
+        "delegates": "^1.0.0",
-        "readable-stream": "2.3.5"
+        "readable-stream": "^2.0.6"
      }
    },
    "balanced-match": {
@ -43,7 +43,7 @@
      "integrity": "sha1-ysMo977kVzDUBLaSID/LWQ4XLV4=",
      "dev": true,
      "requires": {
-        "readable-stream": "2.3.5"
+        "readable-stream": "^2.0.5"
      }
    },
    "block-stream": {
@ -52,7 +52,7 @@
      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
      "dev": true,
      "requires": {
-        "inherits": "2.0.3"
+        "inherits": "~2.0.0"
      }
    },
    "brace-expansion": {
@ -61,7 +61,7 @@
      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
      "dev": true,
      "requires": {
-        "balanced-match": "1.0.0",
+        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
      }
    },
@ -72,8 +72,8 @@
      "dev": true,
      "requires": {
        "base64-js": "0.0.8",
-        "ieee754": "1.1.8",
+        "ieee754": "^1.1.4",
-        "isarray": "1.0.0"
+        "isarray": "^1.0.0"
      }
    },
    "buffer-crc32": {
@ -88,10 +88,10 @@
      "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==",
      "dev": true,
      "requires": {
-        "get-proxy": "2.1.0",
+        "get-proxy": "^2.0.0",
-        "isurl": "1.0.0",
+        "isurl": "^1.0.0-alpha5",
-        "tunnel-agent": "0.6.0",
+        "tunnel-agent": "^0.6.0",
-        "url-to-options": "1.0.1"
+        "url-to-options": "^1.0.1"
      }
    },
    "code-point-at": {
@ -106,7 +106,7 @@
      "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
      "dev": true,
      "requires": {
-        "graceful-readlink": "1.0.1"
+        "graceful-readlink": ">= 1.0.0"
      }
    },
    "concat-map": {
@ -121,8 +121,8 @@
      "integrity": "sha1-q6CXR9++TD5w52am5BWG4YWfxvI=",
      "dev": true,
      "requires": {
-        "ini": "1.3.5",
+        "ini": "^1.3.4",
-        "proto-list": "1.2.4"
+        "proto-list": "~1.2.1"
      }
    },
    "console-control-strings": {
@ -158,14 +158,14 @@
      "integrity": "sha1-eu3YVCflqS2s/lVnSnxQXpbQH50=",
      "dev": true,
      "requires": {
-        "decompress-tar": "4.1.1",
+        "decompress-tar": "^4.0.0",
-        "decompress-tarbz2": "4.1.1",
+        "decompress-tarbz2": "^4.0.0",
-        "decompress-targz": "4.1.1",
+        "decompress-targz": "^4.0.0",
-        "decompress-unzip": "4.0.1",
+        "decompress-unzip": "^4.0.1",
-        "graceful-fs": "4.1.11",
+        "graceful-fs": "^4.1.10",
-        "make-dir": "1.2.0",
+        "make-dir": "^1.0.0",
-        "pify": "2.3.0",
+        "pify": "^2.3.0",
-        "strip-dirs": "2.1.0"
+        "strip-dirs": "^2.0.0"
      },
      "dependencies": {
        "pify": {
@ -182,7 +182,7 @@
      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
      "dev": true,
      "requires": {
-        "mimic-response": "1.0.0"
+        "mimic-response": "^1.0.0"
      }
    },
    "decompress-tar": {
@ -191,9 +191,9 @@
      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
      "dev": true,
      "requires": {
-        "file-type": "5.2.0",
+        "file-type": "^5.2.0",
-        "is-stream": "1.1.0",
+        "is-stream": "^1.1.0",
-        "tar-stream": "1.5.5"
+        "tar-stream": "^1.5.2"
      }
    },
    "decompress-tarbz2": {
@ -202,11 +202,11 @@
      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
      "dev": true,
      "requires": {
-        "decompress-tar": "4.1.1",
+        "decompress-tar": "^4.1.0",
-        "file-type": "6.2.0",
+        "file-type": "^6.1.0",
-        "is-stream": "1.1.0",
+        "is-stream": "^1.1.0",
-        "seek-bzip": "1.0.5",
+        "seek-bzip": "^1.0.5",
-        "unbzip2-stream": "1.2.5"
+        "unbzip2-stream": "^1.0.9"
      },
      "dependencies": {
        "file-type": {
@ -223,9 +223,9 @@
      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
      "dev": true,
      "requires": {
-        "decompress-tar": "4.1.1",
+        "decompress-tar": "^4.1.1",
-        "file-type": "5.2.0",
+        "file-type": "^5.2.0",
-        "is-stream": "1.1.0"
+        "is-stream": "^1.1.0"
      }
    },
    "decompress-unzip": {
@ -234,10 +234,10 @@
      "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=",
      "dev": true,
      "requires": {
-        "file-type": "3.9.0",
+        "file-type": "^3.8.0",
-        "get-stream": "2.3.1",
+        "get-stream": "^2.2.0",
-        "pify": "2.3.0",
+        "pify": "^2.3.0",
-        "yauzl": "2.9.1"
+        "yauzl": "^2.4.2"
      },
      "dependencies": {
        "file-type": {
@ -252,8 +252,8 @@
          "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
          "dev": true,
          "requires": {
-            "object-assign": "4.1.1",
+            "object-assign": "^4.0.1",
-            "pinkie-promise": "2.0.1"
+            "pinkie-promise": "^2.0.0"
          }
        },
        "pify": {
@ -282,17 +282,17 @@
      "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==",
      "dev": true,
      "requires": {
-        "caw": "2.0.1",
+        "caw": "^2.0.0",
-        "content-disposition": "0.5.2",
+        "content-disposition": "^0.5.2",
-        "decompress": "4.2.0",
+        "decompress": "^4.0.0",
-        "ext-name": "5.0.0",
+        "ext-name": "^5.0.0",
        "file-type": "5.2.0",
-        "filenamify": "2.0.0",
+        "filenamify": "^2.0.0",
-        "get-stream": "3.0.0",
+        "get-stream": "^3.0.0",
-        "got": "7.1.0",
+        "got": "^7.0.0",
-        "make-dir": "1.2.0",
+        "make-dir": "^1.0.0",
-        "p-event": "1.3.0",
+        "p-event": "^1.0.0",
-        "pify": "3.0.0"
+        "pify": "^3.0.0"
      }
    },
    "duplexer3": {
@ -307,7 +307,7 @@
      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
      "dev": true,
      "requires": {
-        "once": "1.4.0"
+        "once": "^1.4.0"
      }
    },
    "error-ex": {
@ -316,7 +316,7 @@
      "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
      "dev": true,
      "requires": {
-        "is-arrayish": "0.2.1"
+        "is-arrayish": "^0.2.1"
      }
    },
    "escape-string-regexp": {
@ -331,7 +331,7 @@
      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
      "dev": true,
      "requires": {
-        "mime-db": "1.33.0"
+        "mime-db": "^1.28.0"
      }
    },
    "ext-name": {
@ -340,8 +340,8 @@
      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
      "dev": true,
      "requires": {
-        "ext-list": "2.2.2",
+        "ext-list": "^2.0.0",
-        "sort-keys-length": "1.0.1"
+        "sort-keys-length": "^1.0.0"
      }
    },
    "extend": {
@ -356,7 +356,7 @@
      "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
      "dev": true,
      "requires": {
-        "pend": "1.2.0"
+        "pend": "~1.2.0"
      }
    },
    "file-type": {
@ -377,9 +377,9 @@
      "integrity": "sha1-vRYiYsC26Uv7zc8Zo7uzdk94VpU=",
      "dev": true,
      "requires": {
-        "filename-reserved-regex": "2.0.0",
+        "filename-reserved-regex": "^2.0.0",
-        "strip-outer": "1.0.0",
+        "strip-outer": "^1.0.0",
-        "trim-repeated": "1.0.0"
+        "trim-repeated": "^1.0.0"
      }
    },
    "fs.realpath": {
@ -394,10 +394,10 @@
      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
      "dev": true,
      "requires": {
-        "graceful-fs": "4.1.11",
+        "graceful-fs": "^4.1.2",
-        "inherits": "2.0.3",
+        "inherits": "~2.0.0",
-        "mkdirp": "0.5.1",
+        "mkdirp": ">=0.5 0",
-        "rimraf": "2.6.2"
+        "rimraf": "2"
      }
    },
    "fstream-ignore": {
@ -406,9 +406,9 @@
      "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
      "dev": true,
      "requires": {
-        "fstream": "1.0.11",
+        "fstream": "^1.0.0",
-        "inherits": "2.0.3",
+        "inherits": "2",
-        "minimatch": "3.0.4"
+        "minimatch": "^3.0.0"
      }
    },
    "gauge": {
@ -417,14 +417,14 @@
      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
      "dev": true,
      "requires": {
-        "aproba": "1.2.0",
+        "aproba": "^1.0.3",
-        "console-control-strings": "1.1.0",
+        "console-control-strings": "^1.0.0",
-        "has-unicode": "2.0.1",
+        "has-unicode": "^2.0.0",
-        "object-assign": "4.1.1",
+        "object-assign": "^4.1.0",
-        "signal-exit": "3.0.2",
+        "signal-exit": "^3.0.0",
-        "string-width": "1.0.2",
+        "string-width": "^1.0.1",
-        "strip-ansi": "3.0.1",
+        "strip-ansi": "^3.0.1",
-        "wide-align": "1.1.2"
+        "wide-align": "^1.1.0"
      }
    },
    "get-proxy": {
@ -433,7 +433,7 @@
      "integrity": "sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==",
      "dev": true,
      "requires": {
-        "npm-conf": "1.1.3"
+        "npm-conf": "^1.1.0"
      }
    },
    "get-stream": {
@ -448,12 +448,12 @@
      "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
      "dev": true,
      "requires": {
-        "fs.realpath": "1.0.0",
+        "fs.realpath": "^1.0.0",
-        "inflight": "1.0.6",
+        "inflight": "^1.0.4",
-        "inherits": "2.0.3",
+        "inherits": "2",
-        "minimatch": "3.0.4",
+        "minimatch": "^3.0.4",
-        "once": "1.4.0",
+        "once": "^1.3.0",
-        "path-is-absolute": "1.0.1"
+        "path-is-absolute": "^1.0.0"
      }
    },
    "got": {
@ -462,20 +462,20 @@
      "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
      "dev": true,
      "requires": {
-        "decompress-response": "3.3.0",
+        "decompress-response": "^3.2.0",
-        "duplexer3": "0.1.4",
+        "duplexer3": "^0.1.4",
-        "get-stream": "3.0.0",
+        "get-stream": "^3.0.0",
-        "is-plain-obj": "1.1.0",
+        "is-plain-obj": "^1.1.0",
-        "is-retry-allowed": "1.1.0",
+        "is-retry-allowed": "^1.0.0",
-        "is-stream": "1.1.0",
+        "is-stream": "^1.0.0",
-        "isurl": "1.0.0",
+        "isurl": "^1.0.0-alpha5",
-        "lowercase-keys": "1.0.0",
+        "lowercase-keys": "^1.0.0",
-        "p-cancelable": "0.3.0",
+        "p-cancelable": "^0.3.0",
-        "p-timeout": "1.2.1",
+        "p-timeout": "^1.1.1",
-        "safe-buffer": "5.1.1",
+        "safe-buffer": "^5.0.1",
-        "timed-out": "4.0.1",
+        "timed-out": "^4.0.0",
-        "url-parse-lax": "1.0.0",
+        "url-parse-lax": "^1.0.0",
-        "url-to-options": "1.0.1"
+        "url-to-options": "^1.0.1"
      }
    },
    "graceful-fs": {
@ -502,7 +502,7 @@
      "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
      "dev": true,
      "requires": {
-        "has-symbol-support-x": "1.4.2"
+        "has-symbol-support-x": "^1.4.1"
      }
    },
    "has-unicode": {
@ -529,8 +529,8 @@
      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
      "dev": true,
      "requires": {
-        "once": "1.4.0",
+        "once": "^1.3.0",
-        "wrappy": "1.0.2"
+        "wrappy": "1"
      }
    },
    "inherits": {
@ -557,7 +557,7 @@
      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
      "dev": true,
      "requires": {
-        "number-is-nan": "1.0.1"
+        "number-is-nan": "^1.0.0"
      }
    },
    "is-natural-number": {
@ -602,8 +602,8 @@
      "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
      "dev": true,
      "requires": {
-        "has-to-string-tag-x": "1.4.1",
+        "has-to-string-tag-x": "^1.2.0",
-        "is-object": "1.0.1"
+        "is-object": "^1.0.1"
      }
    },
    "load-json-file": {
@ -612,10 +612,10 @@
      "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
      "dev": true,
      "requires": {
-        "graceful-fs": "4.1.11",
+        "graceful-fs": "^4.1.2",
-        "parse-json": "2.2.0",
+        "parse-json": "^2.2.0",
-        "pify": "2.3.0",
+        "pify": "^2.0.0",
-        "strip-bom": "3.0.0"
+        "strip-bom": "^3.0.0"
      },
      "dependencies": {
        "pify": {
@ -638,7 +638,7 @@
      "integrity": "sha512-aNUAa4UMg/UougV25bbrU4ZaaKNjJ/3/xnvg/twpmKROPdKZPZ9wGgI0opdZzO8q/zUFawoUuixuOv33eZ61Iw==",
      "dev": true,
      "requires": {
-        "pify": "3.0.0"
+        "pify": "^3.0.0"
      }
    },
    "mime-db": {
@ -659,7 +659,7 @@
      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
      "dev": true,
      "requires": {
-        "brace-expansion": "1.1.11"
+        "brace-expansion": "^1.1.7"
      }
    },
    "minimist": {
@ -697,16 +697,16 @@
      "integrity": "sha1-7DqP3gcZC2ny/kNMOVo+aUaEG1Y=",
      "dev": true,
      "requires": {
-        "download": "6.2.5",
+        "download": "^6.2.2",
-        "extend": "3.0.1",
+        "extend": "^3.0.1",
-        "load-json-file": "2.0.0",
+        "load-json-file": "^2.0.0",
-        "minimist": "1.2.0",
+        "minimist": "^1.2.0",
-        "mkdirp": "0.5.1",
+        "mkdirp": "^0.5.1",
-        "npm-cache-filename": "1.0.2",
+        "npm-cache-filename": "^1.0.2",
-        "npmlog": "4.1.2",
+        "npmlog": "^4.1.0",
-        "rimraf": "2.6.2",
+        "rimraf": "^2.6.1",
-        "tar-pack": "3.4.1",
+        "tar-pack": "^3.4.0",
-        "write-json-file": "2.3.0"
+        "write-json-file": "^2.2.0"
      }
    },
    "npm-cache-filename": {
@ -721,8 +721,8 @@
      "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
      "dev": true,
      "requires": {
-        "config-chain": "1.1.11",
+        "config-chain": "^1.1.11",
-        "pify": "3.0.0"
+        "pify": "^3.0.0"
      }
    },
    "npmlog": {
@ -731,10 +731,10 @@
      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
      "dev": true,
      "requires": {
-        "are-we-there-yet": "1.1.4",
+        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "1.1.0",
+        "console-control-strings": "~1.1.0",
-        "gauge": "2.7.4",
+        "gauge": "~2.7.3",
-        "set-blocking": "2.0.0"
+        "set-blocking": "~2.0.0"
      }
    },
    "number-is-nan": {
@ -755,7 +755,7 @@
      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
      "dev": true,
      "requires": {
-        "wrappy": "1.0.2"
+        "wrappy": "1"
      }
    },
    "p-cancelable": {
@ -770,7 +770,7 @@
      "integrity": "sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=",
      "dev": true,
      "requires": {
-        "p-timeout": "1.2.1"
+        "p-timeout": "^1.1.1"
      }
    },
    "p-finally": {
@ -785,7 +785,7 @@
      "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
      "dev": true,
      "requires": {
-        "p-finally": "1.0.0"
+        "p-finally": "^1.0.0"
      }
    },
    "parse-json": {
@ -794,7 +794,7 @@
      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
      "dev": true,
      "requires": {
-        "error-ex": "1.3.1"
+        "error-ex": "^1.2.0"
      }
    },
    "path-is-absolute": {
@ -827,7 +827,7 @@
      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
      "dev": true,
      "requires": {
-        "pinkie": "2.0.4"
+        "pinkie": "^2.0.0"
      }
    },
    "prepend-http": {
@ -854,13 +854,13 @@
      "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
      "dev": true,
      "requires": {
-        "core-util-is": "1.0.2",
+        "core-util-is": "~1.0.0",
-        "inherits": "2.0.3",
+        "inherits": "~2.0.3",
-        "isarray": "1.0.0",
+        "isarray": "~1.0.0",
-        "process-nextick-args": "2.0.0",
+        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "5.1.1",
+        "safe-buffer": "~5.1.1",
-        "string_decoder": "1.0.3",
+        "string_decoder": "~1.0.3",
-        "util-deprecate": "1.0.2"
+        "util-deprecate": "~1.0.1"
      }
    },
    "rimraf": {
@ -869,7 +869,7 @@
      "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
      "dev": true,
      "requires": {
-        "glob": "7.1.2"
+        "glob": "^7.0.5"
      }
    },
    "safe-buffer": {
@ -884,7 +884,7 @@
      "integrity": "sha1-z+kXyz0nS8/6x5J1ivUxc+sfq9w=",
      "dev": true,
      "requires": {
-        "commander": "2.8.1"
+        "commander": "~2.8.1"
      }
    },
    "set-blocking": {
@ -905,7 +905,7 @@
      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
      "dev": true,
      "requires": {
-        "is-plain-obj": "1.1.0"
+        "is-plain-obj": "^1.0.0"
      }
    },
    "sort-keys-length": {
@ -914,7 +914,7 @@
      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
      "dev": true,
      "requires": {
-        "sort-keys": "1.1.2"
+        "sort-keys": "^1.0.0"
      }
    },
    "string-width": {
@ -923,9 +923,9 @@
      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
      "dev": true,
      "requires": {
-        "code-point-at": "1.1.0",
+        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "3.0.1"
+        "strip-ansi": "^3.0.0"
      }
    },
    "string_decoder": {
@ -934,7 +934,7 @@
      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
      "dev": true,
      "requires": {
-        "safe-buffer": "5.1.1"
+        "safe-buffer": "~5.1.0"
      }
    },
    "strip-ansi": {
@ -943,7 +943,7 @@
      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
      "dev": true,
      "requires": {
-        "ansi-regex": "2.1.1"
+        "ansi-regex": "^2.0.0"
      }
    },
    "strip-bom": {
@ -958,7 +958,7 @@
      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
      "dev": true,
      "requires": {
-        "is-natural-number": "4.0.1"
+        "is-natural-number": "^4.0.1"
      }
    },
    "strip-outer": {
@ -967,7 +967,7 @@
      "integrity": "sha1-qsC6YNLpDF1PJ1/Yhp/ZotMQ/7g=",
      "dev": true,
      "requires": {
-        "escape-string-regexp": "1.0.5"
+        "escape-string-regexp": "^1.0.2"
      }
    },
    "tar": {
@ -976,9 +976,9 @@
      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
      "dev": true,
      "requires": {
-        "block-stream": "0.0.9",
+        "block-stream": "*",
-        "fstream": "1.0.11",
+        "fstream": "^1.0.2",
-        "inherits": "2.0.3"
+        "inherits": "2"
      }
    },
    "tar-pack": {
@ -987,14 +987,14 @@
      "integrity": "sha512-PPRybI9+jM5tjtCbN2cxmmRU7YmqT3Zv/UDy48tAh2XRkLa9bAORtSWLkVc13+GJF+cdTh1yEnHEk3cpTaL5Kg==",
      "dev": true,
      "requires": {
-        "debug": "2.6.9",
+        "debug": "^2.2.0",
-        "fstream": "1.0.11",
+        "fstream": "^1.0.10",
-        "fstream-ignore": "1.0.5",
+        "fstream-ignore": "^1.0.5",
-        "once": "1.4.0",
+        "once": "^1.3.3",
-        "readable-stream": "2.3.5",
+        "readable-stream": "^2.1.4",
-        "rimraf": "2.6.2",
+        "rimraf": "^2.5.1",
-        "tar": "2.2.1",
+        "tar": "^2.2.1",
-        "uid-number": "0.0.6"
+        "uid-number": "^0.0.6"
      }
    },
    "tar-stream": {
@ -1003,10 +1003,10 @@
      "integrity": "sha512-mQdgLPc/Vjfr3VWqWbfxW8yQNiJCbAZ+Gf6GDu1Cy0bdb33ofyiNGBtAY96jHFhDuivCwgW1H9DgTON+INiXgg==",
      "dev": true,
      "requires": {
-        "bl": "1.2.1",
+        "bl": "^1.0.0",
-        "end-of-stream": "1.4.1",
+        "end-of-stream": "^1.0.0",
-        "readable-stream": "2.3.5",
+        "readable-stream": "^2.0.0",
-        "xtend": "4.0.1"
+        "xtend": "^4.0.0"
      }
    },
    "through": {
@ -1027,7 +1027,7 @@
      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
      "dev": true,
      "requires": {
-        "escape-string-regexp": "1.0.5"
+        "escape-string-regexp": "^1.0.2"
      }
    },
    "tunnel-agent": {
@ -1036,7 +1036,7 @@
      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
      "dev": true,
      "requires": {
-        "safe-buffer": "5.1.1"
+        "safe-buffer": "^5.0.1"
      }
    },
    "uid-number": {
@ -1051,8 +1051,8 @@
      "integrity": "sha512-izD3jxT8xkzwtXRUZjtmRwKnZoeECrfZ8ra/ketwOcusbZEp4mjULMnJOCfTDZBgGQAAY1AJ/IgxcwkavcX9Og==",
      "dev": true,
      "requires": {
-        "buffer": "3.6.0",
+        "buffer": "^3.0.1",
-        "through": "2.3.8"
+        "through": "^2.3.6"
      }
    },
    "url-parse-lax": {
@ -1061,7 +1061,7 @@
      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
      "dev": true,
      "requires": {
-        "prepend-http": "1.0.4"
+        "prepend-http": "^1.0.1"
      }
    },
    "url-to-options": {
@ -1082,7 +1082,7 @@
      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
      "dev": true,
      "requires": {
-        "string-width": "1.0.2"
+        "string-width": "^1.0.2"
      }
    },
    "wrappy": {
@ -1097,9 +1097,9 @@
      "integrity": "sha512-xuPeK4OdjWqtfi59ylvVL0Yn35SF3zgcAcv7rBPFHVaEapaDr4GdGgm3j7ckTwH9wHL7fGmgfAnb0+THrHb8tA==",
      "dev": true,
      "requires": {
-        "graceful-fs": "4.1.11",
+        "graceful-fs": "^4.1.11",
-        "imurmurhash": "0.1.4",
+        "imurmurhash": "^0.1.4",
-        "signal-exit": "3.0.2"
+        "signal-exit": "^3.0.2"
      }
    },
    "write-json-file": {
@ -1108,12 +1108,12 @@
      "integrity": "sha1-K2TIozAE1UuGmMdtWFp3zrYdoy8=",
      "dev": true,
      "requires": {
-        "detect-indent": "5.0.0",
+        "detect-indent": "^5.0.0",
-        "graceful-fs": "4.1.11",
+        "graceful-fs": "^4.1.2",
-        "make-dir": "1.2.0",
+        "make-dir": "^1.0.0",
-        "pify": "3.0.0",
+        "pify": "^3.0.0",
-        "sort-keys": "2.0.0",
+        "sort-keys": "^2.0.0",
-        "write-file-atomic": "2.3.0"
+        "write-file-atomic": "^2.0.0"
      },
      "dependencies": {
        "sort-keys": {
@ -1122,7 +1122,7 @@
          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
          "dev": true,
          "requires": {
-            "is-plain-obj": "1.1.0"
+            "is-plain-obj": "^1.0.0"
          }
        }
      }
@ -1139,8 +1139,8 @@
      "integrity": "sha1-qBmB6nCleUYTOIPwKcWCGok1mn8=",
      "dev": true,
      "requires": {
-        "buffer-crc32": "0.2.13",
+        "buffer-crc32": "~0.2.3",
-        "fd-slicer": "1.0.1"
+        "fd-slicer": "~1.0.1"
      }
    }
  }
--- a/codecs/mozjpeg_enc/package.json
+++ b/codecs/mozjpeg_enc/package.json
@ -2,9 +2,7 @@
  "name": "mozjpeg_enc",
  "scripts": {
    "install": "napa",
-    "build": "npm run build:library && npm run build:wasm",
+    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
    "build:library": "cd node_modules/mozjpeg && autoreconf -fiv && docker run --rm -v $(pwd):/src trzeci/emscripten emconfigure ./configure --without-simd && docker run --rm -v $(pwd):/src trzeci/emscripten emmake make libjpeg.la",
    "build:wasm": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"mozjpeg_enc\"' -I node_modules/mozjpeg -o ./mozjpeg_enc.js mozjpeg_enc.c node_modules/mozjpeg/.libs/libjpeg.a"
  },
  "napa": {
    "mozjpeg": "mozilla/mozjpeg#v3.3.1"
--- a/codecs/optipng/.gitignore
+++ b/codecs/optipng/.gitignore
@ -0,0 +1,2 @@
 build/
 *.o
--- a/codecs/optipng/README.md
+++ b/codecs/optipng/README.md
@ -0,0 +1,26 @@
 # OptiPNG
 - Source: <https://sourceforge.net/project/optipng>
 - Version: v0.7.7
 ## Dependencies
 - Docker
 ## Example
 See `example.html`
 ## API
 ### `int version()`
 Returns the version of optipng as a number. va.b.c is encoded as 0x0a0b0c
 ### `ArrayBuffer compress(std::string buffer, {level})`;
 `compress` will re-compress the given PNG image via `buffer`. `level` is a number between 0 and 7.
 ### `void free_result()`
 Frees the result created by `compress()`.
--- a/codecs/optipng/build.sh
+++ b/codecs/optipng/build.sh
@ -0,0 +1,87 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export PREFIX="/src/build"
 export CFLAGS="${OPTIMIZE} -I${PREFIX}/include/"
 export CPPFLAGS="${OPTIMIZE} -I${PREFIX}/include/"
 export LDFLAGS="${OPTIMIZE} -L${PREFIX}/lib/"
 apt-get update
 apt-get install -qqy autoconf libtool
 echo "============================================="
 echo "Compiling zlib"
 echo "============================================="
 test -n "$SKIP_ZLIB" || (
  cd node_modules/zlib
  emconfigure ./configure --prefix=${PREFIX}/
  emmake make
  emmake make install
 )
 echo "============================================="
 echo "Compiling zlib done"
 echo "============================================="
 echo "============================================="
 echo "Compiling libpng"
 echo "============================================="
 test -n "$SKIP_LIBPNG" || (
  cd node_modules/libpng
  autoreconf -i
  emconfigure ./configure --with-zlib-prefix=${PREFIX}/ --prefix=${PREFIX}/
  emmake make
  emmake make install
 )
 echo "============================================="
 echo "Compiling libpng done"
 echo "============================================="
 echo "============================================="
 echo "Compiling optipng"
 echo "============================================="
 (
  emcc \
    ${OPTIMIZE} \
    -Wno-implicit-function-declaration \
    -I ${PREFIX}/include \
    -I node_modules/optipng/src/opngreduc \
    -I node_modules/optipng/src/pngxtern \
    -I node_modules/optipng/src/cexcept \
    -I node_modules/optipng/src/gifread \
    -I node_modules/optipng/src/pnmio \
    -I node_modules/optipng/src/minitiff \
    --std=c99 -c \
    node_modules/optipng/src/opngreduc/*.c \
    node_modules/optipng/src/pngxtern/*.c \
    node_modules/optipng/src/gifread/*.c \
    node_modules/optipng/src/minitiff/*.c \
    node_modules/optipng/src/pnmio/*.c \
    node_modules/optipng/src/optipng/*.c
  emcc \
    --bind \
    ${OPTIMIZE} \
    -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME="optipng"' \
    -I ${PREFIX}/include \
    -I node_modules/optipng/src/opngreduc \
    -I node_modules/optipng/src/pngxtern \
    -I node_modules/optipng/src/cexcept \
    -I node_modules/optipng/src/gifread \
    -I node_modules/optipng/src/pnmio \
    -I node_modules/optipng/src/minitiff \
    -o "optipng.js" \
    --std=c++11 \
    optipng.cpp \
    *.o \
    ${PREFIX}/lib/libz.so ${PREFIX}/lib/libpng.a
 )
 echo "============================================="
 echo "Compiling optipng done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/optipng/example.html
+++ b/codecs/optipng/example.html
@ -0,0 +1,19 @@
 <!doctype html>
 <script src='optipng.js'></script>
 <script>
  const Module = optipng();
  Module.onRuntimeInitialized = async _ => {
    console.log('Version:', Module.version().toString(16));
    const image = await fetch('../example_palette.png').then(r => r.arrayBuffer());
    const newImage = Module.compress(image, {level: 3});
    console.log('done');
    Module.free_result();
    console.log(`Old size: ${image.byteLength}, new size: ${newImage.byteLength} (${newImage.byteLength/image.byteLength*100}%)`);
    const blobURL = URL.createObjectURL(new Blob([newImage], {type: 'image/png'}));
    const img = document.createElement('img');
    img.src = blobURL;
    document.body.appendChild(img);
  };
 </script>
--- a/codecs/optipng/optipng.cpp
+++ b/codecs/optipng/optipng.cpp
@ -0,0 +1,53 @@
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include <stdio.h>
 using namespace emscripten;
 extern "C" int main(int argc, char *argv[]);
 int version() {
  // FIXME (@surma): Haven’t found a version in optipng :(
  return 0;
 }
 struct OptiPngOpts {
  int level;
 };
 uint8_t* result;
 val compress(std::string png, OptiPngOpts opts) {
  remove("input.png");
  remove("output.png");
  FILE* infile = fopen("input.png", "wb");
  fwrite(png.c_str(), png.length(), 1, infile);
  fflush(infile);
  fclose(infile);
  char optlevel[8];
  sprintf(&optlevel[0], "-o%d", opts.level);
  char* args[] = {"optipng", optlevel, "-out", "output.png", "input.png"};
  main(5, args);
  FILE *outfile = fopen("output.png", "rb");
  fseek(outfile, 0, SEEK_END);
  int fsize = ftell(outfile);
  result = (uint8_t*) malloc(fsize);
  fseek(outfile, 0, SEEK_SET);
  fread(result, fsize, 1, outfile);
  return val(typed_memory_view(fsize, result));
 }
 void free_result() {
  free(result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  value_object<OptiPngOpts>("OptiPngOpts")
    .field("level", &OptiPngOpts::level);
  function("version", &version);
  function("compress", &compress);
  function("free_result", &free_result);
 }
--- a/codecs/optipng/optipng.d.ts
+++ b/codecs/optipng/optipng.d.ts
@ -0,0 +1,10 @@
 import {EncodeOptions} from "src/codecs/optipng/encoder";
 export interface OptiPngModule extends EmscriptenWasm.Module {
  compress(data: BufferSource, opts: EncodeOptions): Uint8Array;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): OptiPngModule;
--- a/codecs/optipng/optipng.js
+++ b/codecs/optipng/optipng.js
--- a/codecs/optipng/optipng.wasm
+++ b/codecs/optipng/optipng.wasm
--- a/codecs/optipng/package-lock.json
+++ b/codecs/optipng/package-lock.json
--- a/codecs/optipng/package.json
+++ b/codecs/optipng/package.json
@ -0,0 +1,22 @@
 {
  "name": "optipng",
  "scripts": {
    "install": "tar-dependency install && napa",
    "build": "npm run build:wasm",
    "build:wasm": "docker run --rm -v $(pwd):/src -e SKIP_ZLIB=\"${SKIP_ZLIB}\" -e SKIP_LIBPNG=\"${SKIP_LIBPNG}\" trzeci/emscripten ./build.sh"
  },
  "tarDependencies": {
    "node_modules/optipng": {
      "url": "https://netcologne.dl.sourceforge.net/project/optipng/OptiPNG/optipng-0.7.7/optipng-0.7.7.tar.gz",
      "strip": 1
    }
  },
  "napa": {
    "libpng": "emscripten-ports/libpng",
    "zlib": "emscripten-ports/zlib"
  },
  "dependencies": {
    "napa": "^3.0.0",
    "tar-dependency": "0.0.3"
  }
 }
--- a/codecs/webp_dec/README.md
+++ b/codecs/webp_dec/README.md
@ -0,0 +1,22 @@
 # WebP decoder
 - Source: <https://github.com/webmproject/libwebp>
 - Version: v0.6.1
 ## Example
 See `example.html`
 ## API
 ### `int version()`
 Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
 ### `RawImage decode(std::string buffer)`
 Decodes the given webp buffer into raw RGBA. `RawImage` is a class with 3 fields: `buffer`, `width`, and `height`.
 ### `void free_result()`
 Frees the result created by `decode()`.
--- a/codecs/webp_dec/build.sh
+++ b/codecs/webp_dec/build.sh
@ -0,0 +1,34 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
 (
  emcc \
    ${OPTIMIZE} \
    --bind \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="webp_dec"' \
    --std=c++11 \
    -I node_modules/libwebp \
    -o ./webp_dec.js \
    node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
    -x c++ \
    webp_dec.cpp
 )
 echo "============================================="
 echo "Compiling wasm bindings done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/webp_dec/example.html
+++ b/codecs/webp_dec/example.html
@ -0,0 +1,24 @@
 <!doctype html>
 <script src='webp_dec.js'></script>
 <script>
  const Module = webp_dec();
  async function loadFile(src) {
    const resp = await fetch(src);
    return await resp.arrayBuffer();
  }
  Module.onRuntimeInitialized = async _ => {
    console.log('Version:', Module.version().toString(16));
    const image = await loadFile('../example.webp');
    const result = Module.decode(image);
    const imageData = new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
    Module.free_result();
    const canvas = document.createElement('canvas');
    canvas.width = result.width;
    canvas.height = result.height;
    document.body.appendChild(canvas);
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
  };
 </script>
--- a/codecs/webp_dec/package-lock.json
+++ b/codecs/webp_dec/package-lock.json
--- a/codecs/webp_dec/package.json
+++ b/codecs/webp_dec/package.json
@ -0,0 +1,13 @@
 {
  "name": "webp_dec",
  "scripts": {
    "install": "napa",
    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
  },
  "napa": {
    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
    "napa": "^3.0.0"
  }
 }
--- a/codecs/webp_dec/webp_dec.cpp
+++ b/codecs/webp_dec/webp_dec.cpp
@ -0,0 +1,47 @@
 #include "emscripten/bind.h"
 #include "emscripten/val.h"
 #include "src/webp/decode.h"
 #include "src/webp/demux.h"
 #include <string>
 using namespace emscripten;
 int version() {
  return WebPGetDecoderVersion();
 }
 class RawImage {
 public:
  val buffer;
  int width;
  int height;
  RawImage(val b, int w, int h)
    : buffer(b), width(w), height(h) {}
 };
 uint8_t* last_result;
 RawImage decode(std::string buffer) {
  int width, height;
  last_result = WebPDecodeRGBA((const uint8_t*)buffer.c_str(), buffer.size(), &width, &height);
  return RawImage(
    val(typed_memory_view(width*height*4, last_result)),
    width,
    height
  );
 }
 void free_result() {
  free(last_result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  class_<RawImage>("RawImage")
    .property("buffer", &RawImage::buffer)
    .property("width", &RawImage::width)
    .property("height", &RawImage::height);
  function("decode", &decode);
  function("version", &version);
  function("free_result", &free_result);
 }
--- a/codecs/webp_dec/webp_dec.d.ts
+++ b/codecs/webp_dec/webp_dec.d.ts
@ -0,0 +1,13 @@
 interface RawImage {
  buffer: Uint8Array;
  width: number;
  height: number;
 }
 interface WebPModule extends EmscriptenWasm.Module {
  decode(data: BufferSource): RawImage;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
--- a/codecs/webp_dec/webp_dec.js
+++ b/codecs/webp_dec/webp_dec.js
--- a/codecs/webp_dec/webp_dec.wasm
+++ b/codecs/webp_dec/webp_dec.wasm
--- a/codecs/webp_enc/README.md
+++ b/codecs/webp_enc/README.md
@ -17,26 +17,10 @@ See `example.html`
 Returns the version of libwebp as a number. va.b.c is encoded as 0x0a0b0c
-### `uint8_t* create_buffer(int width, int height)`
+### `UInt8Array encode(uint8_t* image_buffer, int image_width, int image_height, WebPConfig config)`
-Allocates an RGBA buffer for an image with the given dimension.
+Encodes the given image with given dimension to WebP.
 ### `void destroy_buffer(uint8_t* p)`
 Frees a buffer created with `create_buffer`.
 ### `void encode(uint8_t* image_buffer, int image_width, int image_height, float quality)`
 Encodes the given image with given dimension to WebP. `quality` is a number between 0 and 100. The higher the number, the better the quality of the encoded image. The result is implicitly stored and can be accessed using the `get_result_*()` functions.
 ### `void free_result()`
-Frees the result created by `encode()`.
+Frees the last result created by `encode()`.
 ### `int get_result_pointer()`
 Returns the pointer to the start of the buffer holding the encoded data.
 ### `int get_result_size()`
 Returns the length of the buffer holding the encoded data.
--- a/codecs/webp_enc/build.sh
+++ b/codecs/webp_enc/build.sh
@ -0,0 +1,34 @@
 #!/bin/bash
 set -e
 export OPTIMIZE="-Os"
 export LDFLAGS="${OPTIMIZE}"
 export CFLAGS="${OPTIMIZE}"
 export CPPFLAGS="${OPTIMIZE}"
 echo "============================================="
 echo "Compiling wasm bindings"
 echo "============================================="
 (
  emcc \
    ${OPTIMIZE} \
    --bind \
    -s ALLOW_MEMORY_GROWTH=1 \
    -s MODULARIZE=1 \
    -s 'EXPORT_NAME="webp_enc"' \
    --std=c++11 \
    -I node_modules/libwebp \
    -o ./webp_enc.js \
    node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \
    -x c++ \
    webp_enc.cpp
 )
 echo "============================================="
 echo "Compiling wasm bindings done"
 echo "============================================="
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
 echo "Did you update your docker image?"
 echo "Run \`docker pull trzeci/emscripten\`"
 echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
--- a/codecs/webp_enc/example.html
+++ b/codecs/webp_enc/example.html
@ -1,7 +1,7 @@
 <!doctype html>
 <script src='webp_enc.js'></script>
 <script>
-  const Module = webp_enc();
+  const module = webp_enc();
  async function loadImage(src) {
    // Load image
@ -17,28 +17,43 @@
    return ctx.getImageData(0, 0, img.width, img.height);
  }
-  Module.onRuntimeInitialized = async _ => {
+  module.onRuntimeInitialized = async _ => {
-    const api = {
+    console.log('Version:', module.version().toString(16));
      version: Module.cwrap('version', 'number', []),
      create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
      destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
      encode: Module.cwrap('encode', '', ['number', 'number', 'number', 'number']),
      free_result: Module.cwrap('free_result', '', ['number']),
      get_result_pointer: Module.cwrap('get_result_pointer', 'number', []),
      get_result_size: Module.cwrap('get_result_size', 'number', []),
    };
    const image = await loadImage('../example.png');
-    const p = api.create_buffer(image.width, image.height);
+    const result = module.encode(image.data, image.width, image.height, {
-    Module.HEAP8.set(image.data, p);
+      quality: 75,
-    api.encode(p, image.width, image.height, 2);
+      target_size: 0,
-    const resultPointer = api.get_result_pointer();
+      target_PSNR: 0,
-    const resultSize = api.get_result_size();
+      method: 4,
-    const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+      sns_strength: 50,
-    const result = new Uint8Array(resultView);
+      filter_strength: 60,
-    api.free_result(resultPointer);
+      filter_sharpness: 0,
-    api.destroy_buffer(p);
+      filter_type: 1,
      partitions: 0,
      segments: 4,
      pass: 1,
      show_compressed: 0,
      preprocessing: 0,
      autofilter: 0,
      partition_limit: 0,
      alpha_compression: 1,
      alpha_filtering: 1,
      alpha_quality: 100,
      lossless: 0,
      exact: 0,
      image_hint: 0,
      emulate_jpeg_size: 0,
      thread_level: 0,
      low_memory: 0,
      near_lossless: 100,
      use_delta_palette: 0,
      use_sharp_yuv: 0,
    });
    console.log('size', result.length);
    const blob = new Blob([result], {type: 'image/webp'});
    module.free_result();
    const blob = new Blob([result], {type: 'image/jpeg'});
    const blobURL = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = blobURL;
--- a/codecs/webp_enc/package.json
+++ b/codecs/webp_enc/package.json
@ -2,10 +2,10 @@
  "name": "webp_enc",
  "scripts": {
    "install": "napa",
-    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"webp_enc\"' -I node_modules/libwebp -o ./webp_enc.js webp_enc.c node_modules/libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c"
+    "build": "docker run --rm -v $(pwd):/src trzeci/emscripten ./build.sh"
  },
  "napa": {
-    "libwebp": "webmproject/libwebp#v0.6.1"
+    "libwebp": "webmproject/libwebp#v1.0.0"
  },
  "devDependencies": {
    "napa": "^3.0.0"
--- a/codecs/webp_enc/webp_enc.c
+++ b/codecs/webp_enc/webp_enc.c
@ -1,44 +0,0 @@
 #include "emscripten.h"
 #include "src/webp/encode.h"
 #include <stdlib.h>
 EMSCRIPTEN_KEEPALIVE
 int version() {
  return WebPGetEncoderVersion();
 }
 EMSCRIPTEN_KEEPALIVE
 uint8_t* create_buffer(int width, int height) {
  return malloc(width * height * 4 * sizeof(uint8_t));
 }
 EMSCRIPTEN_KEEPALIVE
 void destroy_buffer(uint8_t* p) {
  free(p);
 }
 int result[2];
 EMSCRIPTEN_KEEPALIVE
 void encode(uint8_t* img_in, int width, int height, float quality) {
  uint8_t* img_out;
  size_t size;
  size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &img_out);
  result[0] = (int)img_out;
  result[1] = size;
 }
 EMSCRIPTEN_KEEPALIVE
 void free_result() {
  WebPFree(result[0]);
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_pointer() {
  return result[0];
 }
 EMSCRIPTEN_KEEPALIVE
 int get_result_size() {
  return result[1];
 }
--- a/codecs/webp_enc/webp_enc.cpp
+++ b/codecs/webp_enc/webp_enc.cpp
@ -0,0 +1,95 @@
 #include <emscripten/bind.h>
 #include <emscripten/val.h>
 #include "src/webp/encode.h"
 #include <stdlib.h>
 #include <string.h>
 #include <stdexcept>
 using namespace emscripten;
 int version() {
  return WebPGetEncoderVersion();
 }
 uint8_t* last_result;
 val encode(std::string img, int width, int height, WebPConfig config) {
  uint8_t* img_in = (uint8_t*) img.c_str();
  // A lot of this is duplicated from Encode in picture_enc.c
  WebPPicture pic;
  WebPMemoryWriter wrt;
  int ok;
  if (!WebPPictureInit(&pic)) {
    // shouldn't happen, except if system installation is broken
    throw std::runtime_error("Unexpected error");
  }
  pic.use_argb = !!config.lossless;
  pic.width = width;
  pic.height = height;
  pic.writer = WebPMemoryWrite;
  pic.custom_ptr = &wrt;
  WebPMemoryWriterInit(&wrt);
  ok = WebPPictureImportRGBA(&pic, (uint8_t*) img_in, width * 4) && WebPEncode(&config, &pic);
  WebPPictureFree(&pic);
  if (!ok) {
    WebPMemoryWriterClear(&wrt);
    throw std::runtime_error("Encode failed");
  }
  last_result = wrt.mem;
  return val(typed_memory_view(wrt.size, wrt.mem));
 }
 void free_result() {
  WebPFree(last_result);
 }
 EMSCRIPTEN_BINDINGS(my_module) {
  enum_<WebPImageHint>("WebPImageHint")
    .value("WEBP_HINT_DEFAULT", WebPImageHint::WEBP_HINT_DEFAULT)
    .value("WEBP_HINT_PICTURE", WebPImageHint::WEBP_HINT_PICTURE)
    .value("WEBP_HINT_PHOTO", WebPImageHint::WEBP_HINT_PHOTO)
    .value("WEBP_HINT_GRAPH", WebPImageHint::WEBP_HINT_GRAPH)
    ;
  value_object<WebPConfig>("WebPConfig")
    .field("lossless", &WebPConfig::lossless)
    .field("quality", &WebPConfig::quality)
    .field("method", &WebPConfig::method)
    .field("image_hint", &WebPConfig::image_hint)
    .field("target_size", &WebPConfig::target_size)
    .field("target_PSNR", &WebPConfig::target_PSNR)
    .field("segments", &WebPConfig::segments)
    .field("sns_strength", &WebPConfig::sns_strength)
    .field("filter_strength", &WebPConfig::filter_strength)
    .field("filter_sharpness", &WebPConfig::filter_sharpness)
    .field("filter_type", &WebPConfig::filter_type)
    .field("autofilter", &WebPConfig::autofilter)
    .field("alpha_compression", &WebPConfig::alpha_compression)
    .field("alpha_filtering", &WebPConfig::alpha_filtering)
    .field("alpha_quality", &WebPConfig::alpha_quality)
    .field("pass", &WebPConfig::pass)
    .field("show_compressed", &WebPConfig::show_compressed)
    .field("preprocessing", &WebPConfig::preprocessing)
    .field("partitions", &WebPConfig::partitions)
    .field("partition_limit", &WebPConfig::partition_limit)
    .field("emulate_jpeg_size", &WebPConfig::emulate_jpeg_size)
    .field("thread_level", &WebPConfig::thread_level)
    .field("low_memory", &WebPConfig::low_memory)
    .field("near_lossless", &WebPConfig::near_lossless)
    .field("exact", &WebPConfig::exact)
    .field("use_delta_palette", &WebPConfig::use_delta_palette)
    .field("use_sharp_yuv", &WebPConfig::use_sharp_yuv)
    ;
  function("version", &version);
  function("encode", &encode);
  function("free_result", &free_result);
 }
--- a/codecs/webp_enc/webp_enc.d.ts
+++ b/codecs/webp_enc/webp_enc.d.ts
@ -0,0 +1,9 @@
 import { EncodeOptions } from '../../src/codecs/webp/encoder-meta';
 interface WebPModule extends EmscriptenWasm.Module {
  encode(data: BufferSource, width: number, height: number, options: EncodeOptions): Uint8Array;
  free_result(): void;
 }
 export default function(opts: EmscriptenWasm.ModuleOpts): WebPModule;
--- a/codecs/webp_enc/webp_enc.js
+++ b/codecs/webp_enc/webp_enc.js
--- a/codecs/webp_enc/webp_enc.wasm
+++ b/codecs/webp_enc/webp_enc.wasm
--- a/firebase.json
+++ b/firebase.json
@ -1,54 +0,0 @@
 {
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=7200"
          }
        ]
      },
      {
        "source": "**/*.@(js|css|json|manifest|map)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=0"
          }
        ]
      }
    ]
  }
 }
--- a/global.d.ts
+++ b/global.d.ts
@ -13,10 +13,6 @@ declare namespace JSX {
  interface IntrinsicElements { }
 }
 declare module 'preact-i18n';
 declare module 'preact-material-components-drawer';
 declare module 'material-radial-progress';
 declare module 'classnames' {
  export default function classnames(...args: any[]): string;
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -4,91 +4,67 @@
  "version": "0.0.0",
  "license": "apache-2.0",
  "scripts": {
    "build:mozjpeg_enc": "cd codecs/mozjpeg_enc && npm run build",
    "build:codecs": "npm run build:mozjpeg_enc",
    "start": "webpack serve --host 0.0.0.0 --hot",
    "build": "webpack -p",
-    "lint": "eslint src"
+    "lint": "tslint -c tslint.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
    "lintfix": "tslint -c tslint.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'"
  },
-  "eslintConfig": {
+  "husky": {
-    "extends": [
+    "hooks": {
-      "standard",
+      "pre-commit": "npm run lint"
      "standard-jsx"
    ],
    "rules": {
      "indent": [
        2,
        2
      ],
      "semi": [
        2,
        "always"
      ],
      "prefer-const": 1
    }
  },
  "eslintIgnore": [
    "build/*"
  ],
  "devDependencies": {
-    "@types/node": "^9.4.7",
+    "@types/node": "^9.6.23",
    "@types/pretty-bytes": "^5.1.0",
    "@types/webassembly-js-api": "0.0.1",
-    "babel-loader": "^7.1.4",
+    "@webcomponents/custom-elements": "^1.2.0",
    "babel-loader": "^7.1.5",
    "babel-plugin-jsx-pragmatic": "^1.0.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.14",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.1",
+    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^0.28.11",
    "eslint": "^4.18.2",
    "eslint-config-standard": "^11.0.0",
    "eslint-config-standard-jsx": "^5.0.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.0.6",
+    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.0.0-rc.13",
    "if-env": "^1.0.4",
    "loader-utils": "^1.1.0",
    "mini-css-extract-plugin": "^0.3.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.3",
-    "optimize-css-assets-webpack-plugin": "^4.0.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.3",
    "progress-bar-webpack-plugin": "^1.11.0",
    "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.7",
+    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "source-map-loader": "^0.2.3",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.22.1",
-    "ts-loader": "^4.0.1",
+    "ts-loader": "^4.4.2",
-    "tslint": "^5.9.1",
+    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.9.2",
    "tslint-config-semistandard": "^7.0.0",
-    "tslint-react": "^3.5.1",
+    "tslint-react": "^3.6.0",
-    "typescript": "^2.7.2",
+    "typescript": "^2.9.2",
    "typings-for-css-modules-loader": "^1.7.0",
-    "webpack": "^4.3.0",
+    "webpack": "^4.19.1",
-    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^2.0.13",
+    "webpack-cli": "^2.1.5",
-    "webpack-dev-server": "^3.1.1",
+    "webpack-dev-server": "^3.1.5",
-    "webpack-plugin-replace": "^1.1.1"
+    "webpack-plugin-replace": "^1.1.1",
-  },
+    "classnames": "^2.2.6",
-  "dependencies": {
+    "comlink": "^3.0.3",
-    "classnames": "^2.2.5",
+    "linkstate": "^1.1.1",
-    "material-components-web": "^0.32.0",
+    "preact": "^8.3.1",
-    "material-radial-progress": "git+https://gist.github.com/02134901c77c5309924bfcf8b4435ebe.git",
+    "pretty-bytes": "^5.1.0",
-    "preact": "^8.2.7",
+    "worker-plugin": "^1.1.1"
    "preact-i18n": "^1.2.0",
    "preact-material-components": "^1.3.7",
    "preact-material-components-drawer": "git+https://gist.github.com/a78fceed440b98e62582e4440b86bfab.git",
    "preact-router": "^2.6.0"
  }
 }
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/icon-large.png
+++ b/src/assets/icon-large.png
--- a/src/assets/icon-small.png
+++ b/src/assets/icon-small.png
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/codecs/browser-bmp/encoder-meta.ts
+++ b/src/codecs/browser-bmp/encoder-meta.ts
@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-bmp';
 export const label = 'Browser BMP';
 export const mimeType = 'image/bmp';
 export const extension = 'bmp';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-bmp/encoder.ts
+++ b/src/codecs/browser-bmp/encoder.ts
@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-gif/encoder-meta.ts
+++ b/src/codecs/browser-gif/encoder-meta.ts
@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions {}
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-gif';
 export const label = 'Browser GIF';
 export const mimeType = 'image/gif';
 export const extension = 'gif';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-gif/encoder.ts
+++ b/src/codecs/browser-gif/encoder.ts
@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-jp2/encoder-meta.ts
+++ b/src/codecs/browser-jp2/encoder-meta.ts
@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-jp2';
 export const label = 'Browser JPEG 2000';
 export const mimeType = 'image/jp2';
 export const extension = 'jp2';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-jp2/encoder.ts
+++ b/src/codecs/browser-jp2/encoder.ts
@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-jpeg/encoder-meta.ts
+++ b/src/codecs/browser-jpeg/encoder-meta.ts
@ -0,0 +1,8 @@
 export interface EncodeOptions { quality: number; }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-jpeg';
 export const label = 'Browser JPEG';
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
 export const defaultOptions: EncodeOptions = { quality: 0.75 };
--- a/src/codecs/browser-jpeg/encoder.ts
+++ b/src/codecs/browser-jpeg/encoder.ts
@ -0,0 +1,6 @@
 import { EncodeOptions, mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData, { quality }: EncodeOptions) {
  return canvasEncode(data, mimeType, quality);
 }
--- a/src/codecs/browser-jpeg/options.ts
+++ b/src/codecs/browser-jpeg/options.ts
@ -0,0 +1,3 @@
 import qualityOption from '../generic/quality-option';
 export default qualityOption({ min: 0, max: 1, step: 0.01 });
--- a/src/codecs/browser-pdf/encoder-meta.ts
+++ b/src/codecs/browser-pdf/encoder-meta.ts
@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-pdf';
 export const label = 'Browser PDF';
 export const mimeType = 'application/pdf';
 export const extension = 'pdf';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-pdf/encoder.ts
+++ b/src/codecs/browser-pdf/encoder.ts
@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-png/encoder-meta.ts
+++ b/src/codecs/browser-png/encoder-meta.ts
@ -0,0 +1,8 @@
 export interface EncodeOptions {}
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-png';
 export const label = 'Browser PNG';
 export const mimeType = 'image/png';
 export const extension = 'png';
 export const defaultOptions: EncodeOptions = {};
--- a/src/codecs/browser-png/encoder.tsx
+++ b/src/codecs/browser-png/encoder.tsx
@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-tiff/encoder-meta.ts
+++ b/src/codecs/browser-tiff/encoder-meta.ts
@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-tiff';
 export const label = 'Browser TIFF';
 export const mimeType = 'image/tiff';
 export const extension = 'tiff';
 export const defaultOptions: EncodeOptions = {};
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-tiff/encoder.ts
+++ b/src/codecs/browser-tiff/encoder.ts
@ -0,0 +1,6 @@
 import { mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData) {
  return canvasEncode(data, mimeType);
 }
--- a/src/codecs/browser-webp/encoder-meta.ts
+++ b/src/codecs/browser-webp/encoder-meta.ts
@ -0,0 +1,11 @@
 import { canvasEncodeTest } from '../generic/util';
 export interface EncodeOptions { quality: number; }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'browser-webp';
 export const label = 'Browser WebP';
 export const mimeType = 'image/webp';
 export const extension = 'webp';
 export const defaultOptions: EncodeOptions = { quality: 0.75 };
 export const featureTest = () => canvasEncodeTest(mimeType);
--- a/src/codecs/browser-webp/encoder.ts
+++ b/src/codecs/browser-webp/encoder.ts
@ -0,0 +1,6 @@
 import { EncodeOptions, mimeType } from './encoder-meta';
 import { canvasEncode } from '../../lib/util';
 export function encode(data: ImageData, { quality }: EncodeOptions) {
  return canvasEncode(data, mimeType, quality);
 }
--- a/src/codecs/browser-webp/options.ts
+++ b/src/codecs/browser-webp/options.ts
@ -0,0 +1,3 @@
 import qualityOption from '../generic/quality-option';
 export default qualityOption({ min: 0, max: 1, step: 0.01 });
--- a/src/codecs/decoders.ts
+++ b/src/codecs/decoders.ts
@ -0,0 +1,21 @@
 import { nativeDecode, sniffMimeType, canDecodeImage } from '../lib/util';
 import Processor from './processor';
 // tslint:disable-next-line:max-line-length It’s a data URL. Whatcha gonna do?
 const webpFile = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
 const nativeWebPSupported = canDecodeImage(webpFile);
 export async function decodeImage(blob: Blob, processor: Processor): Promise<ImageData> {
  const mimeType = await sniffMimeType(blob);
  try {
    if (mimeType === 'image/webp' && !(await nativeWebPSupported)) {
      return await processor.webpDecode(blob);
    }
    // Otherwise, just throw it at the browser's decoder.
    return await nativeDecode(blob);
  } catch (err) {
    throw Error("Couldn't decode image");
  }
 }
--- a/src/codecs/encoders.ts
+++ b/src/codecs/encoders.ts
@ -0,0 +1,78 @@
 import * as identity from './identity/encoder-meta';
 import * as optiPNG from './optipng/encoder-meta';
 import * as mozJPEG from './mozjpeg/encoder-meta';
 import * as webP from './webp/encoder-meta';
 import * as browserPNG from './browser-png/encoder-meta';
 import * as browserJPEG from './browser-jpeg/encoder-meta';
 import * as browserWebP from './browser-webp/encoder-meta';
 import * as browserGIF from './browser-gif/encoder-meta';
 import * as browserTIFF from './browser-tiff/encoder-meta';
 import * as browserJP2 from './browser-jp2/encoder-meta';
 import * as browserBMP from './browser-bmp/encoder-meta';
 import * as browserPDF from './browser-pdf/encoder-meta';
 export interface EncoderSupportMap {
  [key: string]: boolean;
 }
 export type EncoderState =
  identity.EncoderState |
  optiPNG.EncoderState |
  mozJPEG.EncoderState |
  webP.EncoderState |
  browserPNG.EncoderState |
  browserJPEG.EncoderState |
  browserWebP.EncoderState |
  browserGIF.EncoderState |
  browserTIFF.EncoderState |
  browserJP2.EncoderState |
  browserBMP.EncoderState |
  browserPDF.EncoderState;
 export type EncoderOptions =
  identity.EncodeOptions |
  optiPNG.EncodeOptions |
  mozJPEG.EncodeOptions |
  webP.EncodeOptions |
  browserPNG.EncodeOptions |
  browserJPEG.EncodeOptions |
  browserWebP.EncodeOptions |
  browserGIF.EncodeOptions |
  browserTIFF.EncodeOptions |
  browserJP2.EncodeOptions |
  browserBMP.EncodeOptions |
  browserPDF.EncodeOptions;
 export type EncoderType = keyof typeof encoderMap;
 export const encoderMap = {
  [identity.type]: identity,
  [optiPNG.type]: optiPNG,
  [mozJPEG.type]: mozJPEG,
  [webP.type]: webP,
  [browserPNG.type]: browserPNG,
  [browserJPEG.type]: browserJPEG,
  [browserWebP.type]: browserWebP,
  // Safari & Firefox only:
  [browserBMP.type]: browserBMP,
  // Safari only:
  [browserGIF.type]: browserGIF,
  [browserTIFF.type]: browserTIFF,
  [browserJP2.type]: browserJP2,
  [browserPDF.type]: browserPDF,
 };
 export const encoders = Array.from(Object.values(encoderMap));
 /** Does this browser support a given encoder? Indexed by label */
 export const encodersSupported = Promise.resolve().then(async () => {
  const encodersSupported: EncoderSupportMap = {};
  await Promise.all(encoders.map(async (encoder) => {
    // If the encoder provides a featureTest, call it, otherwise assume supported.
    const isSupported = !('featureTest' in encoder) || await encoder.featureTest();
    encodersSupported[encoder.type] = isSupported;
  }));
  return encodersSupported;
 });
--- a/src/codecs/generic/quality-option.tsx
+++ b/src/codecs/generic/quality-option.tsx
@ -0,0 +1,56 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import * as style from '../../components/Options/style.scss';
 import Range from '../../components/range';
 interface EncodeOptions {
  quality: number;
 }
 type Props = {
  options: EncodeOptions,
  onChange(newOptions: EncodeOptions): void,
 };
 interface QualityOptionArg {
  min?: number;
  max?: number;
  step?: number;
 }
 export default function qualityOption(opts: QualityOptionArg = {}) {
  const {
    min = 0,
    max = 100,
    step = 1,
  } = opts;
  class QualityOptions extends Component<Props, {}> {
    @bind
    onChange(event: Event) {
      const el = event.currentTarget as HTMLInputElement;
      this.props.onChange({ quality: Number(el.value) });
    }
    render({ options }: Props) {
      return (
        <div class={style.optionsSection}>
          <div class={style.optionOneCell}>
            <Range
              name="quality"
              min={min}
              max={max}
              step={step || 'any'}
              value={options.quality}
              onInput={this.onChange}
            >
              Quality:
            </Range>
          </div>
        </div>
      );
    }
  }
  return QualityOptions;
 }
--- a/src/codecs/generic/util.ts
+++ b/src/codecs/generic/util.ts
@ -0,0 +1,13 @@
 import { canvasEncode } from '../../lib/util';
 export async function canvasEncodeTest(mimeType: string) {
  try {
    const blob = await canvasEncode(new ImageData(1, 1), mimeType);
    // According to the spec, the blob should be null if the format isn't supported…
    if (!blob) return false;
    // …but Safari & Firefox fall back to PNG, so we need to check the mime type.
    return blob.type === mimeType;
  } catch (err) {
    return false;
  }
 }
--- a/src/codecs/identity/encoder-meta.ts
+++ b/src/codecs/identity/encoder-meta.ts
@ -0,0 +1,6 @@
 export interface EncodeOptions {}
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'identity';
 export const label = 'Original image';
 export const defaultOptions: EncodeOptions = {};
--- a/src/codecs/imagequant/options.tsx
+++ b/src/codecs/imagequant/options.tsx
@ -0,0 +1,91 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, konami } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
 import Range from '../../components/range';
 const konamiPromise = konami();
 interface Props {
  options: QuantizeOptions;
  onChange(newOptions: QuantizeOptions): void;
 }
 interface State {
  extendedSettings: boolean;
 }
 export default class QuantizerOptions extends Component<Props, State> {
  state: State = { extendedSettings: false };
  componentDidMount() {
    konamiPromise.then(() => {
      this.setState({ extendedSettings: true });
    });
  }
  @bind
  onChange(event: Event) {
    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
    const { options } = this.props;
    const newOptions: QuantizeOptions = {
      zx: inputFieldValueAsNumber(form.zx, options.zx),
      maxNumColors: inputFieldValueAsNumber(form.maxNumColors, options.maxNumColors),
      dither: inputFieldValueAsNumber(form.dither),
    };
    this.props.onChange(newOptions);
  }
  render({ options }: Props, { extendedSettings }: State) {
    return (
      <form class={style.optionsSection}>
        <Expander>
          {extendedSettings ?
            <label class={style.optionTextFirst}>
              Type:
              <Select
                name="zx"
                value={'' + options.zx}
                onChange={this.onChange}
              >
                <option value="0">Standard</option>
                <option value="1">ZX</option>
              </Select>
            </label>
          : null}
        </Expander>
        <Expander>
          {options.zx ? null :
            <div class={style.optionOneCell}>
              <Range
                name="maxNumColors"
                min="2"
                max="256"
                value={options.maxNumColors}
                onInput={this.onChange}
              >
                Colors:
              </Range>
            </div>
          }
        </Expander>
        <div class={style.optionOneCell}>
          <Range
            name="dither"
            min="0"
            max="1"
            step="0.01"
            value={options.dither}
            onInput={this.onChange}
          >
            Dithering:
          </Range>
        </div>
      </form>
    );
  }
 }
--- a/src/codecs/imagequant/processor-meta.ts
+++ b/src/codecs/imagequant/processor-meta.ts
@ -0,0 +1,11 @@
 export interface QuantizeOptions {
  zx: number;
  maxNumColors: number;
  dither: number;
 }
 export const defaultOptions: QuantizeOptions = {
  zx: 0,
  maxNumColors: 256,
  dither: 1.0,
 };
--- a/src/codecs/imagequant/processor.ts
+++ b/src/codecs/imagequant/processor.ts
@ -0,0 +1,21 @@
 import imagequant, { QuantizerModule } from '../../../codecs/imagequant/imagequant';
 import wasmUrl from '../../../codecs/imagequant/imagequant.wasm';
 import { QuantizeOptions } from './processor-meta';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<QuantizerModule>;
 export async function process(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(imagequant, wasmUrl);
  const module = await emscriptenModule;
  const result = opts.zx ?
      module.zx_quantize(data.data, data.width, data.height, opts.dither)
    :
      module.quantize(data.data, data.width, data.height, opts.maxNumColors, opts.dither);
  module.free_result();
  return new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
 }
--- a/src/codecs/mozjpeg/encoder-meta.ts
+++ b/src/codecs/mozjpeg/encoder-meta.ts
@ -0,0 +1,49 @@
 export enum MozJpegColorSpace {
  GRAYSCALE = 1,
  RGB,
  YCbCr,
 }
 export interface EncodeOptions {
  quality: number;
  baseline: boolean;
  arithmetic: boolean;
  progressive: boolean;
  optimize_coding: boolean;
  smoothing: number;
  color_space: MozJpegColorSpace;
  quant_table: number;
  trellis_multipass: boolean;
  trellis_opt_zero: boolean;
  trellis_opt_table: boolean;
  trellis_loops: number;
  auto_subsample: boolean;
  chroma_subsample: number;
  separate_chroma_quality: boolean;
  chroma_quality: number;
 }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'mozjpeg';
 export const label = 'MozJPEG';
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
 export const defaultOptions: EncodeOptions = {
  quality: 75,
  baseline: false,
  arithmetic: false,
  progressive: true,
  optimize_coding: true,
  smoothing: 0,
  color_space: MozJpegColorSpace.YCbCr,
  quant_table: 3,
  trellis_multipass: false,
  trellis_opt_zero: false,
  trellis_opt_table: false,
  trellis_loops: 1,
  auto_subsample: true,
  chroma_subsample: 2,
  separate_chroma_quality: false,
  chroma_quality: 75,
 };
--- a/src/codecs/mozjpeg/encoder.ts
+++ b/src/codecs/mozjpeg/encoder.ts
@ -0,0 +1,18 @@
 import mozjpeg_enc, { MozJPEGModule } from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
 import wasmUrl from '../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm';
 import { EncodeOptions } from './encoder-meta';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<MozJPEGModule>;
 export async function encode(data: ImageData, options: EncodeOptions): Promise<ArrayBuffer> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(mozjpeg_enc, wasmUrl);
  const module = await emscriptenModule;
  const resultView = module.encode(data.data, data.width, data.height, options);
  const result = new Uint8Array(resultView);
  module.free_result();
  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
  return result.buffer as ArrayBuffer;
 }
--- a/src/codecs/mozjpeg/options.tsx
+++ b/src/codecs/mozjpeg/options.tsx
@ -0,0 +1,258 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
 import Range from '../../components/range';
 import linkState from 'linkstate';
 interface Props {
  options: EncodeOptions;
  onChange(newOptions: EncodeOptions): void;
 }
 interface State {
  showAdvanced: boolean;
 }
 export default class MozJPEGEncoderOptions extends Component<Props, State> {
  state: State = {
    showAdvanced: false,
  };
  @bind
  onChange(event: Event) {
    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
    const { options } = this.props;
    const newOptions: EncodeOptions = {
      // Copy over options the form doesn't currently care about, eg arithmetic
      ...this.props.options,
      // And now stuff from the form:
      // .checked
      baseline: inputFieldChecked(form.baseline, options.baseline),
      progressive: inputFieldChecked(form.progressive, options.progressive),
      optimize_coding: inputFieldChecked(form.optimize_coding, options.optimize_coding),
      trellis_multipass: inputFieldChecked(form.trellis_multipass, options.trellis_multipass),
      trellis_opt_zero: inputFieldChecked(form.trellis_opt_zero, options.trellis_opt_zero),
      trellis_opt_table: inputFieldChecked(form.trellis_opt_table, options.trellis_opt_table),
      auto_subsample: inputFieldChecked(form.auto_subsample, options.auto_subsample),
      separate_chroma_quality:
        inputFieldChecked(form.separate_chroma_quality, options.separate_chroma_quality),
      // .value
      quality: inputFieldValueAsNumber(form.quality, options.quality),
      chroma_quality: inputFieldValueAsNumber(form.chroma_quality, options.chroma_quality),
      chroma_subsample: inputFieldValueAsNumber(form.chroma_subsample, options.chroma_subsample),
      smoothing: inputFieldValueAsNumber(form.smoothing, options.smoothing),
      color_space: inputFieldValueAsNumber(form.color_space, options.color_space),
      quant_table: inputFieldValueAsNumber(form.quant_table, options.quant_table),
      trellis_loops: inputFieldValueAsNumber(form.trellis_loops, options.trellis_loops),
    };
    this.props.onChange(newOptions);
  }
  render({ options }: Props, { showAdvanced }: State) {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
    // gathering the data.
    return (
      <form class={style.optionsSection}>
        <div class={style.optionOneCell}>
          <Range
            name="quality"
            min="0"
            max="100"
            value={options.quality}
            onInput={this.onChange}
          >
            Quality:
          </Range>
        </div>
        <label class={style.optionInputFirst}>
          <Checkbox
            checked={showAdvanced}
            onChange={linkState(this, 'showAdvanced')}
          />
          Show advanced settings
        </label>
        <Expander>
          {showAdvanced ?
            <div>
              <label class={style.optionTextFirst}>
                Channels:
                <Select
                  name="color_space"
                  value={options.color_space}
                  onChange={this.onChange}
                >
                  <option value={MozJpegColorSpace.GRAYSCALE}>Grayscale</option>
                  <option value={MozJpegColorSpace.RGB}>RGB</option>
                  <option value={MozJpegColorSpace.YCbCr}>YCbCr</option>
                </Select>
              </label>
              <Expander>
                {options.color_space === MozJpegColorSpace.YCbCr ?
                  <div>
                    <label class={style.optionInputFirst}>
                      <Checkbox
                        name="auto_subsample"
                        checked={options.auto_subsample}
                        onChange={this.onChange}
                      />
                      Auto subsample chroma
                    </label>
                    <Expander>
                      {options.auto_subsample ? null :
                        <div class={style.optionOneCell}>
                          <Range
                            name="chroma_subsample"
                            min="1"
                            max="4"
                            value={options.chroma_subsample}
                            onInput={this.onChange}
                          >
                            Subsample chroma by:
                          </Range>
                        </div>
                      }
                    </Expander>
                    <label class={style.optionInputFirst}>
                      <Checkbox
                        name="separate_chroma_quality"
                        checked={options.separate_chroma_quality}
                        onChange={this.onChange}
                      />
                      Separate chroma quality
                    </label>
                    <Expander>
                      {options.separate_chroma_quality ?
                        <div class={style.optionOneCell}>
                          <Range
                            name="chroma_quality"
                            min="0"
                            max="100"
                            value={options.chroma_quality}
                            onInput={this.onChange}
                          >
                            Chroma quality:
                          </Range>
                        </div>
                        : null
                      }
                    </Expander>
                  </div>
                  : null
                }
              </Expander>
              <label class={style.optionInputFirst}>
                <Checkbox
                  name="baseline"
                  checked={options.baseline}
                  onChange={this.onChange}
                />
                Pointless spec compliance
              </label>
              <Expander>
                {options.baseline ? null :
                  <label class={style.optionInputFirst}>
                    <Checkbox
                      name="progressive"
                      checked={options.progressive}
                      onChange={this.onChange}
                    />
                    Progressive rendering
                  </label>
                }
              </Expander>
              <Expander>
                {options.baseline ?
                  <label class={style.optionInputFirst}>
                    <Checkbox
                      name="optimize_coding"
                      checked={options.optimize_coding}
                      onChange={this.onChange}
                    />
                    Optimize Huffman table
                  </label>
                  : null
                }
              </Expander>
              <div class={style.optionOneCell}>
                <Range
                  name="smoothing"
                  min="0"
                  max="100"
                  value={options.smoothing}
                  onInput={this.onChange}
                >
                  Smoothing:
                </Range>
              </div>
              <label class={style.optionTextFirst}>
                Quantization:
                <Select
                  name="quant_table"
                  value={options.quant_table}
                  onChange={this.onChange}
                >
                  <option value="0">JPEG Annex K</option>
                  <option value="1">Flat</option>
                  <option value="2">MSSIM-tuned Kodak</option>
                  <option value="3">ImageMagick</option>
                  <option value="4">PSNR-HVS-M-tuned Kodak</option>
                  <option value="5">Klein et al</option>
                  <option value="6">Watson et al</option>
                  <option value="7">Ahumada et al</option>
                  <option value="8">Peterson et al</option>
                </Select>
              </label>
              <label class={style.optionInputFirst}>
                <Checkbox
                  name="trellis_multipass"
                  checked={options.trellis_multipass}
                  onChange={this.onChange}
                />
                Trellis multipass
              </label>
              <Expander>
                {options.trellis_multipass ?
                  <label class={style.optionInputFirst}>
                    <Checkbox
                      name="trellis_opt_zero"
                      checked={options.trellis_opt_zero}
                      onChange={this.onChange}
                    />
                    Optimize zero block runs
                  </label>
                  : null
                }
              </Expander>
              <label class={style.optionInputFirst}>
                <Checkbox
                  name="trellis_opt_table"
                  checked={options.trellis_opt_table}
                  onChange={this.onChange}
                />
                Optimize after trellis quantization
              </label>
              <div class={style.optionOneCell}>
                <Range
                  name="trellis_loops"
                  min="1"
                  max="50"
                  value={options.trellis_loops}
                  onInput={this.onChange}
                >
                  Trellis quantization passes:
                </Range>
              </div>
            </div>
            : null
          }
        </Expander>
      </form>
    );
  }
 }
--- a/src/codecs/optipng/encoder-meta.ts
+++ b/src/codecs/optipng/encoder-meta.ts
@ -0,0 +1,13 @@
 export interface EncodeOptions {
  level: number;
 }
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
 export const type = 'png';
 export const label = 'OptiPNG';
 export const mimeType = 'image/png';
 export const extension = 'png';
 export const defaultOptions: EncodeOptions = {
  level: 2,
 };
--- a/src/codecs/optipng/encoder.ts
+++ b/src/codecs/optipng/encoder.ts
@ -0,0 +1,18 @@
 import optipng, { OptiPngModule } from '../../../codecs/optipng/optipng';
 import wasmUrl from '../../../codecs/optipng/optipng.wasm';
 import { EncodeOptions } from './encoder-meta';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<OptiPngModule>;
 export async function compress(data: BufferSource, options: EncodeOptions): Promise<ArrayBuffer> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(optipng, wasmUrl);
  const module = await emscriptenModule;
  const resultView = module.compress(data, options);
  const result = new Uint8Array(resultView);
  module.free_result();
  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
  return result.buffer as ArrayBuffer;
 }
--- a/src/codecs/optipng/options.tsx
+++ b/src/codecs/optipng/options.tsx
@ -0,0 +1,42 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber } from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import Range from '../../components/range';
 import * as style from '../../components/Options/style.scss';
 type Props = {
  options: EncodeOptions;
  onChange(newOptions: EncodeOptions): void;
 };
 export default class OptiPNGEncoderOptions extends Component<Props, {}> {
  @bind
  onChange(event: Event) {
    const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
    const options: EncodeOptions = {
      level: inputFieldValueAsNumber(form.level),
    };
    this.props.onChange(options);
  }
  render({ options }: Props) {
    return (
      <form class={style.optionsSection}>
        <div class={style.optionOneCell}>
          <Range
            name="level"
            min="0"
            max="7"
            step="1"
            value={options.level}
            onInput={this.onChange}
          >
            Effort:
          </Range>
        </div>
      </form>
    );
  }
 }
--- a/src/codecs/preprocessors.ts
+++ b/src/codecs/preprocessors.ts
@ -0,0 +1,23 @@
 import {
  QuantizeOptions, defaultOptions as quantizerDefaultOptions,
 } from './imagequant/processor-meta';
 import { ResizeOptions, defaultOptions as resizeDefaultOptions } from './resize/processor-meta';
 interface Enableable {
  enabled: boolean;
 }
 export interface PreprocessorState {
  quantizer: Enableable & QuantizeOptions;
  resize: Enableable & ResizeOptions;
 }
 export const defaultPreprocessorState: PreprocessorState = {
  quantizer: {
    enabled: false,
    ...quantizerDefaultOptions,
  },
  resize: {
    enabled: false,
    ...resizeDefaultOptions,
  },
 };
--- a/src/codecs/processor-worker.ts
+++ b/src/codecs/processor-worker.ts
@ -0,0 +1,41 @@
 import { expose } from 'comlink';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { QuantizeOptions } from './imagequant/processor-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
 import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
 async function mozjpegEncode(
  data: ImageData, options: MozJPEGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import('./mozjpeg/encoder');
  return encode(data, options);
 }
 async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
  const { process } = await import('./imagequant/processor');
  return process(data, opts);
 }
 async function optiPngEncode(
  data: BufferSource, options: OptiPNGEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { compress } = await import('./optipng/encoder');
  return compress(data, options);
 }
 async function webpEncode(
  data: ImageData, options: WebPEncoderOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import('./webp/encoder');
  return encode(data, options);
 }
 async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
  const { decode } = await import('./webp/decoder');
  return decode(data);
 }
 const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
 export type ProcessorWorkerApi = typeof exports;
 expose(exports, self);
--- a/src/codecs/processor.ts
+++ b/src/codecs/processor.ts
@ -0,0 +1,204 @@
 import { proxy } from 'comlink';
 import { QuantizeOptions } from './imagequant/processor-meta';
 import { ProcessorWorkerApi } from './processor-worker';
 import { canvasEncode, blobToArrayBuffer } from '../lib/util';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
 import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
 import { EncodeOptions as BrowserJPEGOptions } from './browser-jpeg/encoder-meta';
 import { EncodeOptions as BrowserWebpEncodeOptions } from './browser-webp/encoder-meta';
 import { BitmapResizeOptions, VectorResizeOptions } from './resize/processor-meta';
 import { resize, vectorResize } from './resize/processor';
 import * as browserBMP from './browser-bmp/encoder';
 import * as browserPNG from './browser-png/encoder';
 import * as browserJPEG from './browser-jpeg/encoder';
 import * as browserWebP from './browser-webp/encoder';
 import * as browserGIF from './browser-gif/encoder';
 import * as browserTIFF from './browser-tiff/encoder';
 import * as browserJP2 from './browser-jp2/encoder';
 import * as browserPDF from './browser-pdf/encoder';
 /** How long the worker should be idle before terminating. */
 const workerTimeout = 1000;
 interface ProcessingJobOptions {
  needsWorker?: boolean;
 }
 export default class Processor {
  /** Worker instance associated with this processor. */
  private _worker?: Worker;
  /** Comlinked worker API. */
  private _workerApi?: ProcessorWorkerApi;
  /** Rejector for a pending promise. */
  private _abortRejector?: (err: Error) => void;
  /** Is work currently happening? */
  private _busy = false;
  /** Incementing ID so we can tell if a job has been superseded. */
  private _latestJobId: number = 0;
  /** setTimeout ID for killing the worker when idle. */
  private _workerTimeoutId: number = 0;
  /**
   * Decorator that manages the (re)starting of the worker and aborting existing jobs. Not all
   * processing jobs require a worker (e.g. the main thread canvas encodes), use the needsWorker
   * option to control this.
   */
  private static _processingJob(options: ProcessingJobOptions = {}) {
    const { needsWorker = false } = options;
    return (target: Processor, propertyKey: string, descriptor: PropertyDescriptor): void => {
      const processingFunc = descriptor.value;
      descriptor.value = async function (this: Processor, ...args: any[]) {
        this._latestJobId += 1;
        const jobId = this._latestJobId;
        this.abortCurrent();
        if (needsWorker) self.clearTimeout(this._workerTimeoutId);
        if (!this._worker && needsWorker) {
          // worker-loader does magic here.
          // @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
          // definition can't be overwritten.
          this._worker = new Worker('./processor-worker.ts', { type: 'module' }) as Worker;
          // Need to do some TypeScript trickery to make the type match.
          this._workerApi = proxy(this._worker) as any as ProcessorWorkerApi;
        }
        this._busy = true;
        const returnVal = Promise.race([
          processingFunc.call(this, ...args),
          new Promise((_, reject) => { this._abortRejector = reject; }),
        ]);
        // Wait for the operation to settle.
        await returnVal.catch(() => {});
        // If no other jobs are happening, cleanup.
        if (jobId === this._latestJobId) this._jobCleanup();
        return returnVal;
      };
    };
  }
  private _jobCleanup(): void {
    this._busy = false;
    if (!this._worker) return;
    // If the worker is unused for 10 seconds, remove it to save memory.
    this._workerTimeoutId = self.setTimeout(
      () => {
        if (!this._worker) return;
        this._worker.terminate();
        this._worker = undefined;
      },
      workerTimeout,
    );
  }
  /** Abort the current job, if any */
  abortCurrent() {
    if (!this._busy) return;
    if (!this._abortRejector) throw Error("There must be a rejector if it's busy");
    this._abortRejector(new DOMException('Aborted', 'AbortError'));
    this._abortRejector = undefined;
    this._busy = false;
    if (!this._worker) return;
    this._worker.terminate();
    this._worker = undefined;
  }
  // Off main thread jobs:
  @Processor._processingJob({ needsWorker: true })
  imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
    return this._workerApi!.quantize(data, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  mozjpegEncode(
    data: ImageData, opts: MozJPEGEncoderOptions,
  ): Promise<ArrayBuffer> {
    return this._workerApi!.mozjpegEncode(data, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  async optiPngEncode(
    data: ImageData, opts: OptiPNGEncoderOptions,
  ): Promise<ArrayBuffer> {
    // OptiPNG expects PNG input.
    const pngBlob = await canvasEncode(data, 'image/png');
    const pngBuffer = await blobToArrayBuffer(pngBlob);
    return this._workerApi!.optiPngEncode(pngBuffer, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  webpEncode(data: ImageData, opts: WebPEncoderOptions): Promise<ArrayBuffer> {
    return this._workerApi!.webpEncode(data, opts);
  }
  @Processor._processingJob({ needsWorker: true })
  async webpDecode(blob: Blob): Promise<ImageData> {
    const data = await blobToArrayBuffer(blob);
    return this._workerApi!.webpDecode(data);
  }
  // Not-worker jobs:
  @Processor._processingJob()
  browserBmpEncode(data: ImageData): Promise<Blob> {
    return browserBMP.encode(data);
  }
  @Processor._processingJob()
  browserPngEncode(data: ImageData): Promise<Blob> {
    return browserPNG.encode(data);
  }
  @Processor._processingJob()
  browserJpegEncode(data: ImageData, opts: BrowserJPEGOptions): Promise<Blob> {
    return browserJPEG.encode(data, opts);
  }
  @Processor._processingJob()
  browserWebpEncode(data: ImageData, opts: BrowserWebpEncodeOptions): Promise<Blob> {
    return browserWebP.encode(data, opts);
  }
  @Processor._processingJob()
  browserGifEncode(data: ImageData): Promise<Blob> {
    return browserGIF.encode(data);
  }
  @Processor._processingJob()
  browserTiffEncode(data: ImageData): Promise<Blob> {
    return browserTIFF.encode(data);
  }
  @Processor._processingJob()
  browserJp2Encode(data: ImageData): Promise<Blob> {
    return browserJP2.encode(data);
  }
  @Processor._processingJob()
  browserPdfEncode(data: ImageData): Promise<Blob> {
    return browserPDF.encode(data);
  }
  // Synchronous jobs
  resize(data: ImageData, opts: BitmapResizeOptions) {
    this.abortCurrent();
    return resize(data, opts);
  }
  vectorResize(data: HTMLImageElement, opts: VectorResizeOptions) {
    this.abortCurrent();
    return vectorResize(data, opts);
  }
 }
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@ -0,0 +1,146 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, inputFieldValue } from '../../lib/util';
 import { ResizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
 interface Props {
  isVector: Boolean;
  options: ResizeOptions;
  aspect: number;
  onChange(newOptions: ResizeOptions): void;
 }
 interface State {
  maintainAspect: boolean;
 }
 export default class ResizerOptions extends Component<Props, State> {
  state: State = {
    maintainAspect: true,
  };
  form?: HTMLFormElement;
  private reportOptions() {
    const form = this.form!;
    const width = form.width as HTMLInputElement;
    const height = form.height as HTMLInputElement;
    const { options } = this.props;
    if (!width.checkValidity() || !height.checkValidity()) return;
    const newOptions: ResizeOptions = {
      width: inputFieldValueAsNumber(width),
      height: inputFieldValueAsNumber(height),
      method: form.resizeMethod.value,
      // Casting, as the formfield only returns the correct values.
      fitMethod: inputFieldValue(form.fitMethod, options.fitMethod) as ResizeOptions['fitMethod'],
    };
    this.props.onChange(newOptions);
  }
  @bind
  private onChange() {
    this.reportOptions();
  }
  componentDidUpdate(prevProps: Props, prevState: State) {
    if (!prevState.maintainAspect && this.state.maintainAspect) {
      this.form!.height.value = Math.round(Number(this.form!.width.value) / this.props.aspect);
      this.reportOptions();
    }
  }
  @bind
  private onWidthInput() {
    if (this.state.maintainAspect) {
      const width = inputFieldValueAsNumber(this.form!.width);
      this.form!.height.value = Math.round(width / this.props.aspect);
    }
    this.reportOptions();
  }
  @bind
  private onHeightInput() {
    if (this.state.maintainAspect) {
      const height = inputFieldValueAsNumber(this.form!.height);
      this.form!.width.value = Math.round(height * this.props.aspect);
    }
    this.reportOptions();
  }
  render({ options, isVector }: Props, { maintainAspect }: State) {
    return (
      <form ref={linkRef(this, 'form')} class={style.optionsSection}>
        <label class={style.optionTextFirst}>
          Method:
          <Select
            name="resizeMethod"
            value={options.method}
            onChange={this.onChange}
          >
            {isVector && <option value="vector">Vector</option>}
            <option value="browser-pixelated">Browser pixelated</option>
            <option value="browser-low">Browser low quality</option>
            <option value="browser-medium">Browser medium quality</option>
            <option value="browser-high">Browser high quality</option>
          </Select>
        </label>
        <label class={style.optionTextFirst}>
          Width:
          <input
            required
            class={style.textField}
            name="width"
            type="number"
            min="1"
            value={'' + options.width}
            onInput={this.onWidthInput}
          />
        </label>
        <label class={style.optionTextFirst}>
          Height:
          <input
            required
            class={style.textField}
            name="height"
            type="number"
            min="1"
            value={'' + options.height}
            onInput={this.onHeightInput}
          />
        </label>
        <label class={style.optionInputFirst}>
          <Checkbox
            name="maintainAspect"
            checked={maintainAspect}
            onChange={linkState(this, 'maintainAspect')}
          />
          Maintain aspect ratio
        </label>
        <Expander>
          {maintainAspect ? null :
            <label class={style.optionTextFirst}>
              Fit method:
              <Select
                name="fitMethod"
                value={options.fitMethod}
                onChange={this.onChange}
              >
                <option value="stretch">Stretch</option>
                <option value="cover">Cover</option>
              </Select>
            </label>
          }
        </Expander>
      </form>
    );
  }
 }
--- a/src/codecs/resize/processor-meta.ts
+++ b/src/codecs/resize/processor-meta.ts
@ -0,0 +1,26 @@
 type BitmapResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
 export interface ResizeOptions {
  width: number;
  height: number;
  method: 'vector' | BitmapResizeMethods;
  fitMethod: 'stretch' | 'cover';
 }
 export interface BitmapResizeOptions extends ResizeOptions {
  method: BitmapResizeMethods;
 }
 export interface VectorResizeOptions extends ResizeOptions {
  method: 'vector';
 }
 export const defaultOptions: ResizeOptions = {
  // Width and height will always default to the image size.
  // This is set elsewhere.
  width: 1,
  height: 1,
  // This will be set to 'vector' if the input is SVG.
  method: 'browser-high',
  fitMethod: 'stretch',
 };
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@ -0,0 +1,49 @@
 import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';
 function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
  const currentAspect = sw / sh;
  const endAspect = dw / dh;
  if (endAspect > currentAspect) {
    const newSh = sw / endAspect;
    const newSy = (sh - newSh) / 2;
    return { sw, sh: newSh, sx: 0, sy: newSy };
  }
  const newSw = sh * endAspect;
  const newSx = (sw - newSw) / 2;
  return { sh, sw: newSw, sx: newSx, sy: 0 };
 }
 export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
  let sx = 0;
  let sy = 0;
  let sw = data.width;
  let sh = data.height;
  if (opts.fitMethod === 'cover') {
    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }
  return nativeResize(
    data, sx, sy, sw, sh, opts.width, opts.height,
    opts.method.slice('browser-'.length) as NativeResizeMethod,
  );
 }
 export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions): ImageData {
  let sx = 0;
  let sy = 0;
  let sw = data.width;
  let sh = data.height;
  if (opts.fitMethod === 'cover') {
    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
  }
  return drawableToImageData(data, {
    sx, sy, sw, sh,
    width: opts.width, height: opts.height,
  });
 }
--- a/src/codecs/util.ts
+++ b/src/codecs/util.ts
@ -0,0 +1,27 @@
 type ModuleFactory<M extends EmscriptenWasm.Module> = (
  opts: EmscriptenWasm.ModuleOpts,
 ) => M;
 export function initWasmModule<T extends EmscriptenWasm.Module>(
  moduleFactory: ModuleFactory<T>,
  wasmUrl: string,
 ): Promise<T> {
  return new Promise((resolve) => {
    const module = moduleFactory({
      // Just to be safe, don't automatically invoke any wasm functions
      noInitialRun: true,
      locateFile(url: string): string {
        // Redirect the request for the wasm binary to whatever webpack gave us.
        if (url.endsWith('.wasm')) return wasmUrl;
        return url;
      },
      onRuntimeInitialized() {
        // An Emscripten is a then-able that resolves with itself, causing an infite loop when you
        // wrap it in a real promise. Delete the `then` prop solves this for now.
        // https://github.com/kripken/emscripten/issues/5820
        delete (module as any).then;
        resolve(module);
      },
    });
  });
 }
--- a/src/codecs/webp/decoder-meta.ts
+++ b/src/codecs/webp/decoder-meta.ts
@ -0,0 +1,7 @@
 export const name = 'WASM WebP Decoder';
 const supportedMimeTypes = ['image/webp'];
 export function canHandleMimeType(mimeType: string): boolean {
  return supportedMimeTypes.includes(mimeType);
 }
--- a/src/codecs/webp/decoder.ts
+++ b/src/codecs/webp/decoder.ts
@ -0,0 +1,20 @@
 import webp_dec, { WebPModule } from '../../../codecs/webp_dec/webp_dec';
 import wasmUrl from '../../../codecs/webp_dec/webp_dec.wasm';
 import { initWasmModule } from '../util';
 let emscriptenModule: Promise<WebPModule>;
 export async function decode(data: ArrayBuffer): Promise<ImageData> {
  if (!emscriptenModule) emscriptenModule = initWasmModule(webp_dec, wasmUrl);
  const module = await emscriptenModule;
  const rawImage = module.decode(data);
  const result = new ImageData(
    new Uint8ClampedArray(rawImage.buffer),
    rawImage.width,
    rawImage.height,
  );
  module.free_result();
  return result;
 }
--- a/Show More
+++ b/Show More
		`@ -0,0 +1,3 @@`
							`import qualityOption from '../generic/quality-option';`

							`export default qualityOption({ min: 0, max: 1, step: 0.01 });`