Convert and resize avatars to fit the displayed images

src/lib/components/AvatarComponent.svelte

@@ -3,10 +3,29 @@
 
   export let account: Account;
   let avatarDescription: string;
+  let sourceSetHtml: string;
   $: avatarDescription = `Avatar for ${account.acct}`;
+  $: {
+    const m = new Map<string, string[]>();
+    for (const resizedAvatar of account.resizedAvatars ?? []) {
+      const extension = resizedAvatar.file.split('.').pop();
+      const mime = extension ? `image/${extension}` : 'application/octet-stream';
+      const sourceSetEntry = `${resizedAvatar.file} ${resizedAvatar.sizeDescriptor}`;
+      m.set(mime, [...(m.get(mime) || []), sourceSetEntry]);
+    }
+    let html = '';
+    for (const entry of m.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" />`;
+    }
+    sourceSetHtml = html;
+  }
 </script>
 
-<img src={account.avatar} alt={avatarDescription} />
+<picture>
+  {@html sourceSetHtml}
+  <img src={account.avatar} alt={avatarDescription} loading="lazy" />
+</picture>
 
 <style>
   img {