Refactor: Implement Cloudflare Image Variants

src/components/operators/OperatorCard.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Building, Star, MapPin } from 'lucide-react';
 import { Company } from '@/types/database';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 
 interface OperatorCardProps {
   company: Company;
@@ -29,9 +30,15 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
       <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
-            src={company.card_image_url || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${company.card_image_id}/public`} 
+            src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
+            srcSet={company.card_image_id ? `
+              ${getCloudflareImageUrl(company.card_image_id, 'cardthumb')} 600w,
+              ${getCloudflareImageUrl(company.card_image_id, 'card')} 1200w
+            ` : undefined}
+            sizes="(max-width: 640px) 600px, 1200px"
             alt={company.name}
             className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+            loading="lazy"
           />
         ) : (
           <>
@@ -46,12 +53,13 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
 
             {/* Logo Display */}
             <div className="absolute inset-0 flex items-center justify-center">
-              {company.logo_url ? (
+              {(company.logo_url || (company as any).logo_image_id) ? (
                 <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
                   <img 
-                    src={company.logo_url} 
+                    src={company.logo_url || getCloudflareImageUrl((company as any).logo_image_id, 'logo')} 
                     alt={`${company.name} logo`}
                     className="w-full h-full object-contain p-2"
+                    loading="lazy"
                   />
                 </div>
               ) : (