الصور جزء مهم من أي موقع أو تطبيق. إنها تساعد في جعل المحتوى أكثر جاذبية وجاذبية من الناحية المرئية.
ومع ذلك ، إذا لم يتم تحسين الصور بشكل صحيح ، فيمكنها أيضًا إبطاء موقع أو تطبيق.
لماذا تحسين الصور؟
هناك عدة أسباب لأهمية تحسين الصور.
- يمكن أن يساعد في تحسين وقت تحميل الموقع أو التطبيق.
- يمكن أن يقلل من كمية البيانات التي يحتاجها العميل لتنزيلها ، مما يوفر تكاليف النطاق الترددي.
- يمكن أن يساعد في تحسين الأداء العام للموقع أو التطبيق.
كيفية تحسين الصور في Next.js
هناك عدة طرق يمكنك من خلالها تحسين الصور في Next.js. واحد هو استخدام مكون الصورة. يقوم هذا المكون تلقائيًا بتحسين الصور للأداء.
هناك طريقة أخرى لتحسين الصور وهي استخدام إمكانيات معالجة الصور المضمنة. يمكن لـ Next.js تغيير حجم الصور وضغطها وتحسينها تلقائيًا من أجل الأداء.
أخيرًا ، يمكنك استخدام مكتبة تابعة لجهة خارجية مثل صورة تفاعلية محسّنة. توفر هذه المكتبة مجموعة متنوعة من إمكانيات تحسين الصور.
استخدام مكون الصورة
يعد مكون الصورة أسهل طريقة لتحسين الصور في Next.js. لاستخدامه ، ما عليك سوى استيراد المكون من ملف التالي / الصورة طَرد.
بمجرد استيراد المكون ، يمكنك استخدامه مثل أي مكون آخر في React. يحتوي مكون الصورة على بعض الخاصيات التي يمكنك استخدامها للتحكم في كيفية عرض الصور.
يستورد صورة من "التالي / الصورة"يصدّرتقصيروظيفةصورتي() {
يعود (
<صورة
src ="/my-image.jpg"
العرض ="200"
الارتفاع ="200"
الجودة ="100"
بديل ="صورتي"
/>
)
}
في هذا المثال ، يعرض مكون الصورة صورة بعرض 200 بكسل وارتفاع 200 بكسل. يمكنك أيضًا استخدام CSS أو إطار عمل مثل Tailwind لتصميم تطبيقك وصورك.
بعض العناصر المطلوبة لمكون الصورة هي العرض والارتفاع و src والبدلة. الخاصية src هي عنوان URL للصورة التي تريد استخدامها. استخدم دعامات العرض والارتفاع لضبط عرض الصورة وارتفاعها بالبكسل. خاصية alt هي النص البديل للصورة.
بعض الدعائم الاختيارية لمكون الصورة هي التخطيط ، والمحمل ، والعنصر النائب ، والأولوية. تحدد خاصية التخطيط تخطيط الصورة. يمكنك استخدام دعامة المحمل لتحديد أداة تحميل صور مخصصة. تحدد الخاصية النائب عنصرًا نائبًا مخصصًا للصورة. تحدد خاصية الأولوية أولوية الصورة.
بعض فوائد استخدام مكون الصورة هي:
- تحسين الأداء: تتمثل إحدى الفوائد الرئيسية لاستخدام مكون الصورة في تحسين الأداء. يقوم المكون تلقائيًا بتحسين الصور من أجل الأداء.
- تغيير الحجم التلقائي للصورة: فائدة أخرى لاستخدام مكون الصورة هي تغيير حجم الصورة تلقائيًا. يمكن للمكون تغيير حجم الصور تلقائيًا لتناسب العرض والارتفاع الدعائم.
- ضغط الصور التلقائي: يمكن لمكون الصورة أيضًا ضغط الصور تلقائيًا لتقليل حجم الملف.
- دعم التحميل الكسول: يدعم مكون الصورة أيضًا التحميل البطيء. هذا يعني أنه سيتم تحميل الصور فقط عندما تكون مرئية على الشاشة.
استخدام مكتبة طرف ثالث
إذا كنت بحاجة إلى مزيد من التحكم في تحسين الصور ، فيمكنك استخدام مكتبة تابعة لجهة خارجية مثل رد فعل الصورة الأمثل. توفر هذه المكتبة مجموعة متنوعة من إمكانيات تحسين الصور.
تتضمن بعض ميزات الصورة المحسّنة للتفاعل ما يلي:
- تحسين الصور على العميل والخادم: يمكن للصورة المحسنة التفاعل تحسين الصور على العميل والخادم. هذا يعني أنه تم تحسين الصور للأداء بالإضافة إلى حجم الملف.
- تغيير حجم الصورة تلقائيًا: يمكن للصورة المحسنة التفاعل تغيير حجم الصور تلقائيًا لتناسب العرض والارتفاع الدعائم.
- ضغط الصور التلقائي: يمكن أيضًا للصورة المحسنة التفاعل ضغط الصور تلقائيًا لتقليل حجم الملف.
- دعم التحميل الكسول: الصورة المحسّنة للتفاعل تدعم أيضًا التحميل البطيء. هذا يعني أنه سيتم تحميل الصور فقط عندما تكون مرئية على الشاشة.
- دعم تنسيقات صور متعددة: تدعم الصورة المحسّنة للتفاعل تنسيقات صور متعددة ، بما في ذلك JPEG و PNG و WebP.
لاستخدام صورة تفاعلية محسّنة ، ما عليك سوى تثبيت المكتبة باستخدام npm.
بمجرد تثبيت المكتبة ، يمكنك استيرادها إلى مشروعك.
يستورد Img من "تفاعل-صورة محسّنة"يصدّرتقصيروظيفةالتالي() {
يعود (
<Img
src ="/my-image.jpg"
الأحجام = {[400، 800]}
بديل ="صورتي"
/>
)
}
يمكنك أيضًا استخدام ملفات SVG مع صورة تفاعلية محسّنة.
يستورد {Svg} من "تفاعل-صورة محسّنة"يصدّرتقصيروظيفةالتالي() {
يعود (
<SVG
src ="/my-image.svg"
className =“مليئة بالأحمر”
/>
)
}
يستخدم هذا المثال الخاصية className لتحديد اسم فئة لـ SVG. يمكنك استخدام اسم الفئة هذا لتصميم SVG باستخدام CSS أو التفاعل معها باستخدام JavaScript.
توفر أيضًا صورة تفاعلية محسّنة بعض الفوائد الأخرى على إمكانات تحسين الصورة المضمنة.
تتمثل إحدى فوائد استخدام الحزمة على الميزات المضمنة في أنه يمكنها إنشاء أحجام مختلفة من الصور تلقائيًا. هذا يعني أنه ليس عليك إنشاء إصدارات مختلفة من نفس الصورة.
فائدة أخرى هي أنه يمكن أن يقدم تلقائيًا الحجم المناسب للصورة لجهاز المستخدم. هذا يعني أن الأجهزة ذات الشاشات عالية الدقة ستحصل على صورة عالية الدقة ، وستحصل الأجهزة ذات الشاشات منخفضة الدقة على صورة منخفضة الدقة.
أخيرًا ، الصورة المحسّنة للتفاعل هي تمامًا مشروع مفتوح المصدر. هذا يعني أنه يمكنك المساهمة في المكتبة إذا كنت بحاجة إلى ميزة معينة أو إصلاح للأخطاء.
ما الطريقة التي يجب أن تستخدمها؟
إذن ، ما الطريقة التي يجب استخدامها لتحسين الصور في Next.js؟
إذا كنت بحاجة إلى تحسين أساسي للصور ، فيمكنك استخدام إمكانات معالجة الصور المدمجة. هذه هي أسهل طريقة للبدء في تحسين الصورة.
إذا كنت بحاجة إلى مزيد من التحكم في تحسين الصورة ، فيمكنك استخدام مكتبة تابعة لجهة خارجية مثل صورة رد الفعل المحسّنة. توفر هذه المكتبة المزيد من إمكانيات تحسين الصور المتقدمة.
إذا كنت بحاجة إلى أفضل أداء مطلق ، فيمكنك استخدام مزيج من إمكانيات معالجة الصور المضمنة ومكتبة تابعة لجهة خارجية. سيعطيك هذا أفضل ما في العالمين. ومع ذلك ، لا ينصح بهذا الأسلوب للمبتدئين لأنه يتطلب مزيدًا من الإعداد.
تحسين تحسين محركات البحث باستخدام الصور المحسنة
من خلال تحسين الصور على موقع الويب أو التطبيق الخاص بك ، يمكنك تحسين مُحسنات محركات البحث الخاصة بك. تأخذ خوارزمية Google في الاعتبار سرعة تحميل مواقع الويب والتطبيقات. إذا تم تحميل موقع الويب أو التطبيق ببطء ، فسيؤثر ذلك سلبًا على مُحسنات محركات البحث.
باستخدام الصور المحسّنة ، يمكنك تحسين وقت تحميل موقع الويب أو التطبيق الخاص بك ، مما قد يؤدي إلى تحسين مُحسّنات محرّكات البحث لديك. بعد ذلك ، يمكنك أيضًا إضافة بروتوكول رسم بياني مفتوح للحصول على أداء أفضل.