From 2dbdb5b7525f5a9d98dde030f55b9955d4043421 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <1477010+stnguyen90@users.noreply.github.com>
Date: Wed, 22 Oct 2025 16:22:26 -0700
Subject: [PATCH] chore: change image output format from Webp to Avif

Use AVIF over WebP because it results in a smaller file
---
 .../sites/(components)/siteCard.svelte                       | 2 +-
 .../(console)/project-[region]-[project]/sites/grid.svelte   | 2 +-
 .../storage/bucket-[bucket]/+page.svelte                     | 5 +++--
 .../storage/bucket-[bucket]/file-[file]/+page.svelte         | 5 +++--
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
index 95562c0add..74d8d9b0f9 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -51,7 +51,7 @@
             fileId,
             width: 1024,
             height: 576,
-            output: ImageFormat.Webp
+            output: ImageFormat.Avif
         });
     }
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/grid.svelte b/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
index 46b68f7cc7..99029389ea 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/grid.svelte
@@ -38,7 +38,7 @@
             fileId,
             width: 1024,
             height: 576,
-            output: ImageFormat.Webp
+            output: ImageFormat.Avif
         });
     }
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
index 198daff577..a4ae7b082a 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
@@ -9,7 +9,7 @@
     import { Button } from '$lib/elements/forms';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Container } from '$lib/layout';
-    import type { Models } from '@appwrite.io/console';
+    import { ImageFormat, type Models } from '@appwrite.io/console';
     import { addNotification } from '$lib/stores/notifications';
     import { uploader } from '$lib/stores/uploader';
     import { sdk } from '$lib/stores/sdk.js';
@@ -53,7 +53,8 @@
                     bucketId,
                     fileId,
                     height: 128,
-                    width: 128
+                    width: 128,
+                    output: ImageFormat.Avif
                 })
                 .toString() + '&mode=admin'
         );
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index 04f5219a41..a940dc8f6f 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -35,7 +35,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import FileTokensCopyUrl from './fileTokensCopyUrl.svelte';
     import ManageFileTokenModal, { cleanFormattedDate } from './manageFileToken.svelte';
-    import { type Models } from '@appwrite.io/console';
+    import { ImageFormat, type Models } from '@appwrite.io/console';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { Menu } from '$lib/components/menu';
 
@@ -57,7 +57,8 @@
                 bucketId: $file.bucketId,
                 fileId,
                 width: 640,
-                height: 300
+                height: 300,
+                output: ImageFormat.Avif
             })
             .toString() + '&mode=admin';
     const getView = (fileId: string) =>