Compare commits

...

16 Commits

Author SHA1 Message Date
Amy 01a3e0f5ad Try batches of 40 8 months ago
Amy 11c939db53 Try batches of 48 8 months ago
Amy dde42f2dc0 Try batches of 64 8 months ago
Amy c9a01b85ed Try batches of 32 8 months ago
Amy a6bc1ec256 Try Promise.all on batches of 16 8 months ago
Amy 1e49241a0d Revert "Try for loop instead of Promise.all" 8 months ago
Amy ddc59a7103 Try for loop instead of Promise.all 8 months ago
Amy d7e82feed6 Revert "Try 4 workers" 8 months ago
Amy 3867be2c75 Try 4 workers 8 months ago
Amy 7f2645b1ae Revert "Revert "Revert "Replace events images with optimized images""" 8 months ago
Amy 84eba39f7a Revert "Revert "Replace events images with optimized images"" 8 months ago
Amy 49c272efa3 Fix brackets 8 months ago
Amy 6860089d66 Revert "Replace events images with optimized images" 8 months ago
Amy 6a3b151ed2 Replace events images with optimized images 8 months ago
Amy 2a62f0b508 Add resize logging 8 months ago
Amy 19c5aecb07 Resize events images and add logging 8 months ago
  1. 100
      scripts/optimize-images.ts

@ -16,14 +16,16 @@ import { default as getImageDimensions } from "image-size";
const SOURCE_DIRECTORY = "images";
const DESTINATION_DIRECTORY = path.join("public", "images");
// directory where Meet the Team headshots are stored, relative to the source directory
// directories are relative to SOURCE_DIRECTORY
const TEAM_IMAGES_DIRECTORY = path.join("team", "");
const EVENTS_IMAGES_DIRECTORY = path.join("events", "");
const IMAGE_MINIMUM_SIZE = 512;
const GET_ENCODER_FROM_EXTENSION: { [imageExtension: string]: string } = {
jpg: "mozjpeg",
jpeg: "mozjpeg",
JPG: "mozjpeg",
png: "oxipng",
};
@ -35,6 +37,8 @@ const ENCODER_OPTIONS: { [encoder: string]: Record<string, unknown> } = {
void optimizeImages();
export async function optimizeImages() {
const startTime = Date.now();
const imagePaths = await getFilePathsInDirectory(SOURCE_DIRECTORY);
await fse.emptyDir(DESTINATION_DIRECTORY);
@ -42,52 +46,72 @@ export async function optimizeImages() {
const numberOfWorkers = Math.min(cpus().length, 8);
const imagePool = new ImagePool(numberOfWorkers);
await Promise.all(
imagePaths.map(async (imagePath) => {
const sourcePath = path.join(SOURCE_DIRECTORY, imagePath);
const destinationPath = path.join(DESTINATION_DIRECTORY, imagePath);
const fileExtension = imagePath.split(".").pop() ?? "";
const encoder = GET_ENCODER_FROM_EXTENSION[fileExtension];
const batchSize = 40;
for (let i = 0; i < imagePaths.length; i += batchSize) {
await Promise.all(
imagePaths.slice(i, i + batchSize).map(async (imagePath) => {
const imageStartTime = Date.now();
const sourcePath = path.join(SOURCE_DIRECTORY, imagePath);
const destinationPath = path.join(DESTINATION_DIRECTORY, imagePath);
const fileExtension = imagePath.split(".").pop() ?? "";
const encoder = GET_ENCODER_FROM_EXTENSION[fileExtension];
if (!encoder) {
await fse.copy(sourcePath, destinationPath);
console.log(
`Copied ${imagePath} in ${getElapsedSeconds(imageStartTime)}s`
);
return;
}
const rawImageFile = await fse.readFile(sourcePath);
const ingestedImage = imagePool.ingestImage(rawImageFile);
const { width, height } = getImageDimensions(rawImageFile);
if (!encoder) {
await fse.copy(sourcePath, destinationPath);
return;
}
await ingestedImage.decoded;
const rawImageFile = await fse.readFile(sourcePath);
const ingestedImage = imagePool.ingestImage(rawImageFile);
const { width, height } = getImageDimensions(rawImageFile);
const shouldResize =
(imagePath.startsWith(TEAM_IMAGES_DIRECTORY) ||
imagePath.startsWith(EVENTS_IMAGES_DIRECTORY)) &&
(width ?? 0) > IMAGE_MINIMUM_SIZE &&
(height ?? 0) > IMAGE_MINIMUM_SIZE;
await ingestedImage.decoded;
if (width && height && shouldResize) {
const smallerDimension = width < height ? "width" : "height";
const shouldResize =
imagePath.startsWith(TEAM_IMAGES_DIRECTORY) &&
(width ?? 0) > IMAGE_MINIMUM_SIZE &&
(height ?? 0) > IMAGE_MINIMUM_SIZE;
// specifying only one dimension maintains the aspect ratio
const preprocessOptions = {
resize: {
enabled: true,
[smallerDimension]: IMAGE_MINIMUM_SIZE,
},
};
if (width && height && shouldResize) {
const smallerDimension = width < height ? "width" : "height";
await ingestedImage.preprocess(preprocessOptions);
// specifying only one dimension maintains the aspect ratio
const preprocessOptions = {
resize: {
enabled: true,
[smallerDimension]: IMAGE_MINIMUM_SIZE,
},
};
console.log(
`Resized ${sourcePath} in ${getElapsedSeconds(imageStartTime)}s`
);
}
await ingestedImage.preprocess(preprocessOptions);
}
const encodeOptions = { [encoder]: ENCODER_OPTIONS[encoder] };
await ingestedImage.encode(encodeOptions);
const encodeOptions = { [encoder]: ENCODER_OPTIONS[encoder] };
await ingestedImage.encode(encodeOptions);
const encodedImage = await ingestedImage.encodedWith[encoder];
await fse.outputFile(destinationPath, encodedImage.binary);
const encodedImage = await ingestedImage.encodedWith[encoder];
await fse.outputFile(destinationPath, encodedImage.binary);
})
);
console.log(
`Optimized ${sourcePath} in ${getElapsedSeconds(imageStartTime)}s`
);
})
);
}
await imagePool.close();
console.log(`TOTAL DURATION: ${getElapsedSeconds(startTime)}s`);
}
async function getFilePathsInDirectory(directory: string): Promise<string[]> {
@ -105,3 +129,7 @@ async function getFilePathsInDirectory(directory: string): Promise<string[]> {
)
).flat();
}
function getElapsedSeconds(startTime: number) {
return (Date.now() - startTime) / 1000;
}

Loading…
Cancel
Save