lazy load images only starting with the fifth post

src/lib/components/AvatarComponent.svelte

@@ -3,10 +3,12 @@
 
   interface Props {
     account: Account;
+    lazyLoadImages: Boolean;
   }
 
-  let { account }: Props = $props();
+  let { account, lazyLoadImages = true }: Props = $props();
   let avatarDescription: string = $derived(`Avatar for ${account.acct}`);
+  let loadingProp = $derived(lazyLoadImages ? 'lazy' : 'eager');
   let sourceSetHtml: string = $derived.by(() => {
     // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
     // We need the best format to be first
@@ -41,7 +43,7 @@
 
 <picture>
   {@html sourceSetHtml}
-  <img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
+  <img src={account.avatar} alt={avatarDescription} loading={loadingProp} width="50" height="50" />
 </picture>
 
 <style>

src/lib/components/PostComponent.svelte

@@ -8,9 +8,10 @@
 
   interface Props {
     post: Post;
+    lazyLoadImages: Boolean;
   }
 
-  let { post }: Props = $props();
+  let { post, lazyLoadImages = true }: Props = $props();
   let displayRelativeTime = $state(false);
   const absoluteDate = new Date(post.created_at).toLocaleString();
   const timePassed = secondsSince(new Date(post.created_at));
@@ -20,6 +21,7 @@
     }
     return absoluteDate;
   });
+  let loadingProp = $derived(lazyLoadImages ? 'lazy' : 'eager');
 
   const songs = filterDuplicates(post.songs ?? []);
 
@@ -115,7 +117,7 @@
 </script>
 
 <div class="wrapper">
-  <div class="avatar"><AvatarComponent account={post.account} /></div>
+  <div class="avatar"><AvatarComponent account={post.account} {lazyLoadImages} /></div>
   <div class="account"><AccountComponent account={post.account} /></div>
   <div class="meta">
     <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
@@ -127,7 +129,12 @@
         <div class="info-wrapper">
           <picture>
             {@html getSourceSetHtml(song)}
-            <img class="bgimage" src={song.thumbnailUrl} loading="lazy" alt="Blurred cover" />
+            <img
+              class="bgimage"
+              src={song.thumbnailUrl}
+              loading={loadingProp}
+              alt="Blurred cover"
+            />
           </picture>
           <a href={song.pageUrl ?? song.postedUrl} target="_blank">
             <div class="info">
@@ -136,7 +143,7 @@
                 <img
                   src={song.thumbnailUrl}
                   alt="Cover for {song.artistName} - {song.title}"
-                  loading="lazy"
+                  loading={loadingProp}
                   width={song.thumbnailWidth}
                   height={song.thumbnailHeight}
                 />
@@ -193,6 +200,12 @@
     border-radius: 3px;
     margin-bottom: 3px;
   }
+  .cover img {
+    max-width: 200px;
+    max-height: 200px;
+    object-fit: contain;
+    border-radius: 3px;
+  }
   .bgimage {
     display: none;
     background-color: var(--color-bg);
@@ -231,6 +244,10 @@
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }
+    .cover img {
+      max-width: 60px;
+      max-height: 60px;
+    }
     .bgimage {
       display: block;
       width: 100%;

src/routes/+page.svelte

@@ -163,7 +163,7 @@
     {#if posts.length === 0}
       Sorry, no posts recommending music have been found yet
     {/if}
-    {#each posts as post (post.url)}
+    {#each posts as post, index (post.url)}
       <div
         class="post"
         transition:edgeFly|global={{
@@ -173,7 +173,7 @@
           easing: cubicInOut
         }}
       >
-        <PostComponent {post} />
+        <PostComponent {post} lazyLoadImages={index >= 4} />
       </div>
     {/each}
     <LoadMoreComponent