chore: change image output format from Webp to Avif

Use AVIF over WebP because it results in a smaller file

Author: stnguyen90

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>

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>

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'
         );

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) =>