كيفية استخدام صور WebP في WordPress

ربما تتساءل عن كيفية استخدام صور WebP في ووردبريس. بالانتقال إلى تنسيق WebP، يمكنك تقليل حجم ملفات الصور بشكل ملحوظ دون المساس بالجودة، مما يُسهّل تحميل الصفحات ويُحسّن تجربة المستخدم بشكل عام. في هذا الدليل، سنناقش طرقًا عملية لتطبيق صور WebP بفعالية على موقع ووردبريس الخاص بك. 

WebP هو تنسيق صور حديث من تطوير جوجل، يوفر ضغطًا أفضل مقارنةً بتنسيقات مثل JPEG وPNG . بالإضافة إلى سرعة التحميل، يُحسّن استخدام WebP من تحسين محركات البحث (SEO)، ويُقلل من استهلاك الخادم، ويضمن عمل موقعك الإلكتروني بكفاءة عالية على مختلف الأجهزة والمتصفحات. ستُرشدك هذه المقالة إلى عدة طرق، بما في ذلك الإضافات وإعدادات الخادم، لضمان انتقال سلس.

ما هي صورة WebP؟

WebP هو تنسيق صور حديث طورته جوجل خصيصًا للويب. ميزته الرئيسية هي أنه يُنتج أحجام ملفات أصغر بكثير من التنسيقات التقليدية، مثل JPEG وPNG، وعادةً ما تكون أصغر بنسبة 25-35%، مع الحفاظ على نفس جودة الصورة. هذا يعني أن موقعك الإلكتروني يُمكنه التحميل بشكل أسرع دون المساس بجودة الصورة، وهو أمر مفيد بشكل خاص للمواقع التي تعتمد بشكل كبير على الصور، مثل المدونات، ومعارض الأعمال، والمتاجر الإلكترونية.

يدعم WebP الضغطَين مع فقدان البيانات وبدون فقدانها، بالإضافة إلى ميزات مثل الشفافية والرسوم المتحركة، مما يجعله بديلاً متعدد الاستخدامات للعديد من التنسيقات القديمة. بتقليل حجم ملفات الصور، يُحسّن WebP الأداء العام للموقع الإلكتروني، ويُخفّض استهلاك النطاق الترددي، ويُوفّر تجربةً أكثر سلاسةً للزوار.

تدعم معظم المتصفحات الحديثة الآن WebP، بما في ذلك Chrome وFirefox وEdge وOpera وSafari (iOS 14 والإصدارات الأحدث)، والتي تغطي مجتمعةً حوالي 95% من مستخدمي الإنترنت. لا يدعم WebP إلا عدد قليل من المتصفحات القديمة، مثل Internet Explorer أو الإصدارات القديمة من Safari. في هذه الحالات، يمكن لمواقع الويب استخدام صور JPEG أو PNG احتياطية لضمان رؤية الجميع للصور بشكل صحيح.

كيفية استخدام صور WebP في WordPress

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

في هذا القسم، سنستكشف العديد من الطرق العملية لتنفيذ صور WebP على موقع WordPress الخاص بك.

استخدام صور WebP في WordPress مع EWWW Optimizer

يُعدّ مُحسِّن الصور EWWW من أفضل إضافات ضغط الصور في ووردبريس، فهو لا يُقلّل حجم ملفات الصور فحسب، بل يدعم أيضًا تنسيق WebP. يُتيح هذا المُحسِّن عرض صور WebP تلقائيًا على المتصفحات المتوافقة، مما يُساعد موقعك على التحميل بشكل أسرع وتحسين أدائه.

الخطوة الأولى هي تثبيت وتفعيل إضافة EWWW Image Optimizer. بعد التفعيل، انتقل إلى الإعدادات > EWWW Image Optimizer لضبط خياراتها.

في شاشة الإعدادات، قم بالتمرير لأسفل وقم بتمكين "تحويل WebP" ، ثم انقر فوق "حفظ التغييرات" لتخزين التكوين الخاص بك.

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

في حالة نجاح العملية، ستتحول صورة المعاينة إلى اللون الأخضر، وسيتم تسميتها بـ "WebP".

لتحويل الصور المُحمّلة سابقًا إلى WebP، انتقل إلى الوسائط > المكتبة ، ثم انتقل إلى عرض القائمة. اضبط عدد العناصر في الصفحة عبر خيارات الشاشة لاختيار عدة صور دفعةً واحدة. استخدم مربع الاختيار "تحديد الكل"، ثم اختر " تحسين جماعي" من القائمة المنسدلة، ثم انقر على "تطبيق".

يتيح لك المكون الإضافي تخطي الضغط وتحويل الصور إلى WebP فقط إذا كانت مُحسّنة مسبقًا. انقر على "فحص الصور غير المُحسّنة" وحدد "WebP فقط".

بمجرد الانتهاء من ذلك، سيقوم EWWW بإنشاء إصدارات WebP لجميع الصور المحددة.

للتأكد من أن خدمة WebP تعمل، افتح منشورًا يحتوي على عدة صور. انقر بزر الماوس الأيمن على الصورة واختر "فتح في علامة تبويب جديدة". إذا كان عنوان URL ينتهي بـ .webp، فهذا يعني أن موقع WordPress الخاص بك يُقدّم صور WebP بنجاح.

استخدام صور WebP في WordPress مع ShortPixel

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

يحسب المكون الإضافي كل حجم صورة تُحسّنه كإسناد، مما يعني أن تحسين أحجام صور مصغرة متعددة لصورة واحدة قد يتطلب عدة إسنادات. لا توجد قيود على حجم الملف، ويمكنك توزيع إسنادات ShortPixel الخاصة بك على عدد غير محدود من المواقع الإلكترونية، جميعها ضمن حساب ShortPixel نفسه، مما يتيح لك إدارة مواقع متعددة بمرونة.

لبدء تقديم صور WebP باستخدام ShortPixel، تحتاج إلى تثبيت البرنامج الإضافي من WordPress.org.

ثم أدخل مفتاح API الخاص بك، والذي يمكنك الحصول عليه من خلال التسجيل للحصول على حساب ShortPixel مجاني.

في علامة تبويب "الإعدادات العامة"، يمكنك ضبط تفضيلات التحسين الأساسية، مثل مستوى الضغط وتغيير حجم الصورة. لتمكين عرض WebP، فعّل الوضع المتقدم. بعد ذلك، فعّل خياري " إنشاء صور WebP" و"عرض صور WebP/AVIF...". بعد الانتهاء، حدد خيار استخدام صيغة الوسوم" . بعد ذلك، انقر على "حفظ" .

استخدام صور WebP في WordPress مع Imagify

Imagify هي إضافة لتحسين الصور على ووردبريس، طوّرها فريق WP Rocket، الإضافة الرائدة في مجال التخزين المؤقت. تُوفّر هذه الإضافة طريقة سهلة لضغط الصور وتحويلها إلى صيغة WebP لتحميل أسرع وأداء أفضل.

للبدء، قم بتثبيت وتفعيل البرنامج الإضافي Imagify على موقع WordPress الخاص بك. 

بعد تفعيل الإضافة، انتقل إلى الإعدادات > Imagify لتكوين الإضافة. انقر على "إنشاء مفتاح API مجاني" ، ثم أدخل عنوان بريد إلكتروني صالحًا. ستتلقى رسالة بريد إلكتروني تحتوي على مفتاح API الخاص بك، والذي يجب نسخه ولصقه في إعدادات الإضافة، ثم انقر على "حفظ التغييرات".

بعد ذلك، انتقل إلى قسم التحسين، وانقر فوق WEBP، وقم بتمكينه مع "عرض الصور بتنسيق Next-GEN على الموقع".

يوفر Imagify طريقتين لعرض صور WebP: طريقة .htaccess وطريقة الوسم. طريقة .htaccess أسرع، ولكنها قد لا تعمل مع شبكة توصيل المحتوى (CDN)، بينما طريقة الوسم متوافقة مع شبكات توصيل المحتوى، ولكنها قد تتعارض مع بعض السمات. اختر الطريقة الأنسب لإعداداتك، ثم انقر على "حفظ والانتقال إلى مُحسِّن التجميع".

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

للتأكد من عرض صور WebP، افتح منشورًا أو صفحة تحتوي على صور، وانقر بزر الماوس الأيمن على الصورة، ثم اختر "فتح الصورة في علامة تبويب جديدة". يجب أن ينتهي رابط الصورة بـ .webp، مما يؤكد أن Imagify يُقدّم إصدارات WebP بنجاح على موقع WordPress الخاص بك.

بالإضافة إلى تحسين الصور باستخدام الإضافات، فكّر في استخدام WP Media Folder لإدارة مكتبة وسائط ووردبريس بشكل أفضل. يُساعد هذا الإضافة على تنظيم الصور في مجلدات، مما يُسهّل التعامل مع كميات كبيرة من الوسائط، مع التكامل بسلاسة مع إضافات تحسين الصور لضمان إدارة ملفات WebP بشكل صحيح دائمًا.

فوائد WebP لتحسين الأداء

WebP هو تنسيق صور حديث مصمم لتحسين أداء مواقع الويب من خلال تقليل حجم الملفات دون المساس بالجودة. يساعد استخدام WebP على مواقع ووردبريس على تحميل الصفحات بشكل أسرع، ويوفر تجربة تصفح أكثر سلاسة، ويقلل من استهلاك النطاق الترددي، مما يجعله أداة قيّمة لتحسين أداء مواقع الويب.

أحجام ملفات أصغر

صور WebP أصغر بكثير من التنسيقات التقليدية مثل JPEG وPNG، مما يقلل حجم الملفات بنسبة 25-35% مع الحفاظ على نفس جودة الصورة. يُمكّن هذا التخفيض في الحجم صفحات الويب من التحميل بسرعة أكبر، وهو أمر بالغ الأهمية للمواقع التي تحتوي على العديد من الصور، مثل حافظات الأعمال، ومتاجر التجارة الإلكترونية، ومدونات التصوير الفوتوغرافي.

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

تحميل الصفحة بشكل أسرع

لأن صور WebP أخف وزنًا، يُمكن للمتصفحات تنزيلها بشكل أسرع، مما يُسرّع تحميل الصفحات مباشرةً. يُعدّ هذا أمرًا بالغ الأهمية لتجربة المستخدم، لأن الصفحات البطيئة التحميل غالبًا ما تُسبب الإحباط للزائرين وتزيد من معدلات الارتداد، خاصةً على الأجهزة المحمولة ذات اتصالات الإنترنت البطيئة.

تُسهّل أوقات التحميل الأسرع أيضًا تطبيق تحسينات أخرى للأداء، مثل lazy loading والتخزين المؤقت، لأن الصور نفسها لم تعد تُشكّل عائقًا. هذا يضمن استجابة موقعك وسلاسة استخدامه للمستخدمين.

أداء أفضل لتحسين محركات البحث

سرعة الموقع الإلكتروني عاملٌ حاسم في ترتيبه في محركات البحث، ويمكن أن يُحدث استخدام WebP تأثيرًا إيجابيًا على تحسين محركات البحث (SEO). تُحسّن الصفحات سريعة التحميل مقاييس تفاعل المستخدمين، مثل الوقت الذي يقضونه في الموقع وانخفاض معدل الارتداد، والتي تُفسرها محركات البحث كمؤشرات على جودة المحتوى.

بالإضافة إلى ذلك، يُمكّن WebP المواقع من الحفاظ على جودة صور عالية دون التأثير على الأداء، مما يعني إمكانية الاحتفاظ بصور جذابة ودقيقة دون المساس بتحسين محركات البحث. هذا التوازن بين الجمالية والسرعة يُساعد على جذب المزيد من الزوار والاحتفاظ بهم.

انخفاض النطاق الترددي وحمل الخادم

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

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

يدعم ميزات الويب الحديثة

يدعم WebP الضغطَين مع فقدان البيانات وبدون فقدانها، بالإضافة إلى ميزات مثل الشفافية والرسوم المتحركة. هذا التنوع يُمكّنه من استبدال العديد من تنسيقات الصور القديمة، مما يُبسط إدارة الصور مع الحفاظ على جودتها.

بفضل دعم الميزات الحديثة، يُمكّن WebP مواقع الويب من استخدام تأثيرات بصرية متقدمة دون التأثير على الأداء. ويمكن للمصممين دمج صور عالية الجودة، ورسومات متحركة، أو تراكبات شفافة، مع الحفاظ على سرعة مُحسّنة للصفحات.

خاتمة

يمكن أن يُحسّن استخدام صور WebP في ووردبريس سرعة موقعك الإلكتروني وكفاءته وأدائه العام بشكل ملحوظ. بتحويل صورك إلى صيغة WebP، يمكنك تقليل حجم الملفات دون التأثير على جودة الصورة، مما يُساعد على تحميل الصفحات بشكل أسرع، ويُخفّف الضغط على الخادم، ويُوفّر تجربة أكثر سلاسةً للزوار عبر مختلف الأجهزة. كما يُكمّل تطبيق WebP استراتيجيات التحسين الأخرى، مثل التخزين المؤقت واستخدام شبكة توصيل المحتوى (CDN)، لضمان تشغيل موقع ووردبريس بكفاءة.

بشكل عام، يوفر استخدام صور WebP مزايا متعددة، بما في ذلك تحميل أسرع للصفحات، وتحسين محركات البحث (SEO)، وتقليل استهلاك النطاق الترددي، ودعم ميزات الويب الحديثة مثل الشفافية والرسوم المتحركة. سواء كنت تستخدم إضافات مثل EWWW Optimizer أو ShortPixel أو Imagify، أو تطبق حلولاً قائمة على الخادم، فإن التحول إلى WebP يضمن بقاء موقعك الإلكتروني جذابًا بصريًا مع تحقيق الأداء الأمثل لجميع المستخدمين. لإدارة مكتبة الوسائط بشكل أفضل، استخدم WP Media Folder لتنظيم صورك بكفاءة وتسهيل تحسين WebP.