هل تريد استخدام صور WebP في ووردبريس؟
صور WebP هي تنسيق صور حديث يوفر ضغطًا أفضل للصور عن طريق تقليل حجم الملف. هذا يجعل موقع الويب الخاص بك يتم تحميله بشكل أسرع ويوفر النطاق الترددي.
في هذه المقالة ، سنوضح لك كيفية استخدام صور WebP بسهولة في ووردبريس.
إضافة صور WebP في ووردبريس
WebP هو تنسيق ملف جديد للصور لاستخدامها على الويب. باستخدام تنسيق صورة WebP ، ستكون صورك أصغر حجمًا بنسبة 25-34٪ من تنسيق PNG و JPEG دون فقدان الجودة.
إذا كانت الصور تبطئ موقع الويب الخاص بك ، فإن تحويلها إلى تنسيق WebP يمكن أن يحسن نتائج اختبار سرعة تحميل صفحتك .
لمعرفة المزيد حول ضغط الصور ، راجع دليلنا حول كيفية تحسين الصور للويب .
نظرًا لأن WebP هو تنسيق ملف جديد ، فهو غير مدعوم من قبل جميع المتصفحات. ومع ذلك ، فإن معظم المتصفحات الحديثة مثل Google Chrome و Firefox و Microsoft Edge تدعم صور WebP.
يمكن أن تساعدك صور WebP على تسريع موقع ووردبريس الخاص بك . يُنصح باستخدام أفضل الممارسات جنبًا إلى جنب مع مكون إضافي للتخزين المؤقت في ووردبريس و CDN والمزيد.
منذ ووردبريس 5.8 ، دعم ووردبريس صور WebP افتراضيًا. هذا يعني أنه يمكنك حفظ وتحميل صور WebP الخاصة بك إلى موقع ووردبريس الخاص بك دون استخدام مكون إضافي.
ولكن بعد قولي هذا ، قد لا تزال ترغب في استخدام مكون إضافي لضغط الصور على موقع ووردبريس الخاص بك. إذا كان العديد من المستخدمين لديك يستخدمون متصفحات غير مدعومة ، فعليك التفكير في استخدام مكون إضافي لضغط الصور.
يمكن أن تقوم المكونات الإضافية لضغط الصور بتحويل صورك الحالية إلى تنسيق WebP وعرض صور JPEG أو PNG كخيار احتياطي على المتصفحات التي لا تدعم WebP بعد.
إذا كان موقعك يستخدم الكثير من الصور ، وكانت تعمل على إبطاء مدونة ووردبريس الخاصة بك ، فعليك بالتأكيد التفكير في استخدام صور WebP.
إليك كيفية استخدام صور WebP في ووردبريس. سنعرض لك طرقًا متعددة ، حتى تتمكن من اختيار الطريقة التي تناسبك بشكل أفضل:
استخدام صور WebP في ووردبريس مع EWWW Optimizer
استخدام صور WebP في ووردبريس مع WP Rocket
استخدام صور WebP في ووردبريس مع SG Optimizer
يعد المكون الإضافي EWWW Image Optimizer أحد أفضل المكونات الإضافية لضغط الصور في ووردبريس والتي تتيح لك تحسين صور ووردبريس الخاصة بك. كما أنه يدعم صور WebP ويمكنه إظهارها تلقائيًا على المتصفحات المدعومة.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي EWWW Image Optimizer . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، انتقل إلى الإعدادات » صفحة EWWW Image Optimizer لتكوين خيارات البرنامج المساعد. سيتم الترحيب بك بواسطة معالج الإعداد ، ولكن يمكنك النقر فوق الارتباط “أعرف ما أفعله” للخروج من المعالج.
معالج EWWW
في الشاشة التالية ، سترى مجموعة من خيارات البرنامج المساعد. قم بالتمرير لأسفل وحدد المربع الموجود بجوار خيار “تحويل WebP”.
تحويل WebP في EWWW
بعد ذلك ، انقر فوق الزر حفظ التغييرات لتخزين إعداداتك.
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى قسم WebP Conversion. سيعرض لك المكون الإضافي الآن بعض قواعد إعادة الكتابة بصورة معاينة حمراء.
تحتاج إلى النقر فوق الزر “إدراج قواعد إعادة الكتابة” ، وسيحاول المكون الإضافي تلقائيًا إدراج قواعد إعادة الكتابة هذه في ملف htaccess الخاص بك .
أدخل قواعد إعادة الكتابة
إذا نجح المكون الإضافي في إضافة هذه القواعد ، فستتحول معاينة الصورة الحمراء إلى اللون الأخضر بنص “WebP”.
طريقة تسليم WebP ناجحة
في بعض الأحيان ، قد لا يتمكن المكون الإضافي من إدراج القواعد. في هذه الحالة ، تحتاج إلى نسخ قواعد إعادة الكتابة من صفحة إعدادات البرنامج المساعد ولصقها في الجزء السفلي من ملف htaccess الخاص بك يدويًا.
بمجرد الانتهاء ، ارجع إلى صفحة إعدادات المكون الإضافي وانقر على زر حفظ التغييرات مرة أخرى. إذا تحولت صورة المعاينة إلى اللون الأخضر ، فهذا يعني أنك نجحت في تمكين تسليم صورة WebP على موقع ووردبريس الخاص بك .
بالتناوب ، يمكنك الاختيار من بين أساليب إعادة كتابة JS WebP أو <picture> WebP Rewriting كخيارات تسليم WebP. هذه أبطأ قليلاً من طريقة .htaccess ، لكنها ستنجز المهمة.
يسمح لك EWWW Image Optimizer بتحويل ملفات الصور التي تم تحميلها مسبقًا بسهولة إلى صور WebP. ما عليك سوى الانتقال إلى صفحة Media »Library والتبديل إلى عرض القائمة.
حدد الملفات في الوسائط
بعد ذلك ، تحتاج إلى النقر فوق الزر “خيارات الشاشة” وتغيير “عدد العناصر لكل صفحة” إلى 999. إذا كان لديك أكثر من 1000 صورة ، فستظهر هذه الصور في الصفحة التالية.
بهذه الطريقة ستتمكن من تحديد عدد كبير من الصور بسرعة لتحسينها بشكل مجمّع. بعد ذلك ، انقر فوق مربع الاختيار تحديد الكل في الأعلى لتحديد جميع الصور.
تحسين بالجملة
بعد ذلك ، انقر فوق القائمة المنسدلة الإجراءات المجمعة وحدد خيار التحسين الجماعي. أخيرًا ، انقر فوق الزر “تطبيق”.
في الشاشة التالية ، سيعطيك المكون الإضافي خيارًا لتخطي ضغط الصور وتحويلها فقط إلى WebP. يمكنك تحديد هذا الخيار إذا تم تحسين صورك بالفعل.
تشغيل التحسين
بعد ذلك ، انقر فوق الزر “Scan for Unoptimized Images” للمتابعة. سيعرض لك المكون الإضافي بعد ذلك عدد الصور التي وجدها ، بحيث يمكنك النقر فوق الزر تحسين للمتابعة.
سيتم الآن تحسين صورك ، وسيقوم مُحسِّن EWWW بإنشاء إصدارات WebP لصورك.
انتهى تحويل صورة WebP
اختبار تسليم صورة WebP الخاص بك
بمجرد قيامك بتحسين صورك ، يمكنك الانتقال إلى منشور مدونة أو صفحة تحتوي على عدة صور. مرر الماوس فوق أي صورة وانقر بزر الماوس الأيمن لفتح الصورة في علامة تبويب جديدة.
فحص الصورة
سيؤدي هذا إلى فتح الصورة في علامة تبويب متصفح جديدة ، وستتمكن من رؤية أن لها امتداد .webp في شريط العناوين.
تحقق من تقديم صورة WebP
إذا كان المكون الإضافي غير قادر على تقديم صورة webp ، فيمكنك العودة إلى صفحة إعدادات المكون الإضافي. من هنا يمكنك تغيير خيار تسليم WebP إلى أساليب “إعادة كتابة WebP JS” أو “<picture> WebP Rewriting”.
Imagify هو مكون إضافي لتحسين الصور في ووردبريس تم إنشاؤه بواسطة الأشخاص الذين يقفون وراء WP Rocket ، وهو أفضل مكون إضافي للتخزين المؤقت في ووردبريس . يتيح لك تحسين الصور وتحويلها بسهولة إلى تنسيق صورة WebP.
أول شيء عليك القيام به هو تثبيت وتفعيل البرنامج المساعد Imagify . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى زيارة الإعدادات »تخيل الصفحة لتكوين إعدادات البرنامج المساعد. من هنا. انقر فوق الزر “إنشاء مفتاح API مجاني” للمتابعة.
قم بإنشاء مفتاح Imagify API
سيُطلب منك إدخال عنوان بريد إلكتروني للنشاط التجاري بعد ذلك يمكنك التحقق من صندوق الوارد الخاص بك بحثًا عن رسالة بريد إلكتروني تحتوي على مفتاح API الخاص بك. انسخ والصق المفتاح في صفحة إعدادات البرنامج المساعد وانقر على زر حفظ التغييرات.
بعد ذلك ، تحتاج إلى التمرير لأسفل إلى قسم التحسين. هناك تحتاج إلى التحقق من الخيارات الموجودة بجوار خيارات “إنشاء إصدارات webp للصور” و “عرض الصور بتنسيق webp على الموقع”.
تخيل إعدادات WebP
أدناه ، يمكنك الاختيار من بين طريقتين للتسليم لعرض صور WebP في ووردبريس. الطريقة الأولى هي طريقة htaccess. ، والثانية باستخدام علامة <picture>.
تعتبر طريقة .htaccess أسرع ، لكنها لا تعمل إذا كنت تستخدم خدمة CDN . تعمل طريقة العلامة <picture> مع شبكات CDN أيضًا ، ولكنها قد تؤدي إلى كسر بعض سمات ووردبريس.
يمكنك اختيار أي منهما يعمل جيدًا لموقعك. بعد ذلك ، انقر فوق الزر “حفظ وانتقل إلى مُحسِّن مجمّع” في الأسفل.
حفظ الإعدادات وبدء محسن الصورة
سينقلك هذا إلى صفحة Media »Bulk Optimization . سيبدأ المكون الإضافي تلقائيًا في تحسين جميع صور ووردبريس الخاصة بك في الخلفية.
حالة التحسين
إذا كان لديك الكثير من الصور ، فقد يستغرق ذلك بعض الوقت. لا تقلق ، يمكنك إغلاق الصفحة والعودة إليها لاحقًا لأن إغلاق الصفحة لن يوقف عملية تحسين الصورة.
بمجرد الانتهاء من التحسين ، يمكنك زيارة صفحة أو منشور يحتوي على بعض الصور. مرر مؤشر الماوس فوق إحدى الصور ، ثم انقر بزر الماوس الأيمن لتحديد “فتح الصورة في علامة تبويب جديدة”.
فحص الصورة
سيؤدي هذا إلى فتح الصورة في علامة تبويب متصفح جديدة ، وستتمكن من رؤية امتداد .webp في شريط العناوين.
تحقق من تقديم صورة WebP
يوصى بهذه الطريقة إذا كنت من مستخدمي SiteGround .
SiteGround هي واحدة من أفضل شركات استضافة ووردبريس . إنها توفر مكوّنًا إضافيًا مجانيًا لـ SG Optimizer لمستخدميها يسمح لك بتحسين أداء ووردبريس الخاص بك. يتضمن أيضًا خيار تحسين صور ووردبريس.
أولاً ، تحتاج إلى تثبيت وتفعيل المكوّن الإضافي SG Optimizer .
عند التنشيط ، سيضيف المكون الإضافي عنصر قائمة جديدًا إلى الشريط الجانبي للمسؤول المسمى “SG Optimizer”. سيؤدي النقر فوقه إلى نقلك إلى صفحة إعدادات المكون الإضافي.
إعدادات SG Optimizer
من هنا يمكنك تشغيل إعدادات التخزين المؤقت إذا كنت تريد استخدام نظام التخزين المؤقت المدمج في SiteGround .
بعد ذلك ، يمكنك التبديل إلى علامة التبويب “تحسين الوسائط” وتشغيل خيار “إنشاء نسخ WebP من الصور الجديدة”.
تمكين صور WebP في SG Optimizer
أسفل ذلك ، سترى خيار “إنشاء ملفات WebP بشكل مجمّع”. سيؤدي النقر فوقه إلى بدء إنشاء نسخ WebP لجميع ملفات الصور في مكتبة وسائط ووردبريس الخاصة بك.
إنشاء مجمّع لصور WebP
بمجرد الانتهاء ، سيبدأ موقع ووردبريس الخاص بك في تقديم صور WebP.
لمعرفة ما إذا كان موقع الويب الخاص بك يقدم صور WebP ، يلزمك فتح صفحة على موقعك تحتوي على بعض الصور.
بعد ذلك ، انقر بزر الماوس الأيمن وحدد أداة الفحص. سيؤدي هذا إلى فتح وحدة تحكم المطور حيث تحتاج إلى التبديل إلى علامة تبويب الشبكة.
عرض صور WebP في أدوات المطور
من هنا ، انقر فوق علامة التبويب “img” ثم أعد تحميل الصفحة (CTRL + R في نظام التشغيل Windows و Command + R في نظام التشغيل Mac). أثناء إعادة تحميل موقع الويب الخاص بك ، سترى جميع الصور التي تم تحميلها في وحدة تحكم المطور.
نأمل أن تساعدك هذه المقالة في تعلم كيفية استخدام صور WebP في ووردبريس. قد ترغب أيضًا في الاطلاع على دليلنا حول كيفية إنشاء رسالة إخبارية عبر البريد الإلكتروني ، ومقارنتنا لأفضل خدمات هاتف العمل لموقعك على الويب.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
