كيفية تقديم الصور بتنسيقات الجيل التالي (على WordPress)

يشجع تقرير Lighthouse المستخدمين على عرض الصور بتنسيقات الجيل التالي، مثل WebP وAVIF. 

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

والخبر السار هو أنه من السهل تقديم الصور بتنسيقات الجيل التالي في WordPress. في بعض الحالات، قد تحتاج فقط إلى تحديث إصدار WordPress الخاص بك. وبدلاً من ذلك، قد تفضل تثبيت مكون إضافي لتحسين الصورة لأتمتة العملية.

لماذا توصي Lighthouse بعرض الصور بتنسيقات الجيل التالي

Lighthouse هي أداة آلية مفتوحة المصدر تقدمها Google. لقد تم تصميمه لمساعدتك على تحسين جودة موقع الويب الخاص بك. ويمكنك استخدامه للحصول على معلومات حول أداء كل صفحة من صفحاتك وإمكانية الوصول إليها.

كل ما عليك فعله هو توفير عنوان URL لتدقيق Lighthouse. ستتلقى بعد ذلك تقريرًا يوضح لك مدى جودة أداء صفحاتك. 

إذا فشلت في أي من التقييمات، فستحصل أيضًا على نصيحة حول كيفية معالجة المشكلات الأساسية وتحسين موقعك على الويب.

أسهل طريقة لاستخدام Lighthouse هي الانتقال إلى PageSpeed ​​Insights . بمجرد تشغيل موقعك من خلال Lighthouse، قم بالتمرير لأسفل إلى قسم الفرص. 

ستجد هناك العديد من النصائح القابلة للتنفيذ لتحسين أداء صفحتك. كما ترون، هناك شيء واحد توصي به Lighthouse وهو عرض الصور بتنسيقات الجيل التالي:

Lighthouse

إذا نقرت على الاقتراح، يمكنك العثور على مزيد من التفاصيل حول الموضوع. على سبيل المثال، ستعلمك Lighthouse أن WebP وAVIF غالبًا ما يوفران ضغطًا أفضل من JPEG وPNG.

ونتيجة لذلك، توفر أنواع الملفات هذه تنزيلات أسرع واستهلاكًا أقل للبيانات. سنستكشف بشكل أكبر فوائد تنسيقات الجيل التالي في القسم التالي.

مقدمة إلى تنسيقات الجيل التالي

في الماضي، كانت JPG وPNG هي تنسيقات الملفات التقليدية للصور. ومع ذلك، في عام 2010، قدمت لنا Google WebP، في حين تم إنشاء AVIF في عام 2019.

تهدف تنسيقات الجيل التالي هذه معًا إلى الحفاظ على صور عالية الجودة مع استخدام أحجام ملفات أصغر.

على سبيل المثال، تعد ملفات WebP أصغر بنسبة تصل إلى 34% من تنسيقات JPEG التقليدية، ومع ذلك فهي تمكنك من عرض المزيد من وحدات البكسل. 

من ناحية أخرى، يستخدم AVIF الضغط مع فقدان البيانات، مما يؤدي إلى إزالة البيانات غير الضرورية من ملف الصورة.

نظرًا لأن تنسيقات صور الجيل التالي تميل إلى أن تكون ذات أحجام ملفات أصغر، فهي طريقة رائعة لتوفير أوقات تحميل سريعة على موقع الويب الخاص بك. 

يعد هذا أمرًا بالغ الأهمية، نظرًا لأن الصفحات البطيئة تميل إلى إبعاد المستخدمين. وفي الوقت نفسه، يمكنك تقليل تكاليف النطاق الترددي، نظرًا لأن هناك حاجة إلى موارد خادم أقل لعرض كل صورة.

علاوة على ذلك، تتيح لك صور الجيل التالي تحسين بعض عناصر الويب الحيوية الأساسية مثل أكبر رسم محتوى (LCP). 

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

من المهم ملاحظة أنه على الرغم من أن معظم المتصفحات الشائعة تدعم WebP، إلا أن AVIF لا يزال غير مدعوم عالميًا. ومع ذلك، فإنه يقترب. 

حتى وقت كتابة هذه السطور، كان أكثر من 80 بالمائة من مستخدمي الويب يستخدمون متصفحات متوافقة مع AVIF [2]، بما في ذلك Chrome وOpera. وهذا يعني أن الآن هو الوقت المثالي لبدء استخدام أنواع الصور هذه على موقع الويب الخاص بك.

بالإضافة إلى ذلك، إذا استخدمت الحل من هذا المنشور، فستعمل الأداة تلقائيًا على تقديم التنسيق الأمثل بناءً على متصفح كل مستخدم، لذلك لن تقلق أبدًا بشأن التوافق.

دعم متصفح WebP [3]دعم متصفح Avif [2]
97.66%83.96%

البيانات اعتبارًا من مايو 2023

كيفية عرض الصور بتنسيقات الجيل التالي على موقع WordPress الخاص بك

في معظم الحالات، لبدء استخدام WebP على موقع WordPress الخاص بك، كل ما عليك فعله هو التأكد من أنك تستخدم الإصدار 5.8 من WordPress أو أعلى. 

إذا لم يكن الأمر كذلك، فيمكنك تحديث برنامجك الأساسي (وهي فكرة جيدة للأداء والأمان على أي حال). سيمكنك هذا من تحميل صور WebP تمامًا كما تفعل عادةً.

ومع ذلك، إذا كنت تستخدم إصدارًا سابقًا من WordPress ولا ترغب في الترقية، فيمكنك استخدام مكون إضافي لعرض الصور بتنسيقات الجيل التالي. 

هذه أيضًا هي الطريقة الأسهل لتمكين تنسيق AVIF على موقع الويب الخاص بك، نظرًا لأن WordPress لا يدعم حاليًا هذا النوع من الصور افتراضيًا.

  • الخطوة 1: تثبيت وتفعيل البرنامج المساعد Optimole
  • الخطوة 2: تمكين ميزة تحويل AVIF

الخطوة 1: تثبيت وتفعيل البرنامج المساعد Optimole

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

إذا لم يكن الأمر كذلك، أوبتيمول هو خيار ممتاز. فهو لا يتيح لك عرض الصور بتنسيقات الجيل التالي فحسب، بل إنه يقوم تلقائيًا بضغط صور WordPress وتحسينها وتغيير حجمها:

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

يتضمن Optimole أيضًا شبكة توصيل المحتوى (CDN) الخاصة به لتعزيز أوقات التحميل بشكل أكبر. كل هذا يجعل الأداة عبارة عن حزمة شاملة ومفيدة لتحقيق أقصى استفادة من صور موقع الويب الخاص بك.

أحد أفضل الأجزاء في Optimole هو أنها أداة مجانية، مما يعني أنه يمكنك اختيار الإصدار الذي يناسب احتياجاتك. 

باستخدام المكون الإضافي المجاني، يمكنك عرض الصور لـ 5000 مستخدم شهريًا. إذا كنت تدير موقعًا إلكترونيًا صغيرًا أو شخصيًا إلى حد ما، فقد يكون هذا هو كل ما تحتاجه.

من ناحية أخرى، إذا كنت تدير موقعًا إلكترونيًا عالي الحركة، فيمكنك اختيار خطة متميزة لاستيعاب المزيد من الزوار والوصول إلى دعم الخبراء. تبدأ هذه الخطط بسعر 19.08 دولارًا أمريكيًا شهريًا عند إصدار الفاتورة سنويًا.

للبدء في استخدام المكون الإضافي المجاني، كل ما عليك فعله هو التوجه إلى المكونات الإضافية > إضافة جديد في لوحة تحكم WordPress الخاصة بك. استخدم شريط البحث للعثور على “Optimole”، ثم قم بتثبيت المكون الإضافي وتنشيطه:

Optimole

بمجرد تنشيط المكون الإضافي، سيُطلب منك إنشاء مفتاح واجهة برمجة التطبيقات المجاني الخاص بك، وهو ما يستغرق بضع ثوانٍ فقط.

الخطوة 2: تمكين ميزة تحويل AVIF

بمجرد تنشيط البرنامج الإضافي Optimole، سيتمكن موقعك تلقائيًا من عرض الصور بتنسيق WebP. بمعنى آخر، يكفي تثبيت البرنامج الإضافي لتمكين نوع ملف WebP.

ومع ذلك، ستحتاج إلى تعديل الإعدادات لتمكين نوع الصورة AVIF أيضًا. لحسن الحظ، هذا بسيط جدا.

كل ما عليك فعله هو التوجه إلى الوسائط في لوحة تحكم WordPress الخاصة بك. ثم حدد أوبتيمول . بمجرد فتح لوحة تحكم Optimole، قم بالتبديل إلى علامة التبويب “الإعدادات”:

AVIF

في البداية، ستظهر لك الإعدادات العامة للمكون الإضافي. لتمكين تحويل AVIF، حدد “خيارات متقدمة” من القائمة اليمنى، ثم انقر فوق “ضغط”.

هناك الكثير من الخيارات التي يمكنك استكشافها هنا. على سبيل المثال، يمكنك تمكين GIF لتحويل الفيديو، أو خدمة CSS وJavaScript من خلال Optimole. نوصي بتصفح وثائق البرنامج الإضافي للتعرف على جميع الخيارات المتاحة.

في الوقت الحالي، ابحث عن خيار تمكين تحويل avif :

AVIF

ما عليك سوى تشغيل الإعداد لعرض صور WordPress الخاصة بك بتنسيقات AVIF. هذا كل ما عليك القيام به!

من المهم ملاحظة أن هذه الميزة ستعمل فقط مع الزوار الذين تدعم متصفحاتهم تنسيقات AVIF. ومع ذلك، فإن الخبر السار هو أن هناك تراجعًا في مكانه. 

سيتم عرض الصور بتنسيق WebP للزائرين الذين يستخدمون متصفحات لا تدعم AVIF. لذلك، يمكن لأي شخص يزور موقعك تقريبًا الاستفادة من تنسيقات الجيل التالي هذه.

المصدر: themeisle

قد يهمك:

ترجمة عربي انجليزي

ترجمة عربي هولندي

إنشاء حساب بنك الجزيرة

إنشاء حساب البنك الأهلي التجاري

إنشاء حساب بنك الخليج الأول

إنشاء حساب سناب شات

إنشاء حساب Apple store

أفضل استضافة مواقع

أنت تستخدم إضافة Adblock

يعتمد موقع انشاء على الاعلانات كمصدر لدعم الموقع، يجب عليك ايقاف تشغيل حاجب الاعلانات لمشاهدة المحتوي