fix(media): "Compress image" no longer blackens transparent images or freezes animations (#331)

Compression re-encodes through a canvas to JPEG. Only PNG was skipped,
so a transparent WebP came out on a black background, and an animated
GIF or WebP became one still frame. GIF and APNG are no longer offered;
an animated WebP (VP8X animation flag) or any image with a transparent
pixel is kept as the original.

Fixes #331

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/utils/imageCompression.test.ts

@@ -1,6 +1,11 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { formatFileSize, isCompressible } from './imageCompression';
+import {
+  formatFileSize,
+  hasTransparency,
+  isAnimatedWebp,
+  isCompressible,
+} from './imageCompression';
 
 test('formatFileSize formats bytes below 1KB as B', () => {
   assert.equal(formatFileSize(0), '0 B');
@@ -25,14 +30,38 @@ test('formatFileSize formats values in the MB range', () => {
 test('isCompressible accepts raster image types', () => {
   assert.equal(isCompressible({ type: 'image/png' } as Blob), true);
   assert.equal(isCompressible({ type: 'image/jpeg' } as Blob), true);
-  assert.equal(isCompressible({ type: 'image/gif' } as Blob), true);
   assert.equal(isCompressible({ type: 'image/webp' } as Blob), true);
 });
 
 test('isCompressible rejects svg, empty type, and non-images', () => {
   assert.equal(isCompressible({ type: 'image/svg+xml' } as Blob), false);
+  // [Gitea #331] usually animated; a canvas keeps one frame
+  assert.equal(isCompressible({ type: 'image/gif' } as Blob), false);
+  assert.equal(isCompressible({ type: 'image/apng' } as Blob), false);
   assert.equal(isCompressible({ type: '' } as Blob), false);
   assert.equal(isCompressible({ type: 'application/pdf' } as Blob), false);
   assert.equal(isCompressible({ type: 'text/plain' } as Blob), false);
   assert.equal(isCompressible({ type: 'video/mp4' } as Blob), false);
 });
+
+const webpHeader = (chunk: string, flags = 0) => {
+  const b = new Uint8Array(32);
+  const put = (at: number, str: string) => b.set(new TextEncoder().encode(str), at);
+  put(0, 'RIFF');
+  put(8, 'WEBP');
+  put(12, chunk);
+  b[20] = flags;
+  return b;
+};
+
+test('isAnimatedWebp: VP8X with the animation flag (#331)', () => {
+  assert.equal(isAnimatedWebp(webpHeader('VP8X', 0x02)), true);
+  assert.equal(isAnimatedWebp(webpHeader('VP8X', 0x10)), false, 'alpha flag only');
+  assert.equal(isAnimatedWebp(webpHeader('VP8 ')), false, 'simple lossy');
+  assert.equal(isAnimatedWebp(new Uint8Array(8)), false);
+});
+
+test('hasTransparency (#331)', () => {
+  assert.equal(hasTransparency(new Uint8ClampedArray([1, 2, 3, 255, 4, 5, 6, 255])), false);
+  assert.equal(hasTransparency(new Uint8ClampedArray([1, 2, 3, 255, 0, 0, 0, 0])), true);
+});