طريقة إستخدام WebP لضغط الصور على ووردبريس

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

ماهي WebP Images ؟

WebP images هو شكل جديد من الصور تم تطويره من طرف جوحل (كما هو شأن إضافة Google AMP) الذي سبق وان تحدثنا عنه في مقالتنا السابقة.

لماذا تعتبر صورة WebP أفضل من باقي الصور ؟

تتميز صيغة WebP بصغر حجمها فهي توفر حوالي 26% من حجم الصور مقارنة مع باقي صيغ الصور الأخرى (JPEG و PNG). فالحصول على صورة سريعة التحميل وتوفير 25-34% من الصورة الأصلية هو جد إيجابي لموقعك والجدير بالذكر أيضا أن عملية تحويل صيغة الصورة إلى WebP لا تفقد الصورة جودتها.

تتميز WebP عن كل أشكال الصور الأخرى مثل JPEG، PNG أو GIF ب :

إيجابيات استخدام WebP :

• الصورة أصغر حجما.
• شكل موحد لجميع أنواع الصور JPEG، PNG، GIF وجميعها يمكن تحويلها إلى WebP.
• جودة الصورة عالية وبنفس الجودة على الرغم من صغر حجمها.

أما فيما يخص سلبيات إستخدام WebP، فحاليا WebP تدعم فقط متصفح Google Chrome و Opera, ولاكن مع الإضافة المناسبة يمكنك ضبط الإعدادات لعرض صيغ الصور JPEG أو PNG في حالة كان متصفح الزائر لا يدعم WebP.

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

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

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

في حالة لم تود الاعتماد على Jetpack هناك طريقة ثانية وهي بالاعتماد على إضافتين، واحدة لإنشاء الصور والثانية لعرضها على موقعك.

سأقوم بشرح كلتا الطريقتين، وسأعتمد في ذلك على إضافة Jetpack بالنسبة للطريقة الاولى، أما الطريقة الثانية سأعتمد على إضافة Shortpixel Image optimizer وإضافة KeyCDN Cache Enabler.

طريقة إضافة WebP للووردبريس بالإعتماد على Jetpack Photon

لإضافة WebP عن طريق Jetpack سوف تحتاج إلى تثبيت إضافة Jetpack.

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

بعد تنصيب إضافة Jetpack وتفعيلها ستظهر نافدة للإتصال بموقع WordPress.com لتسجيل الدخول وبالتالي ربط حسابك بالإضافة.

بمجرد الإتصال بموقع WordPress.com يمكنك إختيار الخطة المجانية كما مبين في الصورة أو إختيار أي خطة متقدمة حسب متطلباتك وميزانيتك.

“الخطة المجانية تفي بالغرض”

بعد ذلك قم بالذهاب إلى القائمة الجانبية من لوحة تحكم مدونتك وقم بإختيار  Jetpack ثم إضغط على الإعدادات.

في تبويب Appearance سيظهر لك تبويب الفوتون قم بتفعيله كما مبين في الصورة:

بعد تفعيل خيار الفوتون ستقوم الآن الاضافة بتفعيل خاصية WebP على النتصفحات الداعمة لها.

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

في الأسطر القادمة سنقوم بالإعتماد على طريقة ثانية مغايرة عن الطريقة الاولى والتي تجعلنا غير مرتبطين بإضافة Jetpack.

طريقة إضافة WebP للووردبريس بالإعتماد على ShortPixel و Cache Enabler

لهذه الطريقة ستحتاج أولا إلى إنشاء نسخة WebP لصورك بإستخدام إضافة لضغط الصور, سأقوم بالإعتماد في ذلك على إضافة ShortPixel التي تدعم WebP أو يمكنك الإعتماد على أي إضافة تناسبك شرط أن تكون تدعم WebP.

بداية قم بثبيت وتفعيل إضافة ShortPixel.

لبدأ ضغط صورك ستحتاج إلى مفتاح API, قم بوضع بريدك الإلكتروني وقم بالضغط على Request Key.

بمجرد الضغط على Request Key ستفتح نافدة جدبدة تجد فيها المفتاح.

قم بإدخال المفتاح في خانة API Key وإضغط على Validate لبدأ إعداد الإضافة.

لتفعيل خاصية WebP قم بالذهاب إلى تبويب Advanced وبعدها قم بتفعيل خيار WebP versions بوضع علامة صح في المربع.

النسخة المجانية من الاضافة تتيح لك فقط 150 صورة بصيغة WebP في الشهر وهذا العدد كافي للمدونين.

بعد الإنتهاء من ضبط الإعدادات قم بالذهاب الى وسائط من القائمة الجانية للوحة تحكم مدونتك ثم إختر Bulk ShortPixel ثم Start Optimizing لبدأ عملية ضغط الصور.

عرض صور WebP على المتصفحات الداعمة لها

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

ليستطيع الووردبريس ذلك يتوجب عليك تنصيب إضافة أخرى تدعى Cache Enabler.

Cache Enabler هي إضافة كباقي إضافات التخزين المؤقت ولاكن مايميزها هو دعمها لصيغة WebP بالاضافة لجميع مميزات إضافات الكاش الاخرى.

إذا كنت تستعمل أي إضافة أخرى للتخزين المؤقت لا تدعم WebP يتوجب عليك إلغاء تفعيلها قبل تثبيت وتفعيل إضافة Cache Enabler.

بمجرد التأكد انه ليس هناك أي إضافة للتخزين المؤقت مفعلة على مدونتك قم بتثبيت وتفعيل إضافة Cache Enabler.

قم بالذهاب الآن إلى الإعدادات ثم Cache Enabler للشروع في ضبط إعدادات الاضافة.

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

وبمجرد تفعيل خيار “WebP” ستقوم إضافة Cache Enabler بالتعاون مع إضافة ShortPixel بعرض صور WebP على المتصفحان المتوافقة.

إذا كنت تستعمل أي إضافة للتخزين المؤقت ولاتريد تعويضها بإضافة Cache Enabler فإني اوصي بإستخدام إضافة EWWW Image Optimizer, بإستطاعتها العمل مع إضافات التخزين المؤقت لعرض صور WebP على مدونتك، لاكن هذا سيكلفك ميزانية لذلك لذا انا لا اوصي بها إلا في الحالات الضرورية.

صور WebP تجعل فعلا مدونتك سريعة

WebP هي طريقة مميزة وفعالة لتسريع مدونتك وبمجرد بدأ دعم هذه النوعية من الصور من طرف متصفح الفيرفكس ومتصفح سفاري ستتمكن من جعل WebP يصل لجميع زوارك وبالتالي جعل موقعك سريع التحميل.

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