image fixes

front/js/svelte/files/Preview.svelte

@@ -1,6 +1,6 @@
 <script>
     import Icon from "../common/Icon.svelte";
-    import { imgurl } from "./imageserver.js";
+    import { fileurl, imgurl } from "./imageserver.js";
     import { getContext } from "svelte";
 
     export let file;
@@ -11,7 +11,6 @@
     let fileSide;
     let fontSize;
 
-    console.log({ channel });
     if (size == "large") {
         imageSide = 256;
         fileSide = 32;
@@ -36,7 +35,8 @@
         {#if file.mime.startsWith("image")}
             <!-- href={imgurl(record)} -->
             <a
-                href="{channel.lucentUrl}/files/{file.id}"
+                target="_blank"
+                href={fileurl(channel, file)}
                 title={file.filename}
                 style="width:{imageSide}px;height:{imageSide}px"
             >

front/js/svelte/files/imageserver.js

@@ -2,7 +2,8 @@ export function imgurl(channel, file) {
   if (file.mime === "image/svg+xml") {
     return fileurl(channel, file);
   }
-  return channel.filesUrl + `/thumbs/${file.path}`;
+  const webpPath = file.path.slice(0, file.path.lastIndexOf(".")) + ".webp";
+  return channel.filesUrl + `/thumbs/${webpPath}`;
 }
 
 export function fileurl(channel, file) {
@@ -16,7 +17,8 @@ export function htmlurl(channel, file, preset) {
   if (file.width > 0) {
     let presetUrl = url;
     if (preset) {
-      presetUrl = channel.filesUrl + `/templates/${preset}/${file.path}`;
+      const webpPath = file.path.slice(0, file.path.lastIndexOf(".")) + ".webp";
+      presetUrl = channel.filesUrl + `/templates/${preset}/${webpPath}`;
     }
     html = `<img src="${presetUrl}" alt="${file.path}" />`;
   } else if (file.mime === "image/svg+xml") {