Closed pdehaan closed 7 years ago
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));
[ { 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%' } ]
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'.