#13 use webp instead of jpeg/png

proxy.conf.json

@@ -1,12 +1,12 @@
 {
-    "/api": {
-      "target": "http://localhost:3000",
-      "secure": false,
-      "changeOrigin": true
-    },
-    "/debug_images": {
-      "target": "http://localhost:8080",
-      "secure": false,
-      "changeOrigin": true
-    }
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "changeOrigin": true
+  },
+  "/images": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "changeOrigin": true
   }
+}

src/app/deck-list.component.html

@@ -67,7 +67,7 @@
             <div class="flex items-center space-x-2">
               <div class="relative group">
                 <div class="absolute left-0 bottom-full mb-2 w-48 bg-white border border-gray-300 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 pointer-events-none">
-                  <img src="/debug_images/{{ image.bildid }}/thumbnail.jpg" alt="{{ image.name }}" class="w-full h-auto object-cover" />
+                  <img src="/images/{{ image.bildid }}/thumbnail.webp" alt="{{ image.name }}" class="w-full h-auto object-cover" />
                 </div>
                 <span class="font-medium cursor-pointer">{{ image.name }}</span>
               </div>

src/app/deck-list.component.ts

@@ -167,7 +167,7 @@ export class DeckListComponent implements OnInit {
   // Method to edit an image in a deck
   editImage(deck: Deck, image: DeckImage): void {
     let imageSrc = null;
-    fetch(`/debug_images/${image.bildid}/original_compressed.jpg`)
+    fetch(`/images/${image.bildid}/original.webp`)
       .then(response => {
         if (!response.ok) {
           throw new Error('Network response was not ok');

src/app/training/training.component.ts

@@ -125,7 +125,7 @@ export class TrainingComponent implements OnInit {
     if (!ctx || !this.currentImageData) return;
 
     const img = new Image();
-    img.src = `/debug_images/${this.currentImageData.bildid}/original_compressed.jpg`;
+    img.src = `/images/${this.currentImageData.bildid}/original.webp`;
     img.onload = () => {
       // Set the canvas size to the image size
       canvas.width = img.width;