test/bench/index.html

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wasm-vips benchmarks</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.6/platform.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js" crossorigin="anonymous"></script>
<script src="lib/web/vips.js"></script>
<script type="module">
  // Global variables used throughout the benchmarks
  const assert = chai.assert;

  // Target width and height
  const width = 720;
  const height = 588;

  const JPEG_FILE = 'images/2569067123_aca715a2ee_o.jpg';
  const PNG_FILE = 'images/alpha-premultiply-2048x1536-paper.png';
  const WEBP_FILE = 'images/4.webp';

  const BENCH_FILES = [JPEG_FILE, PNG_FILE, WEBP_FILE];

  const vips = await Vips({
    preRun: (module) => {
      module.FS.mkdir('images');
      for (const file of BENCH_FILES)
        module.FS.createPreloadedFile('images', file.split('/').pop(), 'test/bench/' + file, true, false);
    }
  });

  // Disable libvips cache to ensure tests are as fair as they can be
  vips.Cache.max(0);

  const inputJpgBuffer = vips.FS.readFile(JPEG_FILE);
  const defaultJpegSaveOptions = {
    strip: true,
    Q: 80
  }
  const inputPngBuffer = vips.FS.readFile(PNG_FILE);
  const defaultPngSaveOptions = {
    strip: true,
    compression: 6,
    filter: vips.ForeignPngFilter.none
  }
  const inputWebPBuffer = vips.FS.readFile(WEBP_FILE);
  const defaultWebPSaveOptions = {
    strip: true,
    Q: 80
  }

  const runSuites = suites => {
    if (suites.length === 0) {
      return;
    }

    const suite = suites[0];
    const remainingSuites = suites.slice(1);

    suite.on('complete', function () {
      // Recurse to run remaining suites.
      runSuites(remainingSuites);
    }).run();
  };

  // JPEG
  const jpegSuite = new Benchmark.Suite('jpeg').add('wasm-vips-buffer-file', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      im.jpegsave('images/output.jpg', defaultJpegSaveOptions);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-buffer-buffer', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      const buffer = im.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-file-file', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnail(JPEG_FILE, width, {
        height: height
      });
      im.jpegsave('images/output.jpg', defaultJpegSaveOptions);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-stream-stream', {
    defer: true,
    fn: function (deferred) {
      const source = vips.Source.newFromFile(JPEG_FILE);
      const target = vips.Target.newToFile('images/output.jpg');
      const im = vips.Image.thumbnailSource(source, width, {
        height: height
      })
      im.jpegsaveTarget(target, defaultJpegSaveOptions);
      im.delete();
      target.delete();
      source.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-file-buffer', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnail(JPEG_FILE, width, {
        height: height
      });
      const buffer = im.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).on('cycle', function (event) {
    console.log('jpeg ' + String(event.target));
  });

  // Effect of applying operations
  const operationsSuite = new Benchmark.Suite('operations').add('wasm-vips-sharpen-mild', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      // Fast, mild sharpen
      const sharpen = vips.Image.newFromArray([
        -1.0, -1.0, -1.0,
        -1.0, 32.0, -1.0,
        -1.0, -1.0, -1.0
      ], 24);
      const conv = im.conv(sharpen);
      const buffer = conv.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      conv.delete();
      sharpen.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-sharpen-radius', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      // Slow, accurate sharpen in LAB colour space, with control over flat vs jagged areas
      const sharpen = im.sharpen({sigma: 3, m1: 1, m2: 3});
      const buffer = sharpen.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      sharpen.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-blur-mild', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      // Fast, mild blur - averages neighbouring pixel
      const blur = vips.Image.newFromArray([
        1.0, 1.0, 1.0,
        1.0, 1.0, 1.0,
        1.0, 1.0, 1.0
      ], 9);
      const conv = im.conv(blur);
      const buffer = conv.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      conv.delete();
      blur.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-blur-radius', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      // Slower, accurate Gaussian blur
      const blur = im.gaussblur(3);
      const buffer = blur.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      blur.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-gamma', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      const gamma = im.gamma({exponent: 2.2});
      const buffer = gamma.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      gamma.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-greyscale', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      const greyscale = im.colourspace(vips.Interpretation.b_w);
      const buffer = greyscale.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      greyscale.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-greyscale-gamma', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      const gamma = im.gamma({exponent: 2.2});
      const greyscale = gamma.colourspace(vips.Interpretation.b_w);
      const buffer = greyscale.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      greyscale.delete();
      gamma.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-progressive', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      const buffer = im.jpegsaveBuffer({...defaultJpegSaveOptions, interlace: true});
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-without-chroma-subsampling', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      const buffer = im.jpegsaveBuffer({
        ...defaultJpegSaveOptions,
        subsample_mode: vips.ForeignSubsample.off
      });
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-rotate', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height
      });
      // Need to copy to memory, we have to stay seq
      const mem = im.copyMemory();
      const rot90 = mem.rot90();
      const buffer = rot90.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      rot90.delete();
      mem.delete();
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-crop-entropy', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height,
        crop: vips.Interesting.entropy
      });
      const buffer = im.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-crop-attention', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputJpgBuffer, width, {
        height: height,
        crop: vips.Interesting.attention
      });
      const buffer = im.jpegsaveBuffer(defaultJpegSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).on('cycle', function (event) {
    console.log('operations ' + String(event.target));
  })

  // PNG
  const pngSuite = new Benchmark.Suite('png').add('wasm-vips-buffer-file', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputPngBuffer, width, {
        height: height
      });
      im.pngsave('images/output.png', defaultPngSaveOptions);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-buffer-buffer', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputPngBuffer, width, {
        height: height
      });
      const buffer = im.pngsaveBuffer(defaultPngSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-file-file', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnail(PNG_FILE, width, {
        height: height
      });
      im.pngsave('images/output.png', defaultPngSaveOptions);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-file-buffer', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnail(PNG_FILE, width, {
        height: height
      });
      const buffer = im.pngsaveBuffer(defaultPngSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-progressive', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputPngBuffer, width, {
        height: height
      });
      const buffer = im.pngsaveBuffer({...defaultPngSaveOptions, interlace: true});
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-adaptive-filtering', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputPngBuffer, width, {
        height: height
      });
      const buffer = im.pngsaveBuffer({...defaultPngSaveOptions, filter: vips.ForeignPngFilter.all});
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-zlib-compression-9', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputPngBuffer, width, {
        height: height
      });
      const buffer = im.pngsaveBuffer({...defaultPngSaveOptions, compression: 9});
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).on('cycle', function (event) {
    console.log('png ' + String(event.target));
  })

  // WebP
  const webpSuite = new Benchmark.Suite('webp').add('wasm-vips-file', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputWebPBuffer, width, {
        height: height
      });
      im.webpsave('images/output.webp', defaultWebPSaveOptions);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-buffer-buffer', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnailBuffer(inputWebPBuffer, width, {
        height: height
      });
      const buffer = im.webpsaveBuffer(defaultWebPSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-file-file', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnail(WEBP_FILE, width, {
        height: height
      });
      im.webpsave('images/output.webp', defaultWebPSaveOptions);
      im.delete();
      deferred.resolve();
    }
  }).add('wasm-vips-file-buffer', {
    defer: true,
    fn: function (deferred) {
      const im = vips.Image.thumbnail(WEBP_FILE, width, {
        height: height
      });
      const buffer = im.webpsaveBuffer(defaultWebPSaveOptions);
      assert.notStrictEqual(null, buffer);
      im.delete();
      deferred.resolve();
    }
  }).on('cycle', function (event) {
    console.log('webp ' + String(event.target));
  });

  runSuites([jpegSuite, operationsSuite, pngSuite, webpSuite]);
</script>
</body>
</html>