jamiemason / image-optimisation-tools-comparison

A Benchmarking Suite for popular Image Optimisation Tools

image-optimisation-tools-comparison

A benchmarking suite for popular image optimisation tools.

Table of Contents

• 🌩 Installation
• 🕹 Usage
• ⚙️ Contributing
• 🚶🏽‍♀️ Manual Steps
• 🙋🏾‍♀️ Getting Help
• 👀 Other Projects
• 🤓 Author

🌩 Installation

npm install image-optimisation-tools-comparison

🕹 Usage

There are no runtime dependencies, getResults() parses and returns results.json.

import { getResults } from "image-optimisation-tools-comparison";

const array = getResults();

⚙️ Contributing

The pyssim Python module is used to compute the Structural Similarity Image Metric (SSIM). It can be installed on Mac using brew install python then pip install pyssim.

The original, unoptimised images are located in /images/photoshop. Each time a tool is tested, its directory (eg. /images/codekit) is replaced with the original images from /images/photoshop, the tool is then run over the images to update the benchmark.

/images/worst is a copy of the original images at /images/photoshop which is then compressed to the worst possible image quality. This value lets us calculate the quality loss percentage for each image.

Each time the /images directory changes, /src/data/results.json needs to be updated using yarn update-results.

These images used are exported from a .psd kindly given to us by Daan Jobsis from his tests carried out for the article [Retina Revolution: Follow Up](http://blog.netvlies.nl/design-interactie /retina-revolutie-follow-up/), containing photographs of varying levels of detail, simple patterns, and logos.

The images are exported using "Save for Web" as;

• GIF (+Interlaced).
• JPEG (+Optimised, Progressive).
• PNG 8 (+Interlaced).
• PNG 24 (+Interlaced).

🚶🏽‍♀️ Manual Steps

• /images/codekit is compressed using https://incident57.com/codekit/.
• /images/kraken is uploaded using the File Uploader at https://kraken.io/web-interface. The Zip file is then downloaded and extracted into this directory.
• /images/smushit is uploaded one-by-one using the Uploader view at http://www.smushit.com/ysmush.it. The Zip file is then downloaded and extracted into this directory.
• /images/tinypng is uploaded in batches of 20 at a time using the uploader at https://tinypng.com, downloaded one-by-one then moved into this directory.

🙋🏾‍♀️ Getting Help

Get help with issues by creating a Bug Report or discuss ideas by opening a Feature Request.

👀 Other Projects

If you find my Open Source projects useful, please share them ❤️

• eslint-formatter-git-log
  ESLint Formatter featuring Git Author, Date, and Hash
• eslint-plugin-move-files
  Move and rename files while keeping imports up to date
• eslint-plugin-prefer-arrow-functions
  Convert functions to arrow functions
• ImageOptim-CLI
  Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process.
• Jasmine-Matchers
  Write Beautiful Specs with Custom Matchers
• karma-benchmark
  Run Benchmark.js over multiple Browsers, with CI compatible output
• self-help
  Interactive Q&A Guides for Web and the Command Line
• syncpack
  Manage multiple package.json files, such as in Lerna Monorepos and Yarn Workspaces

🤓 Author

I'm Jamie Mason from Leeds in England, I began Web Design and Development in 1999 and have been Contracting and offering Consultancy as Fold Left Ltd since 2012. Who I've worked with includes Sky Sports, Sky Bet, Sky Poker, The Premier League, William Hill, Shell, Betfair, and Football Clubs including Leeds United, Spurs, West Ham, Arsenal, and more.

      

image-optimisation-tools-comparison's Issues

Inline CSS in head

There's only a small amount of CSS, save the request.

Include CSS Sprite sheets.

CSS Image Sprites are a really common use case for images that isn't tested currently by the comparison suite - add some to learn whether they have any characteristics that affect the performance of the various tools.

Add compression time to comparison

Raised by @ChrisCinelli at JamieMason/ImageOptim-CLI#86.

Remove Custom Font

Github's system fonts stack;
https://gist.github.com/doot0/b573398455d966de4c371cac734d9ddd

Computers have nice fonts;
https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7#d27e

Add https://compressor.io/

Add https://compressor.io to the benchmarks.

Show version numbers tested

If enabled under options, display the version number next to each tool under "visible tools".

Cannot sort "Worst Quality" column

When pressing the "Worst Quality" column header

Uncaught TypeError: Cannot read property 'score' of undefined
    at Constructor.sortAsc (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:23943:62)
    at Constructor.sortDesc (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:23946:21)
    at Array.sort (native)
    at Constructor.getResults (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:23901:14)
    at Constructor.render (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:23923:95)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:10448:34)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:10468:32)
    at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:16916:21)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:10421:36)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://jamiemason.github.io/image-optimisation-tools-comparison/dist/app/index.js:10405:10)

Update the benchmarks

The tests were last run in January 2016 and new versions of each app have been released.

Cache with Service Worker

Cache the HTML, https://cdn.polyfill.io/v2/polyfill.min.js, and dist/app/index.js.

Change ✔ ✖ icons to SVG

The toggle icons are not displaying correctly on iOS, change these to SVGs.

"Server render" the results

The table of results is currently generated on the client-side with React, include it in the original HTML.

Include the Adept JPG Compressor.

Raised by @ChrisCinelli at JamieMason/ImageOptim-CLI#86.

https://github.com/technopagan/adept-jpg-compressor

Replace React with Inferno

This is a basic React UI and Inferno has a smaller payload plus performs better in benchmarks than React and Preact for operations related to rendering tables.

https://github.com/infernojs/inferno

Compare using SSIM instead of MSE

I remember @pornel mentioning this — currently we are using compare -metric MSE but should switch to SSIM for more credible data.

Find what tools will provide this data and switch to them.

Filter by platform

Allow toggling display of platforms each tool is available for (osx, linux, windows etc).

Include Xcode.

See http://imageoptim.com/xcode.html and http://imageoptim.com/tweetbot.html.