Smaller?

src/components/Artwork.tsx

@@ -20,6 +20,10 @@ export function Artwork({ src, alt = "Artwork", size = 598, dominantColor, style
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
+        boxShadow:
+          size >= 598
+            ? "0px 100px 80px rgba(0,0,0,0.07), 0px 41.78px 33.42px rgba(0,0,0,0.05), 0px 22.34px 17.87px rgba(0,0,0,0.04), 0px 12.52px 10.02px rgba(0,0,0,0.035), 0px 6.65px 5.32px rgba(0,0,0,0.028), 0px 2.77px 2.21px rgba(0,0,0,0.02)"
+            : "none",
         position: "relative",
         overflow: "hidden",
         border: size >= 598 ? `2px solid ${borderColor}` : `1px solid ${borderColor}`,

src/components/Title.tsx

@@ -10,21 +10,21 @@ export function Title({ children, shadow = false, style = {} }: TitleProps) {
   const sanitizedTitle = sanitizeText(children);
 
   return (
-    <div
-      style={{
-        width: "490px",
-        fontWeight: 800,
-        fontSize: "40px",
-        lineHeight: "49px",
-        color: "#fff",
-        fontFamily: "Avenir Next LT Pro",
-        overflow: "hidden",
-        marginBottom: "24px",
-        maxHeight: "147px", // 3 * 49px lineHeight
-        textShadow: shadow ? "0 4px 4px rgba(0, 0, 0, 0.10)" : "none",
-        ...style,
-      }}
-    >
+          <div
+        style={{
+          width: "100%", // Use full available width instead of fixed
+          fontWeight: 800,
+          fontSize: "28px", // Reduced from 40px for smaller image
+          lineHeight: "34px", // Reduced proportionally
+          color: "#fff",
+          fontFamily: "Inter",
+          overflow: "hidden",
+          marginBottom: "16px", // Reduced from 24px
+          maxHeight: "102px", // 3 * 34px lineHeight
+          textShadow: shadow ? "0 2px 2px rgba(0, 0, 0, 0.10)" : "none", // Reduced shadow
+          ...style,
+        }}
+      >
       {sanitizedTitle}
     </div>
   );

src/components/UserName.tsx

@@ -32,15 +32,15 @@ export function UserName({
       <span
         style={{
           fontWeight: 700,
-          fontSize: "32px",
+          fontSize: "22px", // Reduced from 32px
           color: color,
-          fontFamily: "Avenir Next LT Pro",
+          fontFamily: "Inter",
           whiteSpace: "nowrap",
           overflow: "hidden",
           textOverflow: "ellipsis",
-          textShadow: shadow ? "0 4px 4px rgba(0, 0, 0, 0.10)" : "none",
+          textShadow: shadow ? "0 2px 2px rgba(0, 0, 0, 0.10)" : "none", // Reduced shadow
           // gap is needed to fix text ellipsis
-          gap: "8px",
+          gap: "6px", // Reduced from 8px
           ...style,
         }}
       >

src/routes/airdrop.tsx

@@ -75,8 +75,13 @@ async function renderAirdropOGImage(c: any, handle?: string) {
   );
 
   return new ImageResponse(renderContent(), {
-    width: 1200,
-    height: 630,
+    width: 800,  // Reduced from 1200 (33% reduction)
+    height: 420, // Reduced from 630 (33% reduction) 
     fonts: Array.isArray(font) ? [...font] : [font],
+    headers: {
+      'content-type': 'image/png',
+      'cache-control': 'public, max-age=31536000, immutable',
+      'content-encoding': 'gzip', // Enable compression hint
+    },
   });
 }

src/routes/collection.tsx

@@ -143,9 +143,14 @@ export const collectionRoute = new Hono().get("/:id", async (c) => {
     );
 
     return new ImageResponse(renderContent(), {
-      width: 1200,
-      height: 630,
+      width: 800,  // Reduced from 1200 (33% reduction)
+      height: 420, // Reduced from 630 (33% reduction) 
       fonts: Array.isArray(font) ? [...font] : [font],
+      headers: {
+        'content-type': 'image/png',
+        'cache-control': 'public, max-age=31536000, immutable',
+        'content-encoding': 'gzip', // Enable compression hint
+      },
     });
   } catch (error: any) {
     console.error("Collection OG Image generation error:", error);

src/routes/comment.tsx

@@ -269,8 +269,13 @@ async function renderCommentOGImage(c: any, commentId: string) {
   ]);
 
   return new ImageResponse(renderContent(), {
-    width: 1200,
-    height: 630,
+    width: 800,  // Reduced from 1200 (33% reduction)
+    height: 420, // Reduced from 630 (33% reduction) 
     fonts: Array.isArray(font) ? [...font] : [font],
+    headers: {
+      'content-type': 'image/png',
+      'cache-control': 'public, max-age=31536000, immutable',
+      'content-encoding': 'gzip', // Enable compression hint
+    },
   });
 }

src/routes/track.tsx

@@ -44,13 +44,11 @@ export const trackRoute = new Hono().get("/:id", async (c) => {
     const response: TrackResponse = await apiService.fetch(`/v1/full/tracks/${id}`);
     if (!response.data) return c.json({ error: "Track not found" }, 404);
     const track = response.data;
-
     // Prepare badge/verification
     const artistName = track.user.name;
     const isArtistVerified = track.user.is_verified;
     const artistTier = getBadgeTier(track.user.total_audio_balance);
     const trackArtwork = track.artwork["480x480"];
-
     // Get dominant color from artwork
     const dominantColor = trackArtwork ? await getDominantColor(trackArtwork) : undefined;
 
@@ -63,7 +61,6 @@ export const trackRoute = new Hono().get("/:id", async (c) => {
       { path: "Inter-Regular.ttf", weight: 500 },
       { path: "Inter-Light.ttf", weight: 300 },
     ]);
-
     // Render OG image
     const renderContent = () => (
       <BaseLayout>
@@ -72,16 +69,16 @@ export const trackRoute = new Hono().get("/:id", async (c) => {
             display: "flex",
             flexDirection: "row",
             alignItems: "center",
-            padding: "16px",
-            gap: "16px",
-            width: "1200px",
-            height: "630px",
+            padding: "12px",
+            gap: "12px",
+            width: "800px",
+            height: "420px",
             boxSizing: "border-box",
             background: dominantColor || "#000",
           }}
         >
           {/* Artwork */}
-          <Artwork src={finalArtwork} alt="Track Artwork" dominantColor={dominantColor} />
+          <Artwork src={finalArtwork} alt="Track Artwork" dominantColor={dominantColor} size={396} />
 
           {/* Right Side */}
           <div
@@ -90,10 +87,9 @@ export const trackRoute = new Hono().get("/:id", async (c) => {
               flexDirection: "column",
               justifyContent: "center",
               alignItems: "flex-start",
-              padding: "32px",
-              width: "554px",
-              height: "598px",
-              filter: "drop-shadow(0px 4px 4px rgba(0,0,0,0.1))",
+              padding: "20px",
+              width: "372px",
+              height: "396px",
               background: "transparent",
             }}
           >
@@ -104,45 +100,51 @@ export const trackRoute = new Hono().get("/:id", async (c) => {
                 flexDirection: "row",
                 justifyContent: "space-between",
                 alignItems: "center",
-                width: "490px",
-                height: "40px",
-                marginBottom: "56px",
+                width: "332px",
+                height: "28px",
+                marginBottom: "36px",
               }}
             >
-              <ContentTag text="track" color={dominantColor} shadow />
-              <AudiusLogoHorizontal height={40} shadow />
+              <ContentTag text="track" color={dominantColor} />
+              <AudiusLogoHorizontal height={28} />
             </div>
 
-            {/* Title & Artist Grouped with 24px gap */}
+            {/* Title & Artist Grouped with 16px gap */}
             <div
               style={{
                 display: "flex",
                 flexDirection: "column",
-                width: "490px",
-                marginBottom: "56px",
+                width: "332px",
+                marginBottom: "36px",
               }}
             >
-              <Title shadow>{track.title}</Title>
+              <Title>{track.title}</Title>
               <UserName
                 name={artistName}
-                shadow
                 isVerified={isArtistVerified}
                 tier={artistTier}
                 backgroundColor={dominantColor}
+                badgeSize={22}
               />
             </div>
 
-            <PlayButton size={140} shadow />
+            <PlayButton size={100} />
           </div>
         </div>
       </BaseLayout>
     );
 
-    return new ImageResponse(renderContent(), {
-      width: 1200,
-      height: 630,
+    const imageResponse = new ImageResponse(renderContent(), {
+      width: 800,
+      height: 420,
       fonts: Array.isArray(font) ? [...font] : [font],
+              headers: {
+          'content-type': 'image/png',
+          'cache-control': 'public, max-age=31536000, immutable',
+          'content-encoding': 'gzip', // Enable compression hint
+        },
     });
+    return imageResponse;
   } catch (error: any) {
     console.error("Track OG Image generation error:", error);
     return c.json({ error: "Failed to generate track image", details: error.message }, 500);

src/routes/user.tsx

@@ -261,9 +261,14 @@ export const userRoute = new Hono().get("/:id", async (c) => {
     );
 
     return new ImageResponse(renderContent(), {
-      width: 1200,
-      height: 630,
+      width: 800,  // Reduced from 1200 (33% reduction)
+      height: 420, // Reduced from 630 (33% reduction) 
       fonts: Array.isArray(font) ? [...font] : [font],
+      headers: {
+        'content-type': 'image/png',
+        'cache-control': 'public, max-age=31536000, immutable',
+        'content-encoding': 'gzip', // Enable compression hint
+      },
     });
   } catch (error: any) {
     console.error("User OG Image generation error:", error);