u

src/util/processAvifImage.js

@@ -3,6 +3,7 @@ import { rgbaToThumbHash } from 'thumbhash';
 
 const FULL_MAX = 1000;
 const THUMB_MAX = 200;
+const SMALL_THUMB_MAX = 40;
 
 export default async function processAvifImage(inputBuffer) {
   const input = Buffer.isBuffer(inputBuffer)
@@ -26,8 +27,10 @@ export default async function processAvifImage(inputBuffer) {
 
   const thumbPipeline = sharp(input)
     .resize(THUMB_MAX, THUMB_MAX, { fit: 'inside', withoutEnlargement: true });
+  const smallThumbPipeline = sharp(input)
+    .resize(SMALL_THUMB_MAX, SMALL_THUMB_MAX, { fit: 'inside', withoutEnlargement: true });
 
-  const [full, thumb, thumbRgba] = await Promise.all([
+  const [full, thumb, thumbRgba, smallThumb] = await Promise.all([
     useOriginalFull
       ? Promise.resolve({
           info: { width: w, height: h },
@@ -44,6 +47,9 @@ export default async function processAvifImage(inputBuffer) {
       .ensureAlpha()
       .raw()
       .toBuffer({ resolveWithObject: true }),
+    smallThumbPipeline
+      .avif({ effort: 2 })
+      .toBuffer({ resolveWithObject: true }),
   ]);
 
   const thumbHashBytes = rgbaToThumbHash(
@@ -66,5 +72,10 @@ export default async function processAvifImage(inputBuffer) {
       buffer: thumb.data,
       hash: Buffer.from(thumbHashBytes).toString('base64'),
     },
+    smallThumb: {
+      w: smallThumb.info.width,
+      h: smallThumb.info.height,
+      buffer: smallThumb.data,
+    },
   };
 }