Fix #26: Scale images to the correct size and use more efficient image formats

src/lib/components/AvatarComponent.svelte

@@ -6,8 +6,23 @@
   let sourceSetHtml: string;
   $: avatarDescription = `Avatar for ${account.acct}`;
   $: {
+    // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
+    // We need the best format to be first
+    const formatPriority = new Map<string, number>([
+      ['avif', 0],
+      ['webp', 1],
+      ['jpg', 99],
+      ['jpeg', 99]
+    ]);
+    const resizedAvatars = (account.resizedAvatars ?? []).sort((a, b) => {
+      const extensionA = a.file.split('.').pop() ?? '';
+      const extensionB = b.file.split('.').pop() ?? '';
+      const prioA = formatPriority.get(extensionA) ?? 3;
+      const prioB = formatPriority.get(extensionB) ?? 3;
+      return prioA - prioB;
+    });
     const m = new Map<string, string[]>();
-    for (const resizedAvatar of account.resizedAvatars ?? []) {
+    for (const resizedAvatar of resizedAvatars) {
       const extension = resizedAvatar.file.split('.').pop();
       const mime = extension ? `image/${extension}` : 'application/octet-stream';
       const sourceSetEntry = `${resizedAvatar.file} ${resizedAvatar.sizeDescriptor}`;