Enabling high quality chroma subsampling for webp by default in the hope of slightly nicer thumbnail quality #558

src/backend/model/fileprocessing/PhotoProcessing.ts

@@ -4,11 +4,7 @@ import * as os from 'os';
 import * as crypto from 'crypto';
 import {ProjectPath} from '../../ProjectPath';
 import {Config} from '../../../common/config/private/Config';
-import {
-  PhotoWorker,
-  RendererInput,
-  ThumbnailSourceType,
-} from '../threading/PhotoWorker';
+import {PhotoWorker, RendererInput, ThumbnailSourceType,} from '../threading/PhotoWorker';
 import {ITaskExecuter, TaskExecuter} from '../threading/TaskExecuter';
 import {FaceRegion, PhotoDTO} from '../../../common/entities/PhotoDTO';
 import {SupportedFormats} from '../../../common/SupportedFormats';
@@ -124,7 +120,7 @@ export class PhotoProcessing {
     return path.join(
       ProjectPath.TranscodedFolder,
       ProjectPath.getRelativePathToImages(path.dirname(mediaPath)),
-      file + '_' + size + 'q' + Config.Media.Thumbnail.quality + PhotoProcessing.CONVERTED_EXTENSION
+      file + '_' + size + 'q' + Config.Media.Thumbnail.quality + (Config.Media.Thumbnail.smartSubsample ? 'cs' : '') + PhotoProcessing.CONVERTED_EXTENSION
     );
   }
 
@@ -257,6 +253,7 @@ export class PhotoProcessing {
       makeSquare,
       useLanczos3: Config.Media.Thumbnail.useLanczos3,
       quality: Config.Media.Thumbnail.quality,
+      smartSubsample: Config.Media.Thumbnail.smartSubsample,
     } as RendererInput;
 
     const outDir = path.dirname(input.outPath);

src/backend/model/threading/PhotoWorker.ts

@@ -46,6 +46,7 @@ export interface RendererInput {
   outPath: string;
   quality: number;
   useLanczos3: boolean;
+  smartSubsample: boolean;
   cut?: {
     left: number;
     top: number;
@@ -162,7 +163,7 @@ export class ImageRendererFactory {
           fit: 'cover',
         });
       }
-      await image.rotate().webp({effort: 6, quality: input.quality}).toFile(input.outPath);
+      await image.rotate().webp({effort: 6, quality: input.quality, smartSubsample: input.smartSubsample}).toFile(input.outPath);
     };
   }
 }

src/common/config/private/PrivateConfig.ts

@@ -313,6 +313,16 @@ export class ServerThumbnailConfig extends ClientThumbnailConfig {
     description: $localize`Between 0-100.`
   })
   quality = 80;
+  @ConfigProperty({
+    type: 'boolean',
+    tags:
+      {
+        name: $localize`Use chroma subsampling.`,
+        priority: ConfigPriority.underTheHood
+      },
+    description: $localize`Use high quality chroma subsampling in webp. See: https://sharp.pixelplumbing.com/api-output#webp.`
+  })
+  smartSubsample = true;
   @ConfigProperty({
     type: 'ratio',
     tags: