1.6.0

* Add sRGB -> RGB conversion before resize

* Add clamping for color space conversions

* Clip for demultiplication as well

* Fixing linear <-> srgb conversion

* Update benchmark

* Decouple srgb calculations

* Generate lookup tables

* Update src/codecs/resize/options.tsx

* Defaulting on, renaming, removing redundant state

codecs/resize/.gitignore

@@ -3,3 +3,4 @@ target
 Cargo.lock
 bin/
 pkg/README.md
+lut.inc

codecs/resize/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "resize"
+name = "squooshresize"
 version = "0.1.0"
 authors = ["Surma <surma@surma.link>"]
 

codecs/resize/benchmark.js

@@ -0,0 +1,53 @@
+// THIS IS NOT A NODE SCRIPT
+// This is a d8 script. Please install jsvu[1] and install v8.
+// Then run `npm run --silent benchmark`.
+// [1]: https://github.com/GoogleChromeLabs/jsvu
+
+self = global = this;
+load("./pkg/resize.js");
+
+async function init() {
+  //  Adjustable constants.
+  const inputDimensions = 2000;
+  const outputDimensions = 1500;
+  const algorithm = 3; // Lanczos
+  const iterations = new Array(100);
+
+  // Constants. Don’t change.
+  const imageByteSize = inputDimensions * inputDimensions * 4;
+  const imageBuffer = new Uint8ClampedArray(imageByteSize);
+
+  const module = await WebAssembly.compile(readbuffer("./pkg/resize_bg.wasm"));
+  await wasm_bindgen(module);
+  [[false, false], [true, false], [false, true], [true, true]].forEach(
+    opts => {
+      print(`\npremultiplication: ${opts[0]}`);
+      print(`color space conversion: ${opts[1]}`);
+      print(`==============================`);
+      for (let i = 0; i < 100; i++) {
+        const start = Date.now();
+        wasm_bindgen.resize(
+          imageBuffer,
+          inputDimensions,
+          inputDimensions,
+          outputDimensions,
+          outputDimensions,
+          algorithm,
+          ...opts
+        );
+        iterations[i] = Date.now() - start;
+      }
+      const average =
+        iterations.reduce((sum, c) => sum + c) / iterations.length;
+      const stddev = Math.sqrt(
+        iterations
+          .map(i => Math.pow(i - average, 2))
+          .reduce((sum, c) => sum + c) / iterations.length
+      );
+      print(`n = ${iterations.length}`);
+      print(`Average: ${average}`);
+      print(`StdDev: ${stddev}`);
+    }
+  );
+}
+init().catch(e => console.error(e, e.stack));

codecs/resize/build.rs

@@ -0,0 +1,23 @@
+include!("./src/srgb.rs");
+
+use std::io::Write;
+
+fn main() -> std::io::Result<()> {
+    let mut srgb_to_linear_lut = String::from("static SRGB_TO_LINEAR_LUT: [f32; 256] = [");
+    let mut linear_to_srgb_lut = String::from("static LINEAR_TO_SRGB_LUT: [f32; 256] = [");
+    for i in 0..256 {
+        srgb_to_linear_lut.push_str(&format!("{0:.7}", srgb_to_linear((i as f32) / 255.0)));
+        srgb_to_linear_lut.push_str(",");
+        linear_to_srgb_lut.push_str(&format!("{0:.7}", linear_to_srgb((i as f32) / 255.0)));
+        linear_to_srgb_lut.push_str(",");
+    }
+    srgb_to_linear_lut.pop().unwrap();
+    linear_to_srgb_lut.pop().unwrap();
+    srgb_to_linear_lut.push_str("];");
+    linear_to_srgb_lut.push_str("];");
+
+    let mut file = std::fs::File::create("src/lut.inc")?;
+    file.write_all(srgb_to_linear_lut.as_bytes())?;
+    file.write_all(linear_to_srgb_lut.as_bytes())?;
+    Ok(())
+}

codecs/resize/package.json

@@ -2,6 +2,7 @@
   "name": "resize",
   "scripts": {
     "build:image": "docker build -t squoosh-resize .",
-    "build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh"
+    "build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh",
+    "benchmark": "v8 --no-liftoff --no-wasm-tier-up ./benchmark.js"
   }
 }

codecs/resize/pkg/resize.d.ts

@@ -6,6 +6,8 @@
 * @param {number} arg3 
 * @param {number} arg4 
 * @param {number} arg5 
+* @param {boolean} arg6 
+* @param {boolean} arg7 
 * @returns {Uint8Array} 
 */
-export function resize(arg0: Uint8Array, arg1: number, arg2: number, arg3: number, arg4: number, arg5: number): Uint8Array;
+export function resize(arg0: Uint8Array, arg1: number, arg2: number, arg3: number, arg4: number, arg5: number, arg6: boolean, arg7: boolean): Uint8Array;

codecs/resize/pkg/resize.js

@@ -46,13 +46,15 @@
     * @param {number} arg3
     * @param {number} arg4
     * @param {number} arg5
+    * @param {boolean} arg6
+    * @param {boolean} arg7
     * @returns {Uint8Array}
     */
-    __exports.resize = function(arg0, arg1, arg2, arg3, arg4, arg5) {
+    __exports.resize = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
         const ptr0 = passArray8ToWasm(arg0);
         const len0 = WASM_VECTOR_LEN;
         const retptr = globalArgumentPtr();
-        wasm.resize(retptr, ptr0, len0, arg1, arg2, arg3, arg4, arg5);
+        wasm.resize(retptr, ptr0, len0, arg1, arg2, arg3, arg4, arg5, arg6, arg7);
         const mem = getUint32Memory();
         const rustptr = mem[retptr / 4];
         const rustlen = mem[retptr / 4 + 1];

codecs/resize/pkg/resize_bg.d.ts

@@ -3,4 +3,4 @@ export const memory: WebAssembly.Memory;
 export function __wbindgen_global_argument_ptr(): number;
 export function __wbindgen_malloc(a: number): number;
 export function __wbindgen_free(a: number, b: number): void;
-export function resize(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number): void;
+export function resize(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number): void;

codecs/resize/src/lib.rs

@@ -9,6 +9,9 @@ use resize::Pixel::RGBA;
 use resize::Type;
 use wasm_bindgen::prelude::*;
 
+mod srgb;
+use srgb::Clamp;
+
 cfg_if! {
     // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
     // allocator.
@@ -19,15 +22,50 @@ cfg_if! {
     }
 }
 
+include!("./lut.inc");
+
+// If `with_space_conversion` is true, this function returns 2 functions that
+// convert from sRGB to linear RGB and vice versa. If `with_space_conversion` is
+// false, the 2 functions returned do nothing.
+fn converter_funcs(with_space_conversion: bool) -> ((fn(u8) -> f32), (fn(f32) -> u8)) {
+    if with_space_conversion {
+        (
+            |v| SRGB_TO_LINEAR_LUT[v as usize] * 255.0,
+            |v| (LINEAR_TO_SRGB_LUT[v as usize] * 255.0) as u8,
+        )
+    } else {
+        (|v| v as f32, |v| v as u8)
+    }
+}
+
+// If `with_alpha_premultiplication` is true, this function returns a function
+// that premultiply the alpha channel with the given channel value and another
+// function that reverses that process. If `with_alpha_premultiplication` is
+// false, the functions just return the channel value.
+fn alpha_multiplier_funcs(
+    with_alpha_premultiplication: bool,
+) -> ((fn(f32, u8) -> u8), (fn(u8, u8) -> f32)) {
+    if with_alpha_premultiplication {
+        (
+            |v, a| (v * (a as f32) / 255.0) as u8,
+            |v, a| (v as f32) * 255.0 / (a as f32).clamp(0.0, 255.0),
+        )
+    } else {
+        (|v, _a| v as u8, |v, _a| v as f32)
+    }
+}
+
 #[wasm_bindgen]
 #[no_mangle]
 pub fn resize(
-    input_image: Vec<u8>,
+    mut input_image: Vec<u8>,
     input_width: usize,
     input_height: usize,
     output_width: usize,
     output_height: usize,
     typ_idx: usize,
+    premultiply: bool,
+    color_space_conversion: bool,
 ) -> Vec<u8> {
     let typ = match typ_idx {
         0 => Type::Triangle,
@@ -36,7 +74,23 @@ pub fn resize(
         3 => Type::Lanczos3,
         _ => panic!("Nope"),
     };
+    let num_input_pixels = input_width * input_height;
     let num_output_pixels = output_width * output_height;
+
+    let (to_linear, to_color_space) = converter_funcs(color_space_conversion);
+    let (premultiplier, demultiplier) = alpha_multiplier_funcs(premultiply);
+
+    // If both options are false, there is no preprocessing on the pixel valus
+    // and we can skip the loop.
+    if premultiply || color_space_conversion {
+        for i in 0..num_input_pixels {
+            for j in 0..3 {
+                input_image[4 * i + j] =
+                    premultiplier(to_linear(input_image[4 * i + j]), input_image[4 * i + 3]);
+            }
+        }
+    }
+
     let mut resizer = resize::new(
         input_width,
         input_height,
@@ -48,5 +102,20 @@ pub fn resize(
     let mut output_image = Vec::<u8>::with_capacity(num_output_pixels * 4);
     output_image.resize(num_output_pixels * 4, 0);
     resizer.resize(input_image.as_slice(), output_image.as_mut_slice());
+
+    if premultiply || color_space_conversion {
+        for i in 0..num_output_pixels {
+            for j in 0..3 {
+                // We don’t need to worry about division by zero, as division by zero
+                // is well-defined on floats to return ±Inf. ±Inf is converted to 0
+                // when casting to integers.
+                output_image[4 * i + j] = to_color_space(demultiplier(
+                    output_image[4 * i + j],
+                    output_image[4 * i + 3],
+                ));
+            }
+        }
+    }
+
     return output_image;
 }

codecs/resize/src/srgb.rs

@@ -0,0 +1,29 @@
+pub trait Clamp: std::cmp::PartialOrd + Sized {
+    fn clamp(self, min: Self, max: Self) -> Self {
+        if self.lt(&min) {
+            min
+        } else if self.gt(&max) {
+            max
+        } else {
+            self
+        }
+    }
+}
+
+impl Clamp for f32 {}
+
+pub fn srgb_to_linear(v: f32) -> f32 {
+    if v < 0.04045 {
+        v / 12.92
+    } else {
+        ((v + 0.055) / 1.055).powf(2.4).clamp(0.0, 1.0)
+    }
+}
+
+pub fn linear_to_srgb(v: f32) -> f32 {
+    if v < 0.0031308 {
+        v * 12.92
+    } else {
+        (1.055 * v.powf(1.0 / 2.4) - 0.055).clamp(0.0, 1.0)
+    }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "squoosh",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -124,9 +124,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "10.12.29",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.29.tgz",
-      "integrity": "sha512-J/tnbnj8HcsBgCe2apZbdUpQ7hs4d7oZNTYA5bekWdP0sr2NGsOpI/HRdDroEi209tEvTcTtxhD0FfED3DhEcw==",
+      "version": "10.12.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.30.tgz",
+      "integrity": "sha512-nsqTN6zUcm9xtdJiM9OvOJ5EF0kOI8f1Zuug27O/rgtxCRJHGqncSWfCMZUP852dCKPsDsYXGvBhxfRjDBkF5Q==",
       "dev": true
     },
     "@types/pretty-bytes": {
@@ -3232,13 +3232,14 @@
       "dev": true
     },
     "copy-webpack-plugin": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.0.0.tgz",
-      "integrity": "sha512-iiDj+8nnZeW/i8vYJ3+ABSZkOefJnDYIGLojiZKKFDvf1wcEInABXH1+hN7axQMn04qvJxKjgVOee0e14XPtCg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.0.1.tgz",
+      "integrity": "sha512-yMTURAkYZO/6h6pGMbHQl2jpKtRNC+0Cy/4kRRP6qUHmpbGGAzNnyMecE6aHgGFCb4ksrL3YcDqYGb8ds3J9cw==",
       "dev": true,
       "requires": {
         "cacache": "^11.3.1",
         "find-cache-dir": "^2.0.0",
+        "glob-parent": "^3.1.0",
         "globby": "^7.1.1",
         "is-glob": "^4.0.0",
         "loader-utils": "^1.1.0",
@@ -3256,9 +3257,9 @@
           "dev": true
         },
         "p-limit": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
-          "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+          "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -15178,9 +15179,9 @@
       }
     },
     "typed-css-modules": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/typed-css-modules/-/typed-css-modules-0.4.1.tgz",
-      "integrity": "sha512-aOMv55N5s2oRYnlitEDQXdBjSqULg/X68UeYs2AwSZyUk7TgrOZlnZ38/ZEpA1GF5wcHAovk4YR7Db+mYtoL2A==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/typed-css-modules/-/typed-css-modules-0.4.2.tgz",
+      "integrity": "sha512-8L6efZplgnraEw1RWz1Nc6swfLm6PAawivvdwFhzkFa3CJu+cPbK9712i4CAAf+JA0/Ufe19iDTPIk1WSpoz/w==",
       "dev": true,
       "requires": {
         "camelcase": "^4.1.0",

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
@@ -16,7 +16,7 @@
     }
   },
   "devDependencies": {
-    "@types/node": "10.12.29",
+    "@types/node": "10.12.30",
     "@types/pretty-bytes": "5.1.0",
     "@types/webassembly-js-api": "0.0.2",
     "@webcomponents/custom-elements": "1.2.1",
@@ -27,7 +27,7 @@
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.1",
     "comlink": "3.1.1",
-    "copy-webpack-plugin": "5.0.0",
+    "copy-webpack-plugin": "5.0.1",
     "critters-webpack-plugin": "2.3.0",
     "css-loader": "1.0.1",
     "ejs": "2.6.1",
@@ -63,7 +63,7 @@
     "tslint-config-airbnb": "5.11.1",
     "tslint-config-semistandard": "7.0.0",
     "tslint-react": "3.6.0",
-    "typed-css-modules": "0.4.1",
+    "typed-css-modules": "0.4.2",
     "typescript": "3.3.3333",
     "url-loader": "1.1.2",
     "webpack": "4.28.0",

src/codecs/resize/options.tsx

@@ -1,8 +1,10 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, inputFieldValue, preventDefault } from '../../lib/util';
-import { ResizeOptions } from './processor-meta';
+import {
+  inputFieldValueAsNumber, inputFieldValue, preventDefault, inputFieldChecked,
+} from '../../lib/util';
+import { ResizeOptions, isWorkerOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
@@ -38,6 +40,8 @@ export default class ResizerOptions extends Component<Props, State> {
       width: inputFieldValueAsNumber(width),
       height: inputFieldValueAsNumber(height),
       method: form.resizeMethod.value,
+      premultiply: inputFieldChecked(form.premultiply, true),
+      linearRGB: inputFieldChecked(form.linearRGB, true),
       // Casting, as the formfield only returns the correct values.
       fitMethod: inputFieldValue(form.fitMethod, options.fitMethod) as ResizeOptions['fitMethod'],
     };
@@ -90,7 +94,7 @@ export default class ResizerOptions extends Component<Props, State> {
             <option value="lanczos3">Lanczos3</option>
             <option value="mitchell">Mitchell</option>
             <option value="catrom">Catmull-Rom</option>
-            <option value="triangle">Triangle</option>
+            <option value="triangle">Triangle (bilinear)</option>
             <option value="browser-pixelated">Browser pixelated</option>
             <option value="browser-low">Browser low quality</option>
             <option value="browser-medium">Browser medium quality</option>
@@ -121,6 +125,30 @@ export default class ResizerOptions extends Component<Props, State> {
             onInput={this.onHeightInput}
           />
         </label>
+        <Expander>
+          {isWorkerOptions(options) ?
+            <label class={style.optionInputFirst}>
+              <Checkbox
+                name="premultiply"
+                checked={options.premultiply}
+                onChange={this.onChange}
+              />
+              Premultiply alpha channel
+            </label>
+            : null
+          }
+          {isWorkerOptions(options) ?
+            <label class={style.optionInputFirst}>
+              <Checkbox
+                name="linearRGB"
+                checked={options.linearRGB}
+                onChange={this.onChange}
+              />
+              Linear RGB
+            </label>
+            : null
+          }
+        </Expander>
         <label class={style.optionInputFirst}>
           <Checkbox
             name="maintainAspect"

src/codecs/resize/processor-meta.ts

@@ -1,25 +1,38 @@
 type BrowserResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
-type WorkerResizeMethods = 'point' | 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
+type WorkerResizeMethods = 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
+const workerResizeMethods: WorkerResizeMethods[] = ['triangle', 'catrom', 'mitchell', 'lanczos3'];
 
-export interface ResizeOptions {
+export type ResizeOptions = BrowserResizeOptions | WorkerResizeOptions | VectorResizeOptions;
+
+export interface ResizeOptionsCommon {
   width: number;
   height: number;
-  method: 'vector' | BrowserResizeMethods | WorkerResizeMethods;
   fitMethod: 'stretch' | 'contain';
 }
 
-export interface BrowserResizeOptions extends ResizeOptions {
+export interface BrowserResizeOptions extends ResizeOptionsCommon {
   method: BrowserResizeMethods;
 }
 
-export interface WorkerResizeOptions extends ResizeOptions {
+export interface WorkerResizeOptions extends ResizeOptionsCommon {
   method: WorkerResizeMethods;
+  premultiply: boolean;
+  linearRGB: boolean;
 }
 
-export interface VectorResizeOptions extends ResizeOptions {
+export interface VectorResizeOptions extends ResizeOptionsCommon {
   method: 'vector';
 }
 
+/**
+ * Return whether a set of options are worker resize options.
+ *
+ * @param opts
+ */
+export function isWorkerOptions(opts: ResizeOptions): opts is WorkerResizeOptions {
+  return (workerResizeMethods as string[]).includes(opts.method);
+}
+
 export const defaultOptions: ResizeOptions = {
   // Width and height will always default to the image size.
   // This is set elsewhere.
@@ -28,4 +41,6 @@ export const defaultOptions: ResizeOptions = {
   // This will be set to 'vector' if the input is SVG.
   method: 'lanczos3',
   fitMethod: 'stretch',
+  premultiply: true,
+  linearRGB: true,
 };

src/codecs/resize/processor.ts

@@ -45,7 +45,7 @@ export async function resize(data: ImageData, opts: WorkerResizeOptions): Promis
 
   const result = wasm_bindgen.resize(
     new Uint8Array(input.data.buffer), input.width, input.height, opts.width, opts.height,
-    resizeMethods.indexOf(opts.method),
+    resizeMethods.indexOf(opts.method), opts.premultiply, opts.linearRGB,
   );
 
   return new ImageData(new Uint8ClampedArray(result.buffer), opts.width, opts.height);

src/components/compress/index.tsx

@@ -18,23 +18,13 @@ import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
 import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
 import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
 import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
-import {
-    EncoderState,
-    EncoderType,
-    EncoderOptions,
-    encoderMap,
-} from '../../codecs/encoders';
-import {
-  PreprocessorState,
-  defaultPreprocessorState,
-} from '../../codecs/preprocessors';
+import { EncoderState, EncoderType, EncoderOptions, encoderMap } from '../../codecs/encoders';
+import { PreprocessorState, defaultPreprocessorState } from '../../codecs/preprocessors';
 import { decodeImage } from '../../codecs/decoders';
 import { cleanMerge, cleanSet } from '../../lib/clean-modify';
 import Processor from '../../codecs/processor';
 import {
-    VectorResizeOptions,
-    BrowserResizeOptions,
-    WorkerResizeOptions,
+  BrowserResizeOptions, isWorkerOptions as isWorkerResizeOptions,
 } from '../../codecs/resize/processor-meta';
 import './custom-els/MultiPanel';
 import Results from '../results';
@@ -114,12 +104,12 @@ async function preprocessImage(
     if (preprocessData.resize.method === 'vector' && source.vectorImage) {
       result = processor.vectorResize(
         source.vectorImage,
-        preprocessData.resize as VectorResizeOptions,
+        preprocessData.resize,
       );
-    } else if (preprocessData.resize.method.startsWith('browser-')) {
-      result = processor.resize(result, preprocessData.resize as BrowserResizeOptions);
+    } else if (isWorkerResizeOptions(preprocessData.resize)) {
+      result = await processor.workerResize(result, preprocessData.resize);
     } else {
-      result = await processor.workerResize(result, preprocessData.resize as WorkerResizeOptions);
+      result = processor.resize(result, preprocessData.resize as BrowserResizeOptions);
     }
   }
   if (preprocessData.quantizer.enabled) {