optimize img tag

src/components/user/base.tsx

@@ -11,7 +11,13 @@ export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
   return (
     <div className="flex items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-full object-cover" />
+        <img
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          className="h-11 w-11 rounded-full object-cover"
+          loading="lazy"
+          fetchpriority="high"
+        />
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
         <span className="truncate font-medium leading-tight text-zinc-200">

src/components/user/extend.tsx

@@ -14,7 +14,13 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
   return (
     <div className="group flex h-11 items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
-        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-md object-cover" />
+        <img
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          className="h-11 w-11 rounded-md object-cover"
+          loading="lazy"
+          fetchpriority="high"
+        />
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex flex-col gap-1">

src/components/user/follow.tsx

@@ -9,7 +9,13 @@ export const UserFollow = ({ pubkey }: { pubkey: string }) => {
   return (
     <div className="flex items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-full object-cover" />
+        <img
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          className="h-11 w-11 rounded-full object-cover"
+          loading="lazy"
+          fetchpriority="high"
+        />
       </div>
       <div className="flex w-full flex-1 flex-col items-start text-start">
         <span className="truncate font-medium leading-tight text-zinc-200">

src/components/user/large.tsx

@@ -19,6 +19,8 @@ export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) =>
           src={profile?.picture || DEFAULT_AVATAR}
           alt={pubkey}
           className="h-11 w-11 rounded-md border border-white/10 object-cover"
+          loading="lazy"
+          fetchpriority="high"
         />
       </div>
       <div className="w-full flex-1">

src/components/user/mini.tsx

@@ -9,7 +9,13 @@ export const UserMini = ({ pubkey }: { pubkey: string }) => {
   return (
     <div className="group flex items-start gap-1">
       <div className="relative h-7 w-7 shrink overflow-hidden rounded border border-white/10">
-        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-7 w-7 rounded object-cover" />
+        <img
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          className="h-7 w-7 rounded object-cover"
+          loading="lazy"
+          fetchpriority="high"
+        />
       </div>
       <span className="text-xs font-medium leading-none text-zinc-500">
         Replying to {profile?.name || shortenKey(pubkey)}

src/components/user/quoteRepost.tsx

@@ -14,7 +14,13 @@ export const UserQuoteRepost = ({ pubkey, time }: { pubkey: string; time: number
   return (
     <div className="group flex items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
-        <img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-11 w-11 rounded-md object-cover" />
+        <img
+          src={profile?.picture || DEFAULT_AVATAR}
+          alt={pubkey}
+          className="h-11 w-11 rounded-md object-cover"
+          loading="lazy"
+          fetchpriority="high"
+        />
       </div>
       <div className="flex items-baseline gap-2 text-sm">
         <h5 className="font-semibold leading-tight group-hover:underline">