www-new/scripts/optimize-images.ts

/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */

// TODO: upgrade libsquoosh once types are available: https://github.com/GoogleChromeLabs/squoosh/issues/1077

import { cpus } from "os";
import path from "path";

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { ImagePool } from "@squoosh/lib";
import fse from "fs-extra";
import { default as getImageDimensions } from "image-size";

const IMAGES_SOURCE_DIRECTORY = "images";
const IMAGES_DESTINATION_DIRECTORY = "public/images";

void optimizeImages();

const IMAGE_MINIMUM_SIZE = 300;

const IMAGE_ENCODE_OPTIONS = { mozjpeg: {} };
const GET_CODEC_FROM_EXTENSION: { [imageExtension: string]: string } = {
  jpg: "mozjpeg",
  jpeg: "mozjpeg",
};

export async function optimizeImages() {
  const imagePaths = await getFilePathsInDirectory(IMAGES_SOURCE_DIRECTORY);
  await fse.emptyDir(IMAGES_DESTINATION_DIRECTORY);

  const imagePool = new ImagePool(cpus().length);

  await Promise.all(
    imagePaths.map(async (imagePath) => {
      const sourcePath = path.join(IMAGES_SOURCE_DIRECTORY, imagePath);
      const destinationPath = path.join(
        IMAGES_DESTINATION_DIRECTORY,
        imagePath
      );
      const fileExtension = imagePath.split(".").pop() ?? "";

      if (!GET_CODEC_FROM_EXTENSION[fileExtension]) {
        await fse.copy(sourcePath, destinationPath);
        return;
      }

      const rawImageFile = await fse.readFile(sourcePath);
      const ingestedImage = imagePool.ingestImage(rawImageFile);
      const { width, height } = getImageDimensions(rawImageFile);

      await ingestedImage.decoded;

      if (width && height) {
        const resizeEnabled =
          width > IMAGE_MINIMUM_SIZE && height > IMAGE_MINIMUM_SIZE;
        const smallerDimension = width < height ? "width" : "height";

        // specifying only one dimension maintains the aspect ratio
        const preprocessOptions = {
          resize: {
            enabled: resizeEnabled,
            [smallerDimension]: IMAGE_MINIMUM_SIZE,
          },
        };

        await ingestedImage.preprocess(preprocessOptions);
      }

      await ingestedImage.encode(IMAGE_ENCODE_OPTIONS);

      const encodedImage = await ingestedImage.encodedWith[
        GET_CODEC_FROM_EXTENSION[fileExtension]
      ];
      await fse.outputFile(destinationPath, encodedImage.binary);
    })
  );

  await imagePool.close();
}

async function getFilePathsInDirectory(directory: string): Promise<string[]> {
  const entries = await fse.readdir(directory, { withFileTypes: true });
  return (
    await Promise.all(
      entries.map(async (entry) => {
        if (entry.isDirectory()) {
          const subdirectory = path.join(directory, entry.name);
          const subentries = await getFilePathsInDirectory(subdirectory);
          return subentries.map((subentry) => path.join(entry.name, subentry));
        }
        return entry.name;
      })
    )
  ).flat();
}