From dff0bee7484fd65927cb9b85780ada2922986768 Mon Sep 17 00:00:00 2001 From: tamaina Date: Sun, 12 Mar 2023 17:31:52 +0900 Subject: [PATCH] fix: Do not use avif (#10301) * fix: Do not use avif * fix * fix --- CHANGELOG.md | 3 ++- packages/backend/src/core/DriveService.ts | 4 ++-- .../src/core/entities/DriveFileEntityService.ts | 2 +- packages/backend/src/server/FileServerService.ts | 10 +++++----- packages/backend/src/server/web/UrlPreviewService.ts | 2 +- packages/frontend/src/scripts/media-proxy.ts | 4 ++-- 6 files changed, 13 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3aaa4524d..13102ef7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,8 @@ You should also include the user name that made the change. - enhance(client): DM作成時にメンションも含むように - enhance(client): フォロー申請のボタンのデザインを改善 - enhance(backend): OpenAPIエンドポイントを復旧 -- 透明なWebP/AVIF映像はJPEGではなくWebPに変換するように +- WebP/AVIF/JPEGのweb公開用画像は、サーバーサイドではJPEGではなくWebPに変換するように +- アニメーション画像のサムネイルを生成するように - アクティブユーザー数チャートの記録上限値を拡張 - Playのソースコード上限文字数を2倍に拡張 - 付箋ウィジェットの高さを設定可能に diff --git a/packages/backend/src/core/DriveService.ts b/packages/backend/src/core/DriveService.ts index 7eccf4b3b..f1e93d6dd 100644 --- a/packages/backend/src/core/DriveService.ts +++ b/packages/backend/src/core/DriveService.ts @@ -295,7 +295,7 @@ export class DriveService { satisfyWebpublic = !!( type !== 'image/svg+xml' && // security reason - type !== 'image/avif' && // not supported by Mastodon + type !== 'image/avif' && // not supported by Mastodon and MS Edge !(metadata.exif ?? metadata.iptc ?? metadata.xmp ?? metadata.tifftagPhotoshop) && metadata.width && metadata.width <= 2048 && metadata.height && metadata.height <= 2048 @@ -339,7 +339,7 @@ export class DriveService { if (isAnimated) { thumbnail = await this.imageProcessingService.convertSharpToWebp(sharp(path, { animated: true }), 374, 317, { alphaQuality: 70 }); } else { - thumbnail = await this.imageProcessingService.convertSharpToAvif(img, 498, 422); + thumbnail = await this.imageProcessingService.convertSharpToWebp(img, 498, 422); } } catch (err) { this.registerLogger.warn('thumbnail not created (an error occured)', err as Error); diff --git a/packages/backend/src/core/entities/DriveFileEntityService.ts b/packages/backend/src/core/entities/DriveFileEntityService.ts index 1a6913b80..2d40f444c 100644 --- a/packages/backend/src/core/entities/DriveFileEntityService.ts +++ b/packages/backend/src/core/entities/DriveFileEntityService.ts @@ -76,7 +76,7 @@ export class DriveFileEntityService { @bindThis private getProxiedUrl(url: string, mode?: 'static' | 'avatar'): string { return appendQuery( - `${this.config.mediaProxy}/${mode ?? 'image'}.${mode === 'avatar' ? 'webp' : 'avif'}`, + `${this.config.mediaProxy}/${mode ?? 'image'}.webp`, query({ url, ...(mode ? { [mode]: '1' } : {}), diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts index fb1c67f20..794fa76d9 100644 --- a/packages/backend/src/server/FileServerService.ts +++ b/packages/backend/src/server/FileServerService.ts @@ -130,7 +130,7 @@ export class FileServerService { if (isMimeImage(file.mime, 'sharp-convertible-image-with-bmp')) { reply.header('Cache-Control', 'max-age=31536000, immutable'); - const url = new URL(`${this.config.mediaProxy}/static.avif`); + const url = new URL(`${this.config.mediaProxy}/static.webp`); url.searchParams.set('url', file.url); url.searchParams.set('static', '1'); @@ -151,7 +151,7 @@ export class FileServerService { if (['image/svg+xml'].includes(file.mime)) { reply.header('Cache-Control', 'max-age=31536000, immutable'); - const url = new URL(`${this.config.mediaProxy}/svg.avif`); + const url = new URL(`${this.config.mediaProxy}/svg.webp`); url.searchParams.set('url', file.url); file.cleanup(); @@ -291,9 +291,9 @@ export class FileServerService { }; } } else if ('static' in request.query) { - image = this.imageProcessingService.convertSharpToAvifStream(await sharpBmp(file.path, file.mime), 498, 422); + image = this.imageProcessingService.convertSharpToWebpStream(await sharpBmp(file.path, file.mime), 498, 422); } else if ('preview' in request.query) { - image = this.imageProcessingService.convertSharpToAvifStream(await sharpBmp(file.path, file.mime), 200, 200); + image = this.imageProcessingService.convertSharpToWebpStream(await sharpBmp(file.path, file.mime), 200, 200); } else if ('badge' in request.query) { const mask = (await sharpBmp(file.path, file.mime)) .resize(96, 96, { @@ -325,7 +325,7 @@ export class FileServerService { type: 'image/png', }; } else if (file.mime === 'image/svg+xml') { - image = this.imageProcessingService.convertToAvifStream(file.path, 2048, 2048); + image = this.imageProcessingService.convertToWebpStream(file.path, 2048, 2048); } else if (!file.mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(file.mime)) { throw new StatusError('Rejected type', 403, 'Rejected type'); } diff --git a/packages/backend/src/server/web/UrlPreviewService.ts b/packages/backend/src/server/web/UrlPreviewService.ts index 5f4d53d0e..2ce7293a5 100644 --- a/packages/backend/src/server/web/UrlPreviewService.ts +++ b/packages/backend/src/server/web/UrlPreviewService.ts @@ -33,7 +33,7 @@ export class UrlPreviewService { private wrap(url?: string | null): string | null { return url != null ? url.match(/^https?:\/\//) - ? `${this.config.mediaProxy}/preview.avif?${query({ + ? `${this.config.mediaProxy}/preview.webp?${query({ url, preview: '1', })}` diff --git a/packages/frontend/src/scripts/media-proxy.ts b/packages/frontend/src/scripts/media-proxy.ts index d0c95e0b7..91ac14c06 100644 --- a/packages/frontend/src/scripts/media-proxy.ts +++ b/packages/frontend/src/scripts/media-proxy.ts @@ -11,7 +11,7 @@ export function getProxiedImageUrl(imageUrl: string, type?: 'preview', mustOrigi } return `${mustOrigin ? localProxy : instance.mediaProxy}/${ - type === 'preview' ? 'preview.avif' + type === 'preview' ? 'preview.webp' : 'image.webp' }?${query({ url: imageUrl, @@ -41,7 +41,7 @@ export function getStaticImageUrl(baseUrl: string): string { return u.href; } - return `${instance.mediaProxy}/static.avif?${query({ + return `${instance.mediaProxy}/static.webp?${query({ url: u.href, static: '1', })}`;