🖼️ Nuxt Image + IPX

Görsel optimizasyonun A'dan Z'ye rehberi

SSR ReadyEdge CacheAuto WebP/AVIF

🏗️ Mimari

NuxtImg / NuxtPicture / useImage()

Vue Components & Composable

↓

IPX

URL-based Image API

↓

Sharp

Node.js Image Processing

↓

libvips

C Kütüphanesi (Hızlı!)

💾 Cache Katmanları

🌐

Browser Cache

Her kullanıcının kendi tarayıcısında (max-age: 1 yıl)

☁️

CDN / Edge Cache

Cloudflare'ın 300+ lokasyonunda, kullanıcıya en yakın noktadan

🖥️

Nitro ISR Cache

Sunucuda, tüm kullanıcılar için ortak (isr: true)

📁

IPX Disk Cache

İşlenmiş görseller disk'te saklanır, tekrar resize yapılmaz

Akış: İlk kullanıcı resize "bedelini öder" → Sonrakiler cache'ten alır

🛠️ 3 Temel Araç

<NuxtImg>

Standart kullanım, <img> çıktısı

Çoğu durumda bu yeterli

<NuxtPicture>

Multi-format fallback, <picture> çıktısı

AVIF → WebP → JPEG otomatik

useImage()

Programatik URL oluşturma

bg-image, meta tag, download link

⚙️ Önerilen Config

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  
  image: {
    quality: 80,
    format: ['avif', 'webp', 'jpeg'],
    screens: {
      xs: 320, sm: 640, md: 768, 
      lg: 1024, xl: 1280, xxl: 1536
    },
    presets: {
      avatar: {
        modifiers: { width: 100, height: 100, fit: 'cover' }
      }
    }
  },

  // Cache ayarları
  routeRules: {
    '/_ipx/**': {
      headers: { 'cache-control': 'public, max-age=31536000, immutable' },
      isr: true
    }
  },

  // Cloudflare Pages için
  nitro: {
    preset: 'cloudflare-pages'
  }
})