Generate image resolutions/formats for the web using ImageMagick and zx

generate-images.mjs

#!/usr/bin/env zx

/* Require:
 * - ImageMagick (https://imagemagick.org/)
 * - rename (for macOS https://formulae.brew.sh/formula/rename)
 * - zx (https://github.com/google/zx)
 * 
 * Execute this script in your images source folder
 * f.ex. $ cd my-original-images/ && npx zx generate-images.mjs
 * 
 * More on image sizes/formats for the web on https://antistatique.github.io/images/
 */

const widths = [128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 2580, 3840];
const ratios = ['original', '16_9'];
const formats = [
  ['jpg', 65],
  ['webp', 30],
]

await $`rm -rf ./output`;
await $`mkdir -p ./output`;
await $`mkdir -p ./output/tmp`;

for (const ratio of ratios) {
  await $`mkdir -p ./output/tmp/${ratio}`;

  for (const width of widths) {
    const path = `./output/tmp/${ratio}/${width}`;
    await $`mkdir -p ${path}`;
    
    for (const format of formats) {
      const [ext, quality] = format;

      if (ratio === 'original') {
        await $`mogrify -format ${ext} -quality ${quality} -resize ${width} -path ${path} *.jpeg`;
        await $`rename -s .${ext} '_${ratio}_${width}.${ext}' ${path}/*`;
      } else {
        await $`mogrify -format ${ext} -quality ${quality} -resize ${width} -gravity center -crop ${ratio.replace('_', ':')} -path ${path} *.jpeg`;
        await $`rename -s .${ext} '_${ratio}_${width}.${ext}' ${path}/*`;
      }
      
      await $`mv ${path}/*.${ext} ./output/`;
    }
  }

}

await $`rm -rf ./output/tmp`