Generate compact WebP ad hero renditions

app/(app)/dashboard/ads/[id]/edit/edit-form.tsx

@@ -7,6 +7,7 @@ import { DESIGN_FORMATS, paletteFor, type AdCreative, type AdFormatId } from "@/
 import { AdPreview } from "@/components/ads/ad-preview";
 import { ColorField } from "@/components/ads/color-field";
 import type { AdTheme } from "@/lib/ads/theme";
+import { originalHeroPngDownloadUrl } from "@/lib/ads/heroImageUrl";
 
 type Campaign = {
   id: string;
@@ -44,6 +45,7 @@ export function EditCampaignForm({
   const [uploading, setUploading] = useState(false);
 
   const current = creatives.find((c) => c.format === active) ?? creatives[0];
+  const originalHeroDownload = originalHeroPngDownloadUrl(current?.imageUrl);
   // What the pickers show: the stored trio for this theme, or the derived one
   // when the creative predates theme variants and has no light trio yet.
   const palette = current
@@ -261,6 +263,11 @@ export function EditCampaignForm({
                 Remove image
               </button>
             )}
+            {originalHeroDownload && (
+              <a href={originalHeroDownload} className="text-xs underline">
+                Download original PNG
+              </a>
+            )}
           </div>
         </div>
       )}

app/(app)/dashboard/ads/new/form.tsx

@@ -8,6 +8,7 @@ import type { SiteBrand } from "@/lib/ads/brand";
 import { AdPreview } from "@/components/ads/ad-preview";
 import { ColorField } from "@/components/ads/color-field";
 import type { AdTheme } from "@/lib/ads/theme";
+import { originalHeroPngDownloadUrl } from "@/lib/ads/heroImageUrl";
 
 function dollars(cents: number): string {
   return `$${(cents / 100).toFixed(2)}`;
@@ -37,6 +38,7 @@ export function NewAdForm() {
   const [theme, setTheme] = useState<AdTheme>("dark");
 
   const current = creatives.find((c) => c.format === active) ?? creatives[0];
+  const originalHeroDownload = originalHeroPngDownloadUrl(current?.imageUrl);
   const palette = current
     ? paletteFor(current, theme)
     : { bgColor: "#0b0d10", fgColor: "#e7e9ee", accentColor: "#6ee7b7" };
@@ -357,6 +359,11 @@ export function NewAdForm() {
               <span className="text-xs text-[var(--color-muted)]">
                 Image fills the Medium Rectangle background
               </span>
+              {originalHeroDownload && (
+                <a href={originalHeroDownload} className="text-xs underline">
+                  Download original PNG
+                </a>
+              )}
             </div>
           </div>
 

lib/ads/heroImage.ts

@@ -1,5 +1,6 @@
 import crypto from "node:crypto";
 import type OpenAI from "openai";
+import sharp from "sharp";
 import type { SupabaseClient } from "@supabase/supabase-js";
 import { smartFetch } from "@/lib/onion";
 import { serviceClient } from "@/lib/supabase/service";
@@ -19,6 +20,8 @@ const ASSET_BUCKET = "ad-assets";
 const IMAGE_MODEL = "gpt-image-2.5-sunburst";
 const VALIDATE_TIMEOUT_MS = 4000;
 const MIN_IMAGE_BYTES = 2000; // <2KB is almost certainly a tracking pixel/placeholder
+const HERO_RENDITION_WIDTH = 600;
+const HERO_RENDITION_HEIGHT = 400;
 
 export type AdHeroCopy = {
   headline: string;
@@ -157,16 +160,47 @@ export function looksLikeIcon(url: string): boolean {
 // which bypasses RLS.
 async function uploadHero(bytes: Buffer): Promise<string | null> {
   const svc = serviceClient();
-  const path = `heroes/${crypto.randomUUID()}.png`;
-  const { error } = await svc.storage.from(ASSET_BUCKET).upload(path, bytes, {
+  const id = crypto.randomUUID();
+  const originalPath = `heroes/${id}.png`;
+  const renditionPath = `heroes/${id}.webp`;
+  let rendition: Buffer;
+  try {
+    rendition = await sharp(bytes)
+      .rotate()
+      .resize({
+        width: HERO_RENDITION_WIDTH,
+        height: HERO_RENDITION_HEIGHT,
+        fit: "inside",
+        withoutEnlargement: true,
+      })
+      .webp({ quality: 82, effort: 5 })
+      .toBuffer();
+  } catch (error) {
+    console.warn("[ads] hero rendition failed", error instanceof Error ? error.message : error);
+    return null;
+  }
+
+  const storage = svc.storage.from(ASSET_BUCKET);
+  const { error: originalError } = await storage.upload(originalPath, bytes, {
     contentType: "image/png",
     upsert: false,
   });
-  if (error) {
-    console.warn("[ads] hero upload failed", error.message);
+  if (originalError) {
+    console.warn("[ads] hero original upload failed", originalError.message);
+    return null;
+  }
+
+  const { error: renditionError } = await storage.upload(renditionPath, rendition, {
+    contentType: "image/webp",
+    upsert: false,
+  });
+  if (renditionError) {
+    console.warn("[ads] hero rendition upload failed", renditionError.message);
+    await storage.remove([originalPath]).catch(() => {});
     return null;
   }
-  return svc.storage.from(ASSET_BUCKET).getPublicUrl(path).data.publicUrl;
+
+  return storage.getPublicUrl(renditionPath).data.publicUrl;
 }
 
 // Resolve the hero image URL for a set of ad creatives. A gpt-image-2.5 hero

lib/ads/heroImageUrl.ts

@@ -0,0 +1,21 @@
+/**
+ * AI-generated hero renditions and their original PNG share a UUID in the
+ * public ad-assets bucket. Keep the original available as an advertiser download.
+ */
+export function originalHeroPngDownloadUrl(imageUrl: string | null | undefined): string | null {
+  if (!imageUrl) return null;
+  try {
+    const url = new URL(imageUrl);
+    if (url.protocol !== "https:") return null;
+    const match = url.pathname.match(
+      /^\/storage\/v1\/object\/public\/ad-assets\/heroes\/([0-9a-f-]+)\.webp$/i,
+    );
+    if (!match) return null;
+    url.pathname = `/storage/v1/object/public/ad-assets/heroes/${match[1]}.png`;
+    url.search = "";
+    url.searchParams.set("download", "hero.png");
+    return url.toString();
+  } catch {
+    return null;
+  }
+}

package.json

@@ -63,6 +63,7 @@
     "react-globe.gl": "^2.38.0",
     "recharts": "^3.10.1",
     "resend": "^6.34.1",
+    "sharp": "^0.35.5",
     "socks": "^2.8.10",
     "ssh2": "1.16.0",
     "stripe": "^23.0.1",