تحسين محركات البحث (SEO): التحسين التلقائي للصور

باستخدام HTML العادي، قمنا بإضافة صورة البطل (Hero) كما يلي:

<img src="large-image.jpg" alt="Large Image" />

ومع ذلك، هذا يعني أننا يجب أن نقوم يدويًا بتحسين بعض الأشياء مثل:

يقدم Next.js مكون الصورة الذي يمكنه التعامل مع هذه التحسينات مباشرةً.

next/image هو امتداد لعنصر HTML img، تم تطويره ليتناسب مع الويب الحديث.

هذا يعني أن تغيير الحجم، التحسين، وعرض الصور بصيغ حديثة مثل WebP (عندما يدعمها المتصفح) يمكن أن يتم تلقائيًا باستخدام next/image.

يتجنب المكون إرسال صور كبيرة إلى أجهزة بشاشات صغيرة، ويسمح لـ Next.js باعتماد صيغ الصور المستقبلية وعرضها للمتصفحات التي تدعمها.

يعمل التحسين التلقائي للصور مع أي مصدر للصور. حتى إذا كانت الصورة مستضافة على مصدر بيانات خارجي، مثل نظام إدارة المحتوى (CMS)، فلا يزال يمكن تحسينها.

import Image from 'next/image';

ثم استبدل صورة البطل img بمكون Image:

// قبل
<img src="large-image.jpg" alt="Large Image" />
 
// بعد
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

هناك أيضًا صورة في التذييل (footer). لنقم باستبدالها أيضًا:

// قبل
<img src="/vercel.svg" alt="Vercel Logo" />
 
// بعد
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

أخيرًا، قم بتشغيل تقرير Lighthouse آخر في أدوات مطوري Chrome وقارن النتائج.

التحسين التلقائي للصور