fix: skip redundant client-side re-encoding for small images and add MIME type inference from extension

Small images (≤10MB) no longer get re-encoded to JPEG on the client,
preserving quality and transparency. Adds extension-based MIME type
fallback for browsers that don't report file.type (e.g. HEIC on desktop).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: aster-void

src/lib/components/image-upload.svelte

@@ -3,6 +3,7 @@
 	import { removeByUrl, upload } from "$lib/data/private/storage.remote";
 	import {
 		type AllowedFolder,
+		inferImageType,
 		isAcceptedImageType,
 		isAllowedFolder,
 	} from "$lib/shared/logic/image";
@@ -34,8 +35,10 @@
 	async function handleFile(file: File, fromPaste = false) {
 		error = null;
 
-		// Validate file type
-		if (!isAcceptedImageType(file.type)) {
+		// Resolve MIME type: use file.type, or infer from extension as fallback
+		// (some browsers report empty type for HEIC/HEIF)
+		const resolvedType = isAcceptedImageType(file.type) ? file.type : inferImageType(file.name);
+		if (!resolvedType) {
 			error = "Unsupported image format";
 			return;
 		}
@@ -65,8 +68,8 @@
 		try {
 			const arrayBuffer = await processedFile.arrayBuffer();
 			const base64 = arrayBufferToBase64(arrayBuffer);
-			// Use the validated original type - server will re-compress to WebP anyway
-			const uploadType = isAcceptedImageType(processedFile.type) ? processedFile.type : file.type;
+			// Use processed file's type if valid, otherwise fall back to resolved type
+			const uploadType = isAcceptedImageType(processedFile.type) ? processedFile.type : resolvedType;
 			const result = await upload({
 				data: base64,
 				type: uploadType,

src/lib/shared/logic/image-processing.ts

@@ -12,12 +12,14 @@ export function arrayBufferToBase64(buffer: ArrayBuffer): string {
 }
 
 export async function compressImage(file: File): Promise<File> {
-  // Skip if not an image that can be compressed
-  if (!file.type.startsWith("image/") || file.type === "image/gif") {
+  const SERVER_LIMIT = 10 * 1024 * 1024; // 10MB DoS protection limit
+
+  // Skip if not an image that can be compressed via canvas,
+  // or if already small enough (server handles format conversion anyway)
+  if (!file.type.startsWith("image/") || file.type === "image/gif" || file.size <= SERVER_LIMIT) {
     return file;
   }
 
-  const SERVER_LIMIT = 10 * 1024 * 1024; // 10MB DoS protection limit
   const QUALITY_STEPS = [0.9, 0.7, 0.5, 0.3];
   const DIMENSION_STEPS = [1920, 1440, 1080, 720];
 

src/lib/shared/logic/image.ts

@@ -24,6 +24,35 @@ export function isAcceptedImageType(type: string): type is AcceptedImageType {
   return ACCEPTED_IMAGE_TYPES.some((t) => t === type);
 }
 
+/**
+ * Extension-to-MIME mapping for when browsers don't report file.type
+ * (common with HEIC/HEIF on desktop browsers)
+ */
+const EXTENSION_TO_MIME: Record<string, AcceptedImageType> = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  webp: "image/webp",
+  avif: "image/avif",
+  heic: "image/heic",
+  heif: "image/heif",
+  gif: "image/gif",
+  tiff: "image/tiff",
+  tif: "image/tiff",
+  svg: "image/svg+xml",
+  bmp: "image/bmp",
+};
+
+/**
+ * Infer MIME type from file extension (case-insensitive).
+ * Returns undefined if extension is not recognized.
+ */
+export function inferImageType(filename: string): AcceptedImageType | undefined {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  if (!ext) return undefined;
+  return EXTENSION_TO_MIME[ext];
+}
+
 /**
  * Allowed folder paths for uploads
  */