perf(backend:files): enhance thumbnail generation to use WebP format and optimize image processing settings

Author: johaven

backend/src/applications/files/files.controller.spec.ts

@@ -20,7 +20,7 @@ describe(FilesController.name, () => {
   const fakeUser: any = { id: 1, login: 'john', role: 1 }
   const fakeSpace: any = { id: 42, key: 'space-key', url: '/space/a', realPath: '/data/space/a', realBasePath: '/data/space' }
   const fakeReq: any = { user: fakeUser, space: fakeSpace, headers: {}, method: 'GET', ip: '127.0.0.1' }
-  const fakeRes: any = { header: jest.fn().mockReturnThis(), status: jest.fn().mockReturnThis(), send: jest.fn() }
+  const fakeRes: any = { header: jest.fn().mockReturnThis(), status: jest.fn().mockReturnThis(), type: jest.fn().mockReturnThis(), send: jest.fn() }
 
   // Mocks
   const filesMethodsMock = {
@@ -142,20 +142,36 @@ describe(FilesController.name, () => {
       filesMethodsMock.genThumbnail.mockResolvedValue(stream)
 
       // pass undefined to exercise controller default parameter
-      const result = await filesController.genThumbnail(fakeSpace, undefined as unknown as number)
+      const result = await filesController.genThumbnail(fakeSpace, undefined as unknown as number, fakeRes)
 
       expect(filesMethodsMock.genThumbnail).toHaveBeenCalledWith(fakeSpace, 256)
-      expect(result).toBe(stream)
+      expect(fakeRes.type).toHaveBeenCalled()
+      expect(fakeRes.send).toHaveBeenCalledWith(stream)
+      expect(result).toBeUndefined()
     })
 
     it('genThumbnail() should pass provided size', async () => {
       const stream = {} as any
       filesMethodsMock.genThumbnail.mockResolvedValue(stream)
 
-      const result = await filesController.genThumbnail(fakeSpace, 512)
+      const result = await filesController.genThumbnail(fakeSpace, 512, fakeRes)
 
       expect(filesMethodsMock.genThumbnail).toHaveBeenCalledWith(fakeSpace, 512)
-      expect(result).toBe(stream)
+      expect(fakeRes.type).toHaveBeenCalled()
+      expect(fakeRes.send).toHaveBeenCalledWith(stream)
+      expect(result).toBeUndefined()
+    })
+
+    it('genThumbnail() should reduce size larger than 1024', async () => {
+      const stream = {} as any
+      filesMethodsMock.genThumbnail.mockResolvedValue(stream)
+
+      const result = await filesController.genThumbnail(fakeSpace, 2048, fakeRes)
+
+      expect(filesMethodsMock.genThumbnail).toHaveBeenCalledWith(fakeSpace, 1024)
+      expect(fakeRes.type).toHaveBeenCalled()
+      expect(fakeRes.send).toHaveBeenCalledWith(stream)
+      expect(result).toBeUndefined()
     })
   })
 

backend/src/applications/files/files.controller.ts

@@ -4,8 +4,26 @@
  * See the LICENSE file for licensing details
  */
 
-import { Body, Controller, Copy, Delete, Get, Head, Logger, Move, Post, Query, Req, Res, Search, StreamableFile, UseGuards } from '@nestjs/common'
+import {
+  Body,
+  Controller,
+  Copy,
+  Delete,
+  Get,
+  Head,
+  Logger,
+  Move,
+  ParseIntPipe,
+  Post,
+  Query,
+  Req,
+  Res,
+  Search,
+  StreamableFile,
+  UseGuards
+} from '@nestjs/common'
 import { FastifyReply } from 'fastify'
+import { webpMimeType } from '../../common/image'
 import { SkipSpaceGuard } from '../spaces/decorators/space-skip-guard.decorator'
 import { SkipSpacePermissionsCheck } from '../spaces/decorators/space-skip-permissions.decorator'
 import { GetSpace } from '../spaces/decorators/space.decorator'
@@ -89,8 +107,15 @@ export class FilesController {
   }
 
   @Get(`${FILES_ROUTE.OPERATION}/${FILE_OPERATION.THUMBNAIL}/*`)
-  async genThumbnail(@GetSpace() space: SpaceEnv, @Query('size') size: number = 256): Promise<StreamableFile> {
-    return this.filesMethods.genThumbnail(space, size)
+  async genThumbnail(
+    @GetSpace() space: SpaceEnv,
+    @Query('size', new ParseIntPipe({ optional: true })) size = 256,
+    @Res() res: FastifyReply
+  ): Promise<StreamableFile> {
+    if (size > 1024) size = 1024
+    const thumb = await this.filesMethods.genThumbnail(space, size)
+    res.type(webpMimeType)
+    return res.send(thumb)
   }
 
   // TASKS OPERATIONS

backend/src/applications/files/services/files-methods.service.ts

@@ -7,7 +7,7 @@
 import { HttpException, HttpStatus, Injectable, Logger, StreamableFile } from '@nestjs/common'
 import { FastifyReply } from 'fastify'
 import path from 'node:path'
-import { pngMimeType } from '../../../common/image'
+import { Readable } from 'node:stream'
 import { FastifySpaceRequest } from '../../spaces/interfaces/space-request.interface'
 import { SpaceEnv } from '../../spaces/models/space-env.model'
 import { SpacesManager } from '../../spaces/services/spaces-manager.service'
@@ -146,10 +146,9 @@ export class FilesMethods {
     }
   }
 
-  async genThumbnail(space: SpaceEnv, size: number): Promise<StreamableFile> {
+  async genThumbnail(space: SpaceEnv, size: number): Promise<Readable> {
     try {
-      const pngStream = await this.filesManager.generateThumbnail(space, size)
-      return new StreamableFile(pngStream, { type: pngMimeType })
+      return await this.filesManager.generateThumbnail(space, size)
     } catch (e) {
       this.handleError(space, this.genThumbnail.name, e)
     }

backend/src/common/image.ts

@@ -6,34 +6,32 @@
 
 import { Resvg } from '@resvg/resvg-js'
 import fs from 'node:fs/promises'
+import os from 'node:os'
 import path from 'node:path'
 import { Readable } from 'node:stream'
 import sharp from 'sharp'
 
 export const pngMimeType = 'image/png'
+export const webpMimeType = 'image/webp'
 export const svgMimeType = 'image/svg+xml'
 sharp.cache(false)
+sharp.concurrency(Math.min(2, os.cpus()?.length || 1))
 
 export async function generateThumbnail(filePath: string, size: number): Promise<Readable> {
-  const image = sharp(filePath, { autoOrient: true })
-  let { width, height } = await image.metadata()
-
-  if (!width || !height) throw new Error('Invalid image dimensions')
-
-  // Calculate the new dimensions, maintaining the aspect ratio
-  if (width > height) {
-    if (width > size) {
-      height = Math.round((height * size) / width)
-      width = size
-    }
-  } else {
-    if (height > size) {
-      width = Math.round((width * size) / height)
-      height = size
-    }
-  }
-
-  return image.resize(width, height, { fit: 'inside' }).png({ compressionLevel: 0 })
+  return sharp(filePath, {
+    sequentialRead: true, // sequential read = more efficient I/O
+    limitInputPixels: 268e6 // protects against extremely large images
+  })
+    .rotate()
+    .resize({
+      width: size,
+      height: size,
+      fit: 'inside',
+      kernel: 'mitchell',
+      withoutEnlargement: true,
+      fastShrinkOnLoad: true // true by default, added for clarity
+    })
+    .webp({ quality: 80, effort: 0, alphaQuality: 90 })
 }
 
 export async function generateAvatar(initials: string): Promise<Buffer> {