Compress new images?

[pdehaan]

We have a bunch more images added recently, we should make sure they are optimized.

Not sure how we've optimized images in the past, or if we should should add an npm script to minimize the images using imagemin-cli or somethin'.

$ ls -Slh images/*.png | grep "Oct 31" | awk '{print $6 " " $7 "    " $5 "    " $9}'

Oct 31    4.8K    images/google-plus.png
Oct 31    4.2K    images/google-admin.png
Oct 31    3.8K    images/dailybeast-com.png
Oct 31    3.4K    images/google-hangouts.png
Oct 31    3.3K    images/wired-com.png
Oct 31    3.3K    images/google-drive.png
Oct 31    3.3K    images/google-com.png
Oct 31    3.0K    images/google-calendar.png
Oct 31    3.0K    images/google-gmail.png
Oct 31    3.0K    images/google-photos.png
Oct 31    2.9K    images/google-groups.png
Oct 31    2.7K    images/google-contacts.png
Oct 31    2.4K    images/fivethirtyeight-com.png
Oct 31    2.2K    images/google-sheets.png
Oct 31    2.1K    images/google-forms.png
Oct 31    1.9K    images/google-sites.png
Oct 31    1.7K    images/google-docs.png
Oct 31    1.6K    images/google-slides.png
Oct 31    1.4K    images/talkingpointsmemo-com.png
Oct 31    1.3K    images/digg-com.png
Oct 31    1.3K    images/invision-com.png
Oct 31    1.2K    images/strava-com.png

[pdehaan]

Yeah, so a few of the new images could benefit from some optimization:

# Generate some optimized images over in the ./optimized/* directory.
$ ./node_modules/.bin/imagemin images --out-dir=optimized

const fs = require('fs');
const path = require('path');

function getImages(inputDir, optimizedDir) {
  return new Promise((resolve, reject) => {
    fs.readdir(inputDir, (err, images) => {
      if (err) {
        return reject(err);
      }
      const imageArr = images
        .filter((name) => name.endsWith('.png'))
        .map((image) => {
          const stats = fs.statSync(path.join(inputDir, image));
          const optimized = fs.statSync(path.join(optimizedDir, image));
          return {
            name: image,
            ctime: new Date(stats.ctime),
            size: stats.size,
            optimized: optimized.size,
            savings: ((1 - (optimized.size / stats.size)) * 100).toFixed(2) + '%'
          };
        })
        .sort((itemA, itemB) => {
          const savingsA = parseFloat(itemA.savings, 10);
          const savingsB = parseFloat(itemB.savings, 10);
          if (savingsA > savingsB) {
            return 1;
          } else if (savingsA < savingsB) {
            return -1;
          }
          return 0;
        })
        .reverse();
      return resolve(imageArr);
    });
  });
}

getImages('images', 'optimized')
  // Filter only all unoptimized images...
  .then((images) => images.filter((image) => image.size > image.optimized))
  .then((images) => console.log(images))
  .catch((err) => console.error(err));

Output:

[ { name: 'wired-com.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3412,
    optimized: 1488,
    savings: '56.39%' },
  { name: 'talkingpointsmemo-com.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 1472,
    optimized: 905,
    savings: '38.52%' },
  { name: 'dailybeast-com.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3940,
    optimized: 3035,
    savings: '22.97%' },
  { name: 'fivethirtyeight-com.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 2418,
    optimized: 1914,
    savings: '20.84%' },
  { name: 'google-com.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3344,
    optimized: 2675,
    savings: '20.01%' },
  { name: 'digg-com.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 1320,
    optimized: 1145,
    savings: '13.26%' },
  { name: 'google-photos.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3024,
    optimized: 2631,
    savings: '13.00%' },
  { name: 'google-docs.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 1774,
    optimized: 1630,
    savings: '8.12%' },
  { name: 'google-slides.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 1670,
    optimized: 1545,
    savings: '7.49%' },
  { name: 'google-sheets.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 2275,
    optimized: 2121,
    savings: '6.77%' },
  { name: 'google-forms.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 2162,
    optimized: 2027,
    savings: '6.24%' },
  { name: 'google-sites.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 1904,
    optimized: 1797,
    savings: '5.62%' },
  { name: 'google-contacts.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 2740,
    optimized: 2595,
    savings: '5.29%' },
  { name: 'google-groups.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 2970,
    optimized: 2815,
    savings: '5.22%' },
  { name: 'google-calendar.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3102,
    optimized: 2955,
    savings: '4.74%' },
  { name: 'google-hangouts.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3497,
    optimized: 3349,
    savings: '4.23%' },
  { name: 'google-gmail.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3088,
    optimized: 2970,
    savings: '3.82%' },
  { name: 'google-admin.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 4312,
    optimized: 4154,
    savings: '3.66%' },
  { name: 'google-drive.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 3358,
    optimized: 3236,
    savings: '3.63%' },
  { name: 'google-plus.png',
    ctime: 2016-10-31T17:35:52.000Z,
    size: 4931,
    optimized: 4804,
    savings: '2.58%' } ]