docs: update SEO docs with Cloudflare Workers limitations

Update documentation to reflect that Next.js Image component is not
compatible with Cloudflare Workers runtime. Document the use of native
lazy loading as the solution.

docs/SEO-AND-PERFORMANCE-IMPROVEMENTS.md

@@ -7,31 +7,38 @@ This document outlines the comprehensive SEO and performance optimizations imple
 
 ## 🚀 Performance Improvements
 
-### 1. Next.js Image Optimization Enabled
+### 1. Image Optimization (Cloudflare Workers Compatible)
+
+**Important Note:**
+Next.js `<Image>` component is **NOT compatible** with Cloudflare Workers runtime because it requires Node.js APIs that aren't available in the Workers environment.
 
 **What Changed:**
-- Enabled Next.js automatic image optimization in `next.config.mjs`
+- Used native `<img>` tags with `loading="lazy"` attribute
-- Added support for modern formats (AVIF, WebP)
+- Native browser lazy loading for below-the-fold images
-- Configured responsive device sizes and image sizes
+- Kept `images.unoptimized: true` in `next.config.mjs`
-- Set up remote pattern matching for external images
+- Background images for hero section (CSS-based)
 
 **Benefits:**
-- Automatic format conversion to WebP/AVIF (up to 50% smaller file size)
+- Native lazy loading (supported by all modern browsers)
-- Lazy loading by default for off-screen images
+- No runtime JavaScript overhead
-- Responsive images with srcset generation
+- Cloudflare Workers compatible
-- Automatic blur placeholder generation
+- Fast initial page load
-- CDN optimization ready
+
+**Alternative for Advanced Optimization:**
+For WebP/AVIF conversion and advanced image optimization on Cloudflare:
+- Use [Cloudflare Images](https://www.cloudflare.com/products/cloudflare-images/) service
+- Use [Cloudflare Transform API](https://developers.cloudflare.com/images/transform-images/)
+- Pre-optimize images before uploading to R2
 
 **Files Modified:**
 - `next.config.mjs`
+- `components/hero-section.tsx`
+- `components/artists-section.tsx`
 
 ```javascript
 images: {
-  unoptimized: false,
+  // Must be unoptimized for Cloudflare Workers compatibility
-  formats: ['image/avif', 'image/webp'],
+  unoptimized: true,
-  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-  minimumCacheTTL: 60,
 }
 ```
 
@@ -40,55 +47,62 @@ images: {
 ### 2. Hero Section Image Optimization
 
 **What Changed:**
-- Converted background `div` with inline style to Next.js `<Image>` component
+- Uses CSS `background-image` for hero background
-- Added `priority` flag for above-the-fold loading
+- Optimized for Cloudflare Workers compatibility
-- Configured proper sizes and quality settings
+- No JavaScript overhead for image loading
 
 **Benefits:**
-- Prioritized loading of hero image (LCP improvement)
+- Fast initial render
-- Automatic format selection based on browser support
+- Works in Cloudflare Workers runtime
-- Reduced initial page load time
+- Browser-native rendering
-- Better Core Web Vitals scores
+- No hydration issues
 
 **Files Modified:**
 - `components/hero-section.tsx`
 
-**Before:**
+**Implementation:**
 ```tsx
-<div style={{ backgroundImage: "url(/united-logo-full.jpg)" }} />
+<div
-```
+  className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-
+  style={{ backgroundImage: "url(/united-logo-full.jpg)" }}
-**After:**
+  aria-hidden="true"
-```tsx
-<Image
-  src="/united-logo-full.jpg"
-  alt=""
-  fill
-  priority
-  quality={90}
-  sizes="100vw"
-  className="object-cover"
 />
 ```
 
+**Note:** For production, consider pre-optimizing the hero image to WebP/AVIF format using tools like:
+- [Squoosh](https://squoosh.app/)
+- ImageMagick
+- Sharp
+- Cloudflare Image Resizing API
+
 ---
 
 ### 3. Artists Section Image Optimization
 
 **What Changed:**
-- Converted all `<img>` tags to Next.js `<Image>` components
+- Uses native `<img>` tags with `loading="lazy"` attribute
-- Added responsive `sizes` attributes
+- Browser-native lazy loading for all artist images
-- Implemented lazy loading for below-the-fold images
+- Cloudflare Workers compatible
 
 **Benefits:**
-- Reduced bandwidth usage by 40-60%
+- Native lazy loading (no JavaScript required)
-- Faster page render times
+- Fast and reliable
-- Better mobile performance
+- Works in Cloudflare Workers
-- Responsive image loading based on viewport
+- Supported by 95%+ of browsers
 
 **Files Modified:**
 - `components/artists-section.tsx`
 
+**Implementation:**
+```tsx
+<img
+  src={artist.workImages?.[0]}
+  alt={`${artist.name} tattoo work`}
+  className="w-full h-full object-cover"
+  loading="lazy"
+/>
+```
+
 ---
 
 ### 4. Font Preloading