Added mozjpeg defaults for jpeg compression (#484)

refs TryGhost/Product#4140
- added `mozjpeg: true` for all jpeg formats to reduce file sizes
- added some basic integration tests as the existing unit tests don't actually verify any file creation/compression

Author: 9larsons

packages/image-transform/lib/transform.js

@@ -107,8 +107,16 @@ const unsafeResizeFromBuffer = async (originalBuffer, options = {}) => {
         // CASE: Automatically remove metadata and rotate based on the orientation.
         .rotate();
 
+    const metadata = await s.metadata();
+
     if (options.format) {
-        s = s.toFormat(options.format);
+        if (options.format === 'jpeg') {
+            s.jpeg({mozjpeg: true}); // .jpeg sets format
+        } else {
+            s = s.toFormat(options.format);
+        }
+    } else if (metadata.format === 'jpeg') {
+        s.jpeg({mozjpeg: true}); // .jpeg sets format
     }
 
     const resizedBuffer = await s.toBuffer();

packages/image-transform/test/integration/fixtures/index.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+// Helpers
+const getPath = function (filename) {
+    return path.join(__dirname, filename);
+};
+
+module.exports = {
+    inputJpeg: getPath('saw.jpg'),
+    inputPng: getPath('saw.png'),
+    inputWebp: getPath('tree.webp')
+};

packages/image-transform/test/integration/fixtures/output/saw_1000w.jpg

@@ -0,0 +1,129 @@
+'use strict';
+
+const sharp = require('sharp');
+// eslint-disable-next-line ghost/ghost-custom/node-assert-strict
+const assert = require('assert');
+const imageTransform = require('../../');
+const path = require('path');
+const fixtures = require('./fixtures');
+
+const makeOutpath = (inPath, mod, ext) => {
+    if (!ext) {
+        ext = path.extname(inPath);
+    }
+    const fileName = path.basename(inPath, ext);
+    return path.join(__dirname, `fixtures/output/${fileName}_${mod}${ext}`);
+};
+
+describe('Image compression', function () {
+    describe('JPEG', function () {
+        let fixtureBuffer;
+
+        before(async function () {
+            fixtureBuffer = await sharp(fixtures.inputJpeg).toBuffer();
+        });
+
+        it('should always compress JPEG images', async function () {
+            const inPath = fixtures.inputJpeg;
+            const outPath = makeOutpath(inPath, 'base', '.jpg');
+            
+            await imageTransform.resizeFromPath({in: inPath, out: outPath});
+            
+            await sharp(outPath)
+                .toBuffer(function (err, result) {
+                    if (err) {
+                        throw err;
+                    }
+                    assert(result instanceof Buffer);
+                    assert(result.length < fixtureBuffer.length);
+                });
+        });
+
+        it('should compress JPEG images with width attribute', async function () {
+            const inPath = fixtures.inputJpeg;
+            const outPath = makeOutpath(inPath, '1000w', '.jpg');
+            
+            await imageTransform.resizeFromPath({in: inPath, out: outPath, width: 1000});
+         
+            await sharp(outPath)
+                .toBuffer(function (err, result, info) {
+                    if (err) {
+                        throw err;
+                    }
+                    assert(result instanceof Buffer);
+                    assert(result.length < fixtureBuffer.length);
+                    assert(info.width === 1000);
+                });
+        });
+
+        it('can create a JPEG from another format by passing the format option', async function () {
+            const inputPngBuffer = await sharp(fixtures.inputPng).toBuffer();
+
+            const outputBuffer = await imageTransform.resizeFromBuffer(inputPngBuffer, {format: 'jpeg'});
+
+            sharp(outputBuffer).metadata().then(function (metadata) {
+                assert.equal(metadata.format, 'jpeg');
+            });
+        });
+    });
+
+    describe('PNG', function () {
+        let fixtureBuffer;
+
+        before(async function () {
+            fixtureBuffer = await sharp(fixtures.inputPng).toBuffer();
+        });
+
+        it('should compress PNG images with width attribute', async function () {
+            const inPath = fixtures.inputPng;
+            const outPath = makeOutpath(inPath, '1000w', '.png');
+            
+            await imageTransform.resizeFromPath({in: inPath, out: outPath, width: 1000});
+         
+            await sharp(outPath)
+                .toBuffer(function (err, result, info) {
+                    if (err) {
+                        throw err;
+                    }
+                    assert(result instanceof Buffer);
+                    assert(result.length < fixtureBuffer.length);
+                    assert(info.width === 1000);
+                });
+        });
+
+        it('can create PNG from another format by passing the format option', async function () {
+            const inputJpegBuffer = await sharp(fixtures.inputJpeg).toBuffer();
+
+            const outputBuffer = await imageTransform.resizeFromBuffer(inputJpegBuffer, {format: 'png'});
+
+            sharp(outputBuffer).metadata().then(function (metadata) {
+                assert.equal(metadata.format, 'png');
+            });
+        });
+    });
+
+    describe('WEBP', function () {
+        let fixtureBuffer;
+
+        before(async function () {
+            fixtureBuffer = await sharp(fixtures.inputWebp).toBuffer();
+        });
+
+        it('should compress WEBP images with width attribute', async function () {
+            const inPath = fixtures.inputWebp;
+            const outPath = makeOutpath(inPath, '1000w', '.webp');
+            
+            await imageTransform.resizeFromPath({in: inPath, out: outPath, width: 1000});
+         
+            await sharp(outPath)
+                .toBuffer(function (err, result, info) {
+                    if (err) {
+                        throw err;
+                    }
+                    assert(result instanceof Buffer);
+                    assert(result.length < fixtureBuffer.length);
+                    assert(info.width === 1000);
+                });
+        });
+    });
+});