feat(website): switch assets to webp

apps/website/src/pages/Home/index.tsx

@@ -56,13 +56,13 @@ function HeroSection() {
 
     switch (platform) {
         case "macos":
-            screenshotUrl = `/screenshot_desktop_mac_${colorScheme}.png`;
+            screenshotUrl = `/screenshot_desktop_mac_${colorScheme}.webp`;
             break;
         case "linux":
             break;
         case "windows":
         default:
-            screenshotUrl = `/screenshot_desktop_win_${colorScheme}.png`;
+            screenshotUrl = `/screenshot_desktop_win_${colorScheme}.webp`;
             break;
     }
 
@@ -126,42 +126,42 @@ function NoteTypesSection() {
             <ListWithScreenshot horizontal items={[
                 {
                     title: "Text notes",
-                    imageUrl: "/type_text.png",
+                    imageUrl: "/type_text.webp",
                     iconSvg: textNoteIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Text/index.html",
                     description: "The notes are edited using a visual (WYSIWYG) editor, with support for tables, images, math expressions, code blocks with syntax highlighting. Quickly format the text using Markdown-like syntax or using slash commands."
                 },
                 {
                     title: "Code notes",
-                    imageUrl: "/type_code.png",
+                    imageUrl: "/type_code.webp",
                     iconSvg: codeIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Code.html",
                     description: "Large samples of source code or scripts use a dedicated editor, with syntax highlighting for many programming languages and with various color themes."
                 },
                 {
                     title: "File notes",
-                    imageUrl: "/type_file.png",
+                    imageUrl: "/type_file.webp",
                     iconSvg: fileIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/File.html",
                     description: "Embed multimedia files such as PDFs, images, videos with an in-application preview."
                 },
                 {
                     title: "Canvas",
-                    imageUrl: "/type_canvas.png",
+                    imageUrl: "/type_canvas.webp",
                     iconSvg: canvasIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Canvas.html",
                     description: "Arrange shapes, images and text across an infinite canvas, using the same technology behind excalidraw.com. Ideal for diagrams, sketches and visual planning."
                 },
                 {
                     title: "Mermaid diagrams",
-                    imageUrl: "/type_mermaid.png",
+                    imageUrl: "/type_mermaid.webp",
                     iconSvg: mermaidIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mermaid%20Diagrams/index.html",
                     description: "Create diagrams such as flowcharts, class & sequence diagrams, Gantt charts and many more, using the Mermaid syntax."
                 },
                 {
                     title: "Mindmap",
-                    imageUrl: "/type_mindmap.png",
+                    imageUrl: "/type_mindmap.webp",
                     iconSvg: mindmapIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Mind%20Map.html",
                     description: "Organize your thoughts visually or do a brainstorming session."
@@ -200,7 +200,7 @@ function CollectionsSection() {
             <ListWithScreenshot items={[
                 {
                     title: "Calendar",
-                    imageUrl: "/collection_calendar.png",
+                    imageUrl: "/collection_calendar.webp",
                     iconSvg: calendarIcon,
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Calendar%20View.html",
                     description: "Organize your personal or professional events using a calendar, with support for all-day and multi-day events. See your events at a glance with the week, month and year views. Easy interaction to add or drag events."
@@ -208,20 +208,20 @@ function CollectionsSection() {
                 {
                     title: "Table",
                     iconSvg: tableIcon,
-                    imageUrl: "/collection_table.png",
+                    imageUrl: "/collection_table.webp",
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Table%20View.html",
                     description: "Display and edit information about notes in a tabular structure, with various column types such as text, number, check boxes, date & time, links and colors and support for relations. Optionally, display the notes within a tree hierarchy inside the table." },
                 {
                     title: "Board",
                     iconSvg: boardIcon,
-                    imageUrl: "/collection_board.png",
+                    imageUrl: "/collection_board.webp",
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Board%20View.html",
                     description: "Organize your tasks or project status into a Kanban board with an easy way to create new items and columns and simply changing their status by dragging across the board."
                 },
                 {
                     title: "Geomap",
                     iconSvg: geomapIcon,
-                    imageUrl: "/collection_geomap.png",
+                    imageUrl: "/collection_geomap.webp",
                     moreInfo: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Note%20Types/Collections/Geo%20Map%20View.html",
                     description: "Plan your vacations or mark your points of interest directly on a geographical map using customizable markers. Display recorded GPX tracks to track itineraries."
                 }