Görsel Optimizasyonu (next/image)

Neden next/image?

Normal <img> etiketi yerine next/image kullanmanın avantajları:

• Boyutlandırma: Görselleri cihaz boyutuna göre otomatik optimize eder.
• Lazy Loading: Sadece ekrana giren görselleri indirir.
• WebP Desteği: Görselleri daha küçük boyutlu modern formatlara dönüştürür.
• LCP Skoru: Sayfa yükleme hızını (Core Web Vitals) iyileştirir.

1. Domain İzni (Önemli)

Next.js, farklı bir sunucudaki (WordPress) görselleri optimize etmek için sizden izin ister. next.config.js dosyasını güncelleyin:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'siteniz.com',
        pathname: '**',
      },
    ],
  },
};

module.exports = nextConfig;

2. Kullanım Örneği

import Image from 'next/image';

<div className="relative w-full h-64">
  <Image
    src={featuredImage}
    alt={post.title.rendered}
    fill
    className="object-cover"
    priority={true} // İlk ekran görselleri için
  />
</div>

3. Parametreler

• src: Görsel URL'i
• alt: Görsel açıklaması (SEO ve erişilebilirlik için)
• width / height: Görselin boyutları (fill kullanılmıyorsa zorunlu)
• fill: Görseli kapsayıcı kutuya yayar (relative div içine koyulmalı)
• priority: Sayfa açılır açılmaz yüklenmesi gereken (Hero) görseller için.