feat: convert user-attached chat images to WebP at 0.9 quality

Author: Algorithm5838

src/lib/components/chat/MessageInput.svelte

@@ -748,47 +748,35 @@
 				}
 
 				const compressImageHandler = async (imageUrl, settings = {}, config = {}) => {
-					// Quick shortcut so we don’t do unnecessary work.
 					const settingsCompression = settings?.imageCompression ?? false;
 					const configWidth = config?.file?.image_compression?.width ?? null;
 					const configHeight = config?.file?.image_compression?.height ?? null;
 
-					// If neither settings nor config wants compression, return original URL.
-					if (!settingsCompression && !configWidth && !configHeight) {
-						return imageUrl;
-					}
-
-					// Default to null (no compression unless set)
 					let width = null;
 					let height = null;
 
-					// If user/settings want compression, pick their preferred size.
 					if (settingsCompression) {
 						width = settings?.imageCompressionSize?.width ?? null;
 						height = settings?.imageCompressionSize?.height ?? null;
 					}
 
-					// Apply config limits as an upper bound if any
 					if (configWidth && (width === null || width > configWidth)) {
 						width = configWidth;
 					}
 					if (configHeight && (height === null || height > configHeight)) {
 						height = configHeight;
 					}
 
-					// Do the compression if required
-					if (width || height) {
-						return await compressImage(imageUrl, width, height);
-					}
-					return imageUrl;
+					// Single-pass: resize (if needed) and convert to WebP
+					return await compressImage(imageUrl, width, height, 'image/webp', 0.9);
 				};
 
 				let reader = new FileReader();
 
 				reader.onload = async (event) => {
 					let imageUrl = event.target.result;
 
-					// Compress the image if settings or config require it
+					// Compress and convert to WebP in a single canvas pass
 					imageUrl = await compressImageHandler(imageUrl, $settings, $config);
 
 					if ($temporaryChatEnabled) {
@@ -801,9 +789,13 @@
 						];
 					} else {
 						const blob = await (await fetch(imageUrl)).blob();
-						const compressedFile = new File([blob], file.name, { type: file.type });
+						const webpFile = new File(
+							[blob],
+							file.name.replace(/\.[^.]+$/, '.webp'),
+							{ type: 'image/webp' }
+						);
 
-						uploadFileHandler(compressedFile, false);
+						uploadFileHandler(webpFile, false);
 					}
 				};
 

src/lib/utils/index.ts

@@ -359,14 +359,15 @@ async function resizeImageToDataURL(
 	img: HTMLImageElement,
 	width: number,
 	height: number,
-	mimeType = 'image/jpeg'
+	mimeType = 'image/jpeg',
+	quality?: number
 ): Promise<string> {
 	const canvas = document.createElement('canvas');
 	canvas.width = width;
 	canvas.height = height;
 	canvas.getContext('2d')?.drawImage(img, 0, 0, width, height);
 
-	const toDataURL = () => canvas.toDataURL(mimeType);
+	const toDataURL = () => canvas.toDataURL(mimeType, quality);
 
 	if (
 		!resizeImageWarmupDone &&
@@ -375,74 +376,84 @@ async function resizeImageToDataURL(
 	) {
 		resizeImageWarmupDone = true;
 		return new Promise((resolve) => {
-			canvas.toBlob((blob) => {
-				if (!blob) {
-					resolve(toDataURL());
-					return;
-				}
-				const reader = new FileReader();
-				reader.onload = () => resolve(String(reader.result));
-				reader.onerror = () => resolve(toDataURL());
-				reader.readAsDataURL(blob);
-			}, mimeType);
+			canvas.toBlob(
+				(blob) => {
+					if (!blob) {
+						resolve(toDataURL());
+						return;
+					}
+					const reader = new FileReader();
+					reader.onload = () => resolve(String(reader.result));
+					reader.onerror = () => resolve(toDataURL());
+					reader.readAsDataURL(blob);
+				},
+				mimeType,
+				quality
+			);
 		});
 	}
 	return Promise.resolve(toDataURL());
 }
 
-export const compressImage = async (imageUrl, maxWidth, maxHeight) => {
+/**
+ * Calculate constrained dimensions preserving aspect ratio (pure function).
+ */
+function calcResize(
+	srcW: number,
+	srcH: number,
+	maxW?: number | null,
+	maxH?: number | null
+): { width: number; height: number; resized: boolean } {
+	let w = srcW,
+		h = srcH;
+	if (maxW && maxH) {
+		if (w > maxW || h > maxH) {
+			if (w / h > maxW / maxH) {
+				h = Math.round((maxW * h) / w);
+				w = maxW;
+			} else {
+				w = Math.round((maxH * w) / h);
+				h = maxH;
+			}
+			return { width: w, height: h, resized: true };
+		}
+	} else if (maxW && w > maxW) {
+		h = Math.round((maxW * h) / w);
+		w = maxW;
+		return { width: w, height: h, resized: true };
+	} else if (maxH && h > maxH) {
+		w = Math.round((maxH * w) / h);
+		h = maxH;
+		return { width: w, height: h, resized: true };
+	}
+	return { width: w, height: h, resized: false };
+}
+
+export const compressImage = async (
+	imageUrl: string,
+	maxWidth?: number | null,
+	maxHeight?: number | null,
+	outputFormat?: string,
+	quality?: number
+) => {
 	return new Promise((resolve, reject) => {
 		const img = new Image();
 		img.onload = async () => {
-			let width = img.width;
-			let height = img.height;
+			const { width, height, resized } = calcResize(img.width, img.height, maxWidth, maxHeight);
 
-			// Maintain aspect ratio while resizing
-
-			if (maxWidth && maxHeight) {
-				// Resize with both dimensions defined (preserves aspect ratio)
-
-				if (width <= maxWidth && height <= maxHeight) {
-					resolve(imageUrl);
-					return;
-				}
-
-				if (width / height > maxWidth / maxHeight) {
-					height = Math.round((maxWidth * height) / width);
-					width = maxWidth;
-				} else {
-					width = Math.round((maxHeight * width) / height);
-					height = maxHeight;
-				}
-			} else if (maxWidth) {
-				// Only maxWidth defined
-
-				if (width <= maxWidth) {
-					resolve(imageUrl);
-					return;
-				}
-
-				height = Math.round((maxWidth * height) / width);
-				width = maxWidth;
-			} else if (maxHeight) {
-				// Only maxHeight defined
-
-				if (height <= maxHeight) {
-					resolve(imageUrl);
-					return;
-				}
-
-				width = Math.round((maxHeight * width) / height);
-				height = maxHeight;
+			if (!resized && !outputFormat) {
+				resolve(imageUrl);
+				return;
 			}
 
-			const mimeType = imageUrl.match(/^data:([^;]+);/)?.[1] ?? 'image/jpeg';
-			resolve(await resizeImageToDataURL(img, width, height, mimeType));
+			const mimeType = outputFormat || (imageUrl.match(/^data:([^;]+);/)?.[1] ?? 'image/jpeg');
+			resolve(await resizeImageToDataURL(img, width, height, mimeType, quality));
 		};
 		img.onerror = (error) => reject(error);
 		img.src = imageUrl;
 	});
 };
+
 export const generateInitialsImage = (name) => {
 	const canvas = document.createElement('canvas');
 	const ctx = canvas.getContext('2d');