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

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

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

ما هي صورة WebP؟

WebP is a modern image format developed by Google specifically for the web. Its main advantage is that it produces much smaller file sizes than traditional formats, such as JPEG and PNG, typically 25-35% smaller, while maintaining the same visual quality. This means your website can load faster without compromising image quality, which is especially beneficial for image-heavy sites, such as blogs, portfolios, or online stores.

WebP supports both lossy and lossless compression, as well as features like transparency and animation, making it a versatile alternative to multiple older formats. By reducing image file sizes, WebP helps improve overall website performance, lower bandwidth usage, and provide a smoother experience for visitors.

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

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

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

In this section, we'll explore several practical methods to implement WebP images on your WordPress site.

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

أداة EWWW Image Optimizer هي واحدة من أفضل إضافات ضغط الصور في WordPress التي لا تقوم فقط بتقليل أحجام ملفات الصور ولكنها تدعم أيضًا تنسيق WebP. يمكنها تسليم صور WebP تلقائيًا إلى المتصفحات المتوافقة، مما يساعد موقع الويب الخاص بك على التحميل بشكل أسرع وأداء أفضل.

The first step is to install and activate the EWWW Image Optimizer plugin. Once activated, go to Settings > EWWW Image Optimizer to configure its options.

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

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

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

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

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

Once completed, EWWW will generate WebP versions for all selected images.

To confirm WebP delivery is working, open a post containing multiple images. Right-click an image and select "Open in new tab". If the URL ends with .webp, it means your WordPress site is successfully serving WebP images.

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

ShortPixel is one of the most widely used WordPress image optimization plugins, designed to resize and compress images uploaded to your website automatically. Among its features, it also allows you to convert images to WebP format and serve them to browsers that support this modern format, improving page load speed and overall performance.

The plugin counts each image size you optimize as a credit, which means that optimizing multiple thumbnail sizes for a single image may use several credits. There are no restrictions on file size, and you can distribute your ShortPixel credits across an unlimited number of websites, all under the same ShortPixel account, making it flexible for managing multiple sites.

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

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

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

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

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

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

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

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

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

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

To verify that WebP images are being delivered, open a post or page with photos, right-click on an image, and select "Open image in new tab". The image URL should end with .webp, confirming that Imagify is successfully serving WebP versions on your WordPress site.

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

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

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

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

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

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

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

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

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

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

سرعة موقع الويب

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

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

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

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

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

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

By supporting modern features, WebP enables websites to use advanced visual effects without sacrificing performance. Designers can incorporate high-quality images, animated graphics, or transparent overlays, all while maintaining optimized page speed.

الاستنتاج

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

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