تحسين الصور

تكشف هذه القواعد سوء التكوينات في التعامل مع صور Next.js التي تزيد استخدام Vercel Image Optimization أو تخدم صوراً غير محسّنة.

vercel-image-global-unoptimized

يكشف images.unoptimized: true في next.config.

لماذا يهم: يعطّل هذا تحسين صور Vercel عالمياً. تُخدم جميع الصور كما هي، بدون تغيير حجم أو تحويل صيغة أو ضغط — مما يزيد تكاليف العرض الترددي ويُضرّ بالأداء.

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

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

nextjs-image-missing-sizes

يكشف مكوّنات <Image> ذات fill دون سمة sizes.

لماذا يهم: بدون sizes، المتصفح يحمّل أكبر صورة متاحة بغض النظر عن عرض نافذة العرض. هذا يهدر العرض الترددي ويزيد استخدام تحسين الصور.

<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

يكشف إدخالات images.remotePatterns بأنماط pathname واسعة جداً (/** أو مفقود).

لماذا يهم: مسارات الصور البعيدة غير المقيدة تسمح لأي URL على النطاق بالتحسين عبر حسابك، مما قد يحرّك استخدام تحسين غير متوقع من محتوى يولّده المستخدم أو تضمينات من جهات أخرى.

// 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

يكشف مكوّنات <Image> مع src من نوع SVG دون الخاصية unoptimized.

لماذا يهم: ملفات SVG رسومات متجهة ولا تستفيد من خط تحسين الصور. تشغيلها عبره يهدر حصة التحسين بدون أي فائدة.

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

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