New: Generate original image in other formats (#96)

Author: stormwarning

.changeset/gentle-vans-change.md

@@ -0,0 +1,5 @@
+---
+'@tidaltheory/lens': minor
+---
+
+Generate AVIF and WebP formats of original image

src/cli.ts

@@ -13,6 +13,7 @@ import { PackageJson } from 'type-fest'
 import { loadConfig } from './lib/context.js'
 import { getDominantPalette } from './lib/dominant.js'
 import { generateFingerprint } from './lib/fingerprint.js'
+import { optimiseImage } from './lib/optimise.js'
 import { matchThumbnail, writeThumbnail } from './lib/thumbnail.js'
 import type { ImageRecord, ImageThumbnails } from './types.js'
 
@@ -56,12 +57,12 @@ prog.command('add <src>')
 		let processed = 0
 
 		for await (let source of sourceImages) {
-			let sourceImage: FileHandle
 			/**
 			 * Check that source image exists.
 			 */
+			spinner.text = 'Checking image...'
+			let sourceImage: FileHandle
 			try {
-				spinner.text = 'Checking image...'
 				sourceImage = await open(source, 'r')
 				await sourceImage.close()
 			} catch (error: unknown) {
@@ -89,10 +90,19 @@ prog.command('add <src>')
 				await mkdir(`${dir}/${imageName}`)
 			}
 
+			spinner.text = 'Optimising original image...'
+			let formats = {}
 			try {
-				spinner.text = 'Optimising original image...'
-				await sharpImage.withMetadata().toFile(filename)
-				spinner.succeed('Optimised a copy of original image')
+				formats = await oraPromise(
+					optimiseImage(sharpImage, {
+						dir,
+						imageName,
+						fingerprint,
+						ext,
+						useFilenameDirectory,
+					}),
+					{ successText: 'Optimised a copy of original image' }
+				)
 			} catch (error: unknown) {
 				spinner.fail(String(error))
 				continue
@@ -153,6 +163,7 @@ prog.command('add <src>')
 			let entry: ImageRecord = {
 				path: filename,
 				dimensions: { width, height },
+				formats,
 				colors: dominantPalette,
 				thumbnails: entryThumbnails,
 			}

src/lib/optimise.ts

@@ -0,0 +1,26 @@
+import type { Sharp } from 'sharp'
+
+import type { ImageFile, PathParts } from '../types'
+
+export async function optimiseImage(
+	image: Sharp,
+	{ dir, imageName, fingerprint, ext, useFilenameDirectory }: PathParts
+) {
+	let filename = useFilenameDirectory
+		? `${dir}/${imageName}/${fingerprint}`
+		: `${dir}/${imageName}.${fingerprint}`
+	let formats: ImageFile['formats'] = {}
+
+	await image.withMetadata().toFile(`${filename}${ext}`)
+
+	formats.webp = await image
+		.withMetadata()
+		.toFile(`${filename}.webp`)
+		.then(() => `${filename}.webp`)
+	formats.avif = await image
+		.withMetadata()
+		.toFile(`${filename}.avif`)
+		.then(() => `${filename}.avif`)
+
+	return formats
+}

src/lib/thumbnail.ts

@@ -2,7 +2,12 @@ import multimatch from 'multimatch'
 import sharp from 'sharp'
 import type { Sharp } from 'sharp'
 
-import type { ImageDimensions, ImageFile, ThumbnailOption } from '../types'
+import type {
+	ImageDimensions,
+	ImageFile,
+	PathParts,
+	ThumbnailOption,
+} from '../types'
 
 /**
  * Determine if the source path matches a glob pattern. Returns true if `files`
@@ -14,14 +19,6 @@ export function matchThumbnail(source: string, files?: string | string[]) {
 	return multimatch([source], files).length > 0
 }
 
-interface PathParts {
-	dir: string
-	imageName: string
-	fingerprint: string
-	ext: string
-	useFilenameDirectory: boolean
-}
-
 /**
  * Writes a resized image to the same directory as the source image,
  * in the initial format as well as `webp` and `avif`.

src/types.ts

@@ -46,3 +46,11 @@ export interface LensConfig {
 	useFilenameDirectory?: boolean
 	thumbnails?: ThumbnailOption[]
 }
+
+export interface PathParts {
+	dir: string
+	imageName: string
+	fingerprint: string
+	ext: string
+	useFilenameDirectory: boolean
+}