Lossless image optimizer for PNGs and JPEGs (#6762)

Author: devongovett

Cargo.lock

@@ -5,4 +5,5 @@ members = [
   "packages/transformers/js/wasm",
   "packages/utils/fs-search",
   "packages/utils/hash",
+  "packages/optimizers/image"
 ]

Cargo.toml

@@ -54,7 +54,8 @@
     "*.css": ["@parcel/optimizer-cssnano"],
     "*.html": ["@parcel/optimizer-htmlnano"],
     "*.{js,mjs,cjs}": ["@parcel/optimizer-terser"],
-    "*.svg": ["@parcel/optimizer-svgo"]
+    "*.svg": ["@parcel/optimizer-svgo"],
+    "*.{jpg,jpeg,png}": ["@parcel/optimizer-image"]
   },
   "packagers": {
     "*.html": "@parcel/packager-html",

packages/configs/default/index.json

@@ -22,6 +22,7 @@
     "@parcel/namer-default": "2.0.0-rc.0",
     "@parcel/optimizer-cssnano": "2.0.0-rc.0",
     "@parcel/optimizer-htmlnano": "2.0.0-rc.0",
+    "@parcel/optimizer-image": "2.0.0-rc.0",
     "@parcel/optimizer-svgo": "2.0.0-rc.0",
     "@parcel/optimizer-terser": "2.0.0-rc.0",
     "@parcel/packager-css": "2.0.0-rc.0",

packages/configs/default/package.json

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import {bundle, distDir, outputFS} from '@parcel/test-utils';
+import {bundle, distDir, inputFS, outputFS} from '@parcel/test-utils';
 import path from 'path';
 import sharp from 'sharp';
 
@@ -88,4 +88,50 @@ describe('image', function() {
       );
     });
   });
+
+  it('should optimise JPEGs', async function() {
+    let img = path.join(__dirname, '/integration/image/image.jpg');
+    let b = await bundle(img, {
+      defaultTargetOptions: {
+        shouldOptimize: true,
+      },
+    });
+
+    const imagePath = b.getBundles().find(b => b.type === 'jpg').filePath;
+
+    let input = await inputFS.readFile(img);
+    let inputRaw = await sharp(input)
+      .toFormat('raw')
+      .toBuffer();
+    let output = await outputFS.readFile(imagePath);
+    let outputRaw = await sharp(output)
+      .toFormat('raw')
+      .toBuffer();
+
+    assert(outputRaw.equals(inputRaw));
+    assert(output.length < input.length);
+  });
+
+  it('should optimise PNGs', async function() {
+    let img = path.join(__dirname, '/integration/image/clock.png');
+    let b = await bundle(img, {
+      defaultTargetOptions: {
+        shouldOptimize: true,
+      },
+    });
+
+    const imagePath = b.getBundles().find(b => b.type === 'png').filePath;
+
+    let input = await inputFS.readFile(img);
+    let inputRaw = await sharp(input)
+      .toFormat('raw')
+      .toBuffer();
+    let output = await outputFS.readFile(imagePath);
+    let outputRaw = await sharp(output)
+      .toFormat('raw')
+      .toBuffer();
+
+    assert(outputRaw.equals(inputRaw));
+    assert(output.length < input.length);
+  });
 });

packages/core/integration-tests/test/image.js

@@ -0,0 +1 @@
+*.node

packages/core/integration-tests/test/integration/image/clock.png

@@ -0,0 +1,17 @@
+[package]
+authors = ["Devon Govett <[email protected]>"]
+name = "parcel-image"
+version = "0.1.0"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+napi = "1"
+napi-derive = "1"
+oxipng = "5.0.0"
+mozjpeg-sys = "1.0.0"
+libc = "0.2"
+
+[build-dependencies]
+napi-build = "1"

packages/core/integration-tests/test/integration/scope-hoisting/es6/raw-url/foo.png

@@ -0,0 +1,5 @@
+extern crate napi_build;
+
+fn main() {
+  napi_build::setup();
+}