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

Author: Algorithm5838

src/lib/components/chat/MessageInput.svelte

@@ -40,6 +40,7 @@
 	import {
 		convertHeicToJpeg,
 		compressImage,
+		convertToWebP,
 		createMessagesList,
 		extractContentFromFile,
 		extractCurlyBraceWords,
@@ -783,6 +784,9 @@
 					// Compress the image if settings or config require it
 					imageUrl = await compressImageHandler(imageUrl, $settings, $config);
 
+					// Convert to WebP at 0.9 quality for smaller payload
+					imageUrl = await convertToWebP(imageUrl, 0.9);
+
 					if ($temporaryChatEnabled) {
 						files = [
 							...files,
@@ -793,9 +797,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

@@ -372,6 +372,20 @@ export const compressImage = async (imageUrl, maxWidth, maxHeight) => {
 		img.src = imageUrl;
 	});
 };
+export const convertToWebP = (imageUrl: string, quality = 0.9): Promise<string> =>
+	new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => {
+			const canvas = document.createElement('canvas');
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			canvas.getContext('2d')!.drawImage(img, 0, 0);
+			resolve(canvas.toDataURL('image/webp', quality));
+		};
+		img.onerror = reject;
+		img.src = imageUrl;
+	});
+
 export const generateInitialsImage = (name) => {
 	const canvas = document.createElement('canvas');
 	const ctx = canvas.getContext('2d');