Optimasi Gambar

Aturan-aturan ini mengidentifikasi kesalahan konfigurasi dalam penanganan gambar Next.js yang meningkatkan penggunaan Vercel Image Optimization atau menyajikan gambar yang tidak dioptimasi.

vercel-image-global-unoptimized

Mendeteksi images.unoptimized: true di next.config.

Mengapa ini penting: Ini menonaktifkan Vercel Image Optimization secara global. Semua gambar disajikan apa adanya, tanpa pengubahan ukuran, konversi format, atau kompresi — meningkatkan biaya bandwidth dan menurunkan performa.

// next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com" }],
  },
};

nextjs-image-missing-sizes

Mendeteksi komponen <Image> dengan fill tetapi tanpa atribut sizes.

Mengapa ini penting: Tanpa sizes, browser mengunduh gambar terbesar yang tersedia terlepas dari lebar viewport. Ini membuang bandwidth dan meningkatkan penggunaan Image Optimization.

<Image src="/hero.jpg" alt="Hero" fill />

<Image src="/hero.jpg" alt="Hero" fill sizes="(max-width: 768px) 100vw, 50vw" />

vercel-image-remote-pattern-too-broad

Mendeteksi entri images.remotePatterns dengan pola pathname yang terlalu luas (/** atau tidak ada).

Mengapa ini penting: Path gambar remote yang tidak dibatasi memungkinkan URL apapun pada hostname tersebut dioptimasi melalui akun Anda, berpotensi menyebabkan penggunaan optimasi yang tidak terduga dari konten buatan pengguna atau embed pihak ketiga.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com", pathname: "/**" }],
  },
};

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com", pathname: "/avatars/**" }],
  },
};

vercel-image-svg-without-unoptimized

Mendeteksi komponen <Image> dengan src SVG yang tidak memiliki prop unoptimized.

Mengapa ini penting: SVG adalah grafik vektor dan tidak mendapat manfaat dari pipeline Image Optimization. Menjalankannya melalui pipeline membuang kuota optimasi tanpa manfaat apapun.

<Image src="/logo.svg" alt="Logo" width={100} height={40} />

<Image src="/logo.svg" alt="Logo" width={100} height={40} unoptimized />