From be46b90ce81899746080e20d6cfd30d6aed15558 Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Wed, 28 Sep 2022 12:26:34 -0500 Subject: [PATCH 1/2] removes our quality defaults, allowing Squoosh format-specific defaults to be used --- packages/integrations/image/src/loaders/squoosh.ts | 2 +- .../image/src/vendor/squoosh/image-pool.ts | 8 ++++---- .../integrations/image/src/vendor/squoosh/image.ts | 4 ++-- .../integrations/image/src/vendor/squoosh/impl.ts | 12 ++++++++---- 4 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/integrations/image/src/loaders/squoosh.ts b/packages/integrations/image/src/loaders/squoosh.ts index 20529c9f846c..95dda9e47663 100644 --- a/packages/integrations/image/src/loaders/squoosh.ts +++ b/packages/integrations/image/src/loaders/squoosh.ts @@ -115,7 +115,7 @@ class SquooshService extends BaseSSRService { inputBuffer, operations, transform.format, - transform.quality || 100 + transform.quality ); return { diff --git a/packages/integrations/image/src/vendor/squoosh/image-pool.ts b/packages/integrations/image/src/vendor/squoosh/image-pool.ts index bc1b8e2bbe00..d29245fb40dc 100644 --- a/packages/integrations/image/src/vendor/squoosh/image-pool.ts +++ b/packages/integrations/image/src/vendor/squoosh/image-pool.ts @@ -78,7 +78,7 @@ export async function processBuffer( buffer: Buffer, operations: Operation[], encoding: OutputFormat, - quality: number + quality?: number ): Promise { // @ts-ignore const worker = await getWorker() @@ -109,14 +109,14 @@ export async function processBuffer( return await worker.dispatchJob({ operation: 'encodeavif', imageData, - quality: quality || 100 + quality, }) as Uint8Array; case 'jpeg': case 'jpg': return await worker.dispatchJob({ operation: 'encodejpeg', imageData, - quality: quality || 100, + quality, }) as Uint8Array; case 'png': return await worker.dispatchJob({ @@ -127,7 +127,7 @@ export async function processBuffer( return await worker.dispatchJob({ operation: 'encodewebp', imageData, - quality: quality || 100, + quality, }) as Uint8Array; default: throw Error(`Unsupported encoding format`) diff --git a/packages/integrations/image/src/vendor/squoosh/image.ts b/packages/integrations/image/src/vendor/squoosh/image.ts index fa77efd9773b..aad4fb598e45 100644 --- a/packages/integrations/image/src/vendor/squoosh/image.ts +++ b/packages/integrations/image/src/vendor/squoosh/image.ts @@ -16,7 +16,7 @@ export async function processBuffer( buffer: Buffer, operations: Operation[], encoding: OutputFormat, - quality: number + quality?: number ): Promise { let imageData = await impl.decodeBuffer(buffer) for (const operation of operations) { @@ -29,7 +29,7 @@ export async function processBuffer( switch (encoding) { case 'avif': - return await impl.encodeAvif(imageData, { quality: quality }) as Uint8Array; + return await impl.encodeAvif(imageData, { quality }) as Uint8Array; case 'jpeg': case 'jpg': return await impl.encodeJpeg(imageData, { quality }) as Uint8Array; diff --git a/packages/integrations/image/src/vendor/squoosh/impl.ts b/packages/integrations/image/src/vendor/squoosh/impl.ts index 722336807be9..fa50c0fd96d3 100644 --- a/packages/integrations/image/src/vendor/squoosh/impl.ts +++ b/packages/integrations/image/src/vendor/squoosh/impl.ts @@ -71,13 +71,14 @@ export async function resize({ image, width, height }: ResizeOpts) { export async function encodeJpeg( image: ImageData, - { quality }: { quality: number } + opts: { quality?: number } ): Promise { image = ImageData.from(image) - + const e = supportedFormats['mozjpeg'] const m = await e.enc() await maybeDelay() + const quality = opts.quality || e.defaultEncoderOptions.quality const r = await m.encode(image.data, image.width, image.height, { ...e.defaultEncoderOptions, quality, @@ -87,13 +88,14 @@ export async function encodeJpeg( export async function encodeWebp( image: ImageData, - { quality }: { quality: number } + opts: { quality?: number } ): Promise { image = ImageData.from(image) const e = supportedFormats['webp'] const m = await e.enc() await maybeDelay() + const quality = opts.quality || e.defaultEncoderOptions.quality const r = await m.encode(image.data, image.width, image.height, { ...e.defaultEncoderOptions, quality, @@ -103,7 +105,7 @@ export async function encodeWebp( export async function encodeAvif( image: ImageData, - { quality }: { quality: number } + opts: { quality?: number } ): Promise { image = ImageData.from(image) @@ -111,6 +113,8 @@ export async function encodeAvif( const m = await e.enc() await maybeDelay() const val = e.autoOptimize.min + // AVIF doesn't use a 0-100 quality, default to 75 and convert to cqLevel below + const quality = opts.quality || 75 const r = await m.encode(image.data, image.width, image.height, { ...e.defaultEncoderOptions, // Think of cqLevel as the "amount" of quantization (0 to 62), From 1345e241eeb68282ddcf01074d21539c983163ad Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Wed, 28 Sep 2022 12:30:21 -0500 Subject: [PATCH 2/2] chore: add changeset --- .changeset/fuzzy-garlics-obey.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fuzzy-garlics-obey.md diff --git a/.changeset/fuzzy-garlics-obey.md b/.changeset/fuzzy-garlics-obey.md new file mode 100644 index 000000000000..442c961b8889 --- /dev/null +++ b/.changeset/fuzzy-garlics-obey.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Updates the default image service to use format-specific quality defaults