optimize profile image

src/components/profileFollows.js

@@ -1,16 +1,25 @@
 import { getNpub } from "../common";
+import ProfileImage from "./profileImage";
 
 const ProfileFollows = ({ follows = [], options }) => {
     if (!options?.showFollowing) return <></>
+
+    const getCachedImage = (pubkey) => {
+        return `https://media.nostr.band/thumbs/${pubkey.slice(-4)}/${pubkey}-picture-64`
+    }
+
     const parsedFollows = follows.slice(0, 10).map(follow => {
         const content = JSON.parse(follow.content)
         return {
             id: follow?.id,
             npubLink: `https://nostr.band/${getNpub(follow?.pubkey)}`,
             display_name: content?.display_name,
-            picture: content?.picture
+            picture: content?.picture,
+            cachedImage: getCachedImage(follow?.pubkey)
         }
     })
+
+
     return (
         <div>
             <hr />
@@ -21,7 +30,10 @@ const ProfileFollows = ({ follows = [], options }) => {
                             return (
                                 <li key={follow?.id}>
                                     <a rel="noopener noreferrer nofollow" target="_blank" href={follow.npubLink}>
-                                        <img className='ne-rounded-full ne-ms-[-25px] ne-object-cover ne-w-[40px]' src={follow?.picture} alt='follows image' height="40" />
+                                        <ProfileImage
+                                            fullImage={follow?.picture}
+                                            thumbnail={follow?.cachedImage}
+                                            isProfileImage={false} />
                                     </a>
                                 </li>
                             )

src/components/profileImage.js

@@ -1,7 +1,7 @@
 import { useState } from "preact/hooks";
 import "./style.css";
 
-function ProfileImage({ thumbnail, fullImage }) {
+function ProfileImage({ thumbnail, fullImage, isProfileImage = true }) {
   const [isFullImageLoaded, setIsFullImageLoaded] = useState(false);
   const [imageSrc, setImageSrc] = useState(thumbnail);
 
@@ -15,7 +15,8 @@ function ProfileImage({ thumbnail, fullImage }) {
   };
 
   return imageSrc ? (
-    <img className="profileImg" src={imageSrc} onError={onError} />
+    <img className={isProfileImage ? "profileImg " : "followedProdileImg"
+    } src={imageSrc} onError={onError} />
   ) : (
     <div class="profileWithoutImg" />
   );

src/components/style.css

@@ -31,6 +31,10 @@
   @apply ne-w-12 ne-h-12 ne-rounded-full;
 }
 
+.followedProdileImg {
+  @apply ne-w-[40px] ne-h-[40px] ne-rounded-full ne-ms-[-25px] ne-object-cover;
+}
+
 .profileDetails {
   @apply ne-flex ne-flex-col;
 }