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 {

src/lib/components/PostComponent.svelte

@@ -33,13 +33,14 @@
     {#if post.songs}
       {#each post.songs as song (song.pageUrl)}
         <div class="info-wrapper">
-          <div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
+          <img class="bgimage" src={song.thumbnailUrl} loading="lazy" alt="Blurred cover" />
           <a href={song.pageUrl ?? song.postedUrl} target="_blank">
             <div class="info">
               <img
                 src={song.thumbnailUrl}
                 class="cover"
                 alt="Cover for {song.artistName} - {song.title}"
+                loading="lazy"
               />
               <span class="text">{song.artistName} - {song.title}</span>
             </div>