Try updating image handling

Author: RobbieTheWagner

astro.config.mjs

@@ -17,7 +17,16 @@ export default defineConfig({
   }),
   site: 'https://whiskey.fm',
   image: {
-    remotePatterns: [{ protocol: 'https' }]
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**'
+      },
+      {
+        protocol: 'http',
+        hostname: '**'
+      }
+    ]
   },
   integrations: [db(), preact(), sitemap()],
   // These were specific redirects we needed for our podcast, if you do not have any routes to redirect, you can safely remove this.

src/lib/image-utils.ts

@@ -2,26 +2,41 @@
 export function getOptimizedImageUrl(
   originalUrl: string | null | undefined,
   width: number = 160,
-  height: number = 160
+  height: number = 160,
+  quality: number = 75, // Lower quality for AVIF since it's more efficient
+  format: 'avif' | 'webp' | 'auto' = 'avif'
 ): string {
   if (!originalUrl) {
     return '/images/www.png';
   }
 
-  try {
-    // Use Astro's image service endpoint
-    // This works because Astro creates /_image endpoints when image service is configured
-    const params = new URLSearchParams({
-      href: originalUrl,
-      w: width.toString(),
-      h: height.toString(),
-      f: 'webp', // Format
-      q: '85' // Quality
-    });
-
-    return `/_image?${params}`;
-  } catch (error) {
-    console.error('Error generating optimized image URL:', error);
+  // In development, return original URL
+  if (import.meta.env.DEV) {
     return originalUrl;
   }
+
+  // In production on Vercel, use Vercel's Image Optimization API with AVIF
+  const params = new URLSearchParams({
+    url: originalUrl,
+    w: width.toString(),
+    h: height.toString(),
+    q: quality.toString(),
+    f: format, // Force AVIF format (smallest file size)
+  });
+
+  return `/_vercel/image?${params}`;
 }
+
+// Helper for generating multiple format URLs
+export function getImageUrls(originalUrl: string | null | undefined) {
+  if (!originalUrl) {
+    const fallback = '/images/www.png';
+    return { avif: fallback, webp: fallback, fallback };
+  }
+  
+  return {
+    avif: getOptimizedImageUrl(originalUrl, 160, 160, 75, 'avif'),
+    webp: getOptimizedImageUrl(originalUrl, 160, 160, 85, 'webp'),
+    fallback: originalUrl
+  };
+}