إذا كنت ترغب في تسريع موقع وورد بريس الخاص بك ، فإن تقليل حجم ملف صورك يوفر عائدًا كبيرًا على استثمارك. في المتوسط ، تمثل الصور حوالي نصف حجم ملف صفحة الويب ، لذلك حتى التحسينات الطفيفة يمكن أن تسفر عن نتائج ضخمة. يمكن أن يساعدك WebP بشكل كبير في ذلك!
WebP هو تنسيق صور حديث يمكنه مساعدتك في تقليل حجم صورك دون تغيير شكلها. في المتوسط ، يمكن أن يؤدي تعلم كيفية تحويل صورة إلى WebP إلى تقليص حجم ملفها بنسبة تتراوح من 25 إلى 35٪ تقريبًا دون فقدان ملحوظ في الجودة.
تدعم معظم المتصفحات الحديثة و وورد بريس 5.8+ WebP خارج الصندوق. في هذه المقالة ، سوف نتعمق في هذا التنسيق الجديد المثير للصورة ونوضح لك كيف يمكنك الاستفادة من روعة هذا الشكل.
مستعد؟ هيا بنا نبدأ!
إذن ، ما هو ملف WebP؟ باختصار ، WebP هو تنسيق صور تم تطويره بواسطة Google لتحسين الصور بشكل أفضل من تنسيقات الصور الشائعة (في ذلك الوقت). على سبيل المثال ، لديك تنسيقات صور مثل JPEG أو JPG و PNG.
ملاحظة: تحقق من مدى تأثير أنواع ملفات الصور المختلفة على سرعة موقع الويب الخاص بك.
يركز WebP على تقديم نفس ملف الصورة ، فقط بأحجام ملفات أصغر. من خلال تقليل حجم ملفات الصور ، لا يزال بإمكانك تقديم نفس التجربة لزوار موقع الويب الخاص بك ، ولكن سيتم تحميل موقعك بشكل أسرع .
على سبيل المثال ، في دراسة ضغط Google WebP ، وجدت Google أن ملف صورة WebP هو في المتوسط:
25-34٪ أصغر من صورة JPEG قابلة للمقارنة.
26٪ أصغر من صورة PNG قابلة للمقارنة.
هذا هو السبب في أنك إذا قمت بتشغيل موقعك من خلال PageSpeed Insights ، فإن إحدى التوصيات العديدة هي عرض الصور بتنسيقات الجيل التالي مثل WebP :
تقترح Google PageSpeed Insights استخدام صور WebP
تقترح Google PageSpeed Insights استخدام صور WebP
إذن كيف يحقق تنسيق WebP من Google هذه التخفيضات في حجم الملف؟
أولاً ، يدعم الضغط مع الفقد والخسارة ، لذا فإن التخفيض الدقيق سيعتمد على ما إذا كنت تستخدم ضغطًا ضياعًا أو بدون فقدان.
باستخدام الضغط مع الفقد ، يستخدم WebP شيئًا يسمى “الترميز التنبئي” لتقليل حجم الملف. يستخدم الترميز التنبئي قيم وحدات البكسل المجاورة في الصورة للتنبؤ بالقيم ثم يقوم بترميز الفرق فقط. يعتمد على ترميز الإطار الرئيسي VP8.
يستخدم Lossless WebP مجموعة أكثر تعقيدًا من الأساليب التي طورها فريق WebP.
إذا كنت تريد التعرف على تقنيات ضغط WebP بالتفصيل ، فهذه المقالة هي نقطة بداية جيدة .
لكي تعمل صور WebP ، يحتاج مستعرض الويب الخاص بالزائر إلى دعمها. لسوء الحظ ، بينما نما دعم المتصفح كثيرًا ، لا يزال توافق WebP غير شامل .
صور WebP مدعومة من قبل المتصفحات الشائعة مثل:
مايكروسوفت ايدج
iOS و macOS Safari ( macOS 11 Big Sur والإصدارات الأحدث فقط )
Opera ( سطح المكتب والجوال )
في الوقت الذي نكتب فيه هذا المنشور ، يدعم Safari صور WebP جزئيًا فقط.
يفتقر Internet Explorer أيضًا إلى دعم WebP (لكن Edge يدعم WebP لأنه يعتمد على Chromium). ومع ذلك ، تقلص استخدام IE إلى أقل من 1٪ من إجمالي مستخدمي الإنترنت. هذه نعمة للجميع على الويب!
في المجموع ، يستخدم حوالي 95٪ من مستخدمي الإنترنت متصفحًا يدعم WebP. لذلك في حين أنه يحظى بالتأكيد بدعم الأغلبية ، فإن 5 ٪ يمثل عقبة بسيطة ، خاصةً عندما يكون مستخدمو Safari على إصدارات macOS الأقدم. في برنامج وورد بريس WebP التعليمي أدناه ، سنوضح لك كيفية التعامل مع هذا حتى يتمتع جميع زوارك بتجربة رائعة.
وفقًا لاختبارات Google ، فإن صور WebP هي:
25-34٪ أصغر من صور JPEG المماثلة.
26٪ أصغر من صور PNG المماثلة.
إذا كنت تريد معرفة المزيد حول منهجية Google ، فيمكنك العثور على روابط مباشرة للنتائج الكاملة أدناه:
JPEG
بي إن جي
يعتمد كلا الاختبارين على أكثر من 11000 صورة ، بما في ذلك:
صورة لينا الشهيرة
24 صورة من مجموعة الصور الملونة الحقيقية كوداك
100 صورة من Tecnick.com
عينة عشوائية من 11000+ صورة من بحث الصور من Google
بدءًا من وورد بريس 5.8 ، ستتمكن من استخدام تنسيق صورة WebP بنفس طريقة استخدام تنسيقات JPEG و PNG و GIF. ما عليك سوى تحميل الصور الخاصة بك إلى مكتبة الوسائط الخاصة بك وتضمينها في المحتوى الخاص بك. نظرًا لأن وورد بريس 5.8+ يدعم تنسيق WebP افتراضيًا ، فلن تضطر إلى تثبيت مكونات إضافية تابعة لجهات خارجية لتحميل صور WebP. يجب أن يكون هذا كافياً لحالات الاستخدام الأكثر شيوعًا.
للبدء على الفور ، يمكنك الرجوع إلى كتابنا التمهيدي السريع حول استخدام صور WebP في وورد بريس 5.8+ . نقترح عليك مراجعة التحذيرات المتعلقة بدعم WebP في وورد بريس .
ومع ذلك ، يستخدم حوالي 5٪ من الأشخاص (معظمهم من مستخدمي Safari على نظام macOS الأقدم) متصفح ويب لا يدعم WebP. إذا قمت بتحويل صور WebP واستخدمتها مباشرة في المحتوى الخاص بك ، فلن يتمكن هؤلاء الزوار من رؤية صورك ، مما قد يفسد تجربة التصفح لديهم.
أيضًا ، لا يعد إنشاء صور WebP مباشرًا مثل الحصول على صورة JPG / JPEG ، وهو تنسيق ملف الصور الافتراضي في معظم الكاميرات والهواتف الذكية ومكتبات الصور عبر الإنترنت . لا يدعم وورد بريس التحويل التلقائي للصور إلى تنسيق WebP (حتى الآن!).
لا تأكل! هناك حل.
يمكنك استخدام مكون وورد بريس الإضافي الذي يحول صورك الأصلية إلى تنسيق WebP ويوفر أيضًا الصورة الأصلية كبديل إذا كان متصفح الزائر لا يدعم WebP.
على سبيل المثال ، إذا قمت بتحميل ملف JPEG إلى موقعك ، فسيقوم المكون الإضافي بما يلي:
قم بتحويل ملف JPEG إلى WebP وتقديم إصدار WebP لمتصفح Chrome و Firefox و Edge وما إلى ذلك.
اعرض ملف JPEG الأصلي للزائرين الذين يتصفحون Safari (على إصدارات macOS الأقدم) والمتصفحات الأخرى التي لا تدعم WebP.
بهذه الطريقة ، يمكن للجميع رؤية صورتك ، ويحصل الجميع على أسرع تجربة ممكنة.
أدناه ، سنستعرض بعضًا من أفضل مكونات WebP وورد بريس الإضافية ، وكلها تعمل مع Kinsta و Kinsta CDN .
بكسل قصير
تخيل
أوبتيمول
معلومات
إذا كنت تستضيف في Kinsta ، فستحتاج إلى التواصل مع دعمنا حتى نتمكن من إنشاء قاعدة Nginx لحاويات ذاكرة التخزين المؤقت لـ WebP لبعض هذه المكونات الإضافية.
البرنامج المساعد ShortPixel وورد بريس
البرنامج المساعد ShortPixel وورد بريس
ShortPixel عبارة عن مكوّن إضافي لتحسين الصور في وورد بريس يمكن أن يساعدك تلقائيًا في تغيير حجم وضغط الصور التي تقوم بتحميلها إلى موقع وورد بريس الخاص بك.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
كجزء من قائمة الميزات الخاصة به ، يمكن أن يساعدك ShortPixel أيضًا في تحويل الصور تلقائيًا إلى WebP وتقديم تلك الصور إلى المتصفحات التي تدعمها.
لدى ShortPixel خطة مجانية محدودة تتيح لك تحسين حوالي 100 صورة شهريًا مجانًا. تبدأ الخطط المدفوعة من 4.99 دولارًا أمريكيًا شهريًا لما يصل إلى 5000 صورة / رصيد أو 9.99 دولارًا لمرة واحدة لمجموعة من 10000 رصيد.
تحسب ShortPixel حجم كل صورة في وورد بريس تقوم بتحسينها كرصيد. لذلك إذا كنت ترغب في تحسين أحجام متعددة للصور المصغرة ، فمن الممكن أن تستخدم صورة واحدة العديد من الائتمانات. لا توجد حدود لحجم الملف للصور.
يمكنك نشر أرصدة ShortPixel الخاصة بك على عدد غير محدود من مواقع الويب – لا توجد حدود لكل موقع ( ويمكن لجميع مواقع الويب الخاصة بك استخدام نفس حساب ShortPixel ).
لاستخدام ShortPixel لخدمة صور WebP على وورد بريس ، ستحتاج إلى تثبيت المكون الإضافي من وورد بريس.org وإضافة مفتاح API الخاص بك ( والذي يمكنك الحصول عليه من خلال التسجيل للحصول على حساب ShortPixel مجاني ).
في عام التبويب، يمكنك إعداد الإعدادات الأساسية لكيفية عمل صورة الأمثل. على سبيل المثال ، ما هو مستوى الضغط الذي يجب استخدامه وما إذا كنت تريد تغيير حجم الصور أم لا:
كيفية ضبط مستوى الضغط وأبعاد الصورة في ShortPixel
كيفية ضبط مستوى الضغط وأبعاد الصورة في ShortPixel
لتمكين صور WebP ، انتقل إلى علامة التبويب خيارات متقدمة ثم:
حدد المربع الخاص بصور WebP
حدد المربع لتقديم إصدارات WebP … (يظهر هذا بعد تحديد المربع الأول)
حدد زر الاختيار لاستخدام بناء جملة علامة <PICTURE> (يظهر هذا بعد تحديد المربع السابق)
اترك الإعداد الافتراضي فقط من خلال تحديد خطافات وورد بريس
كيفية تمكين صور وورد بريس WebP في ShortPixel
كيفية تمكين صور وورد بريس WebP في ShortPixel
ثم احفظ التغييرات.
إذا كنت تستضيف في Kinsta ، فسوف تعطيك ShortPixel رسالة تحذير حول تكوين ملفات تهيئة الخادم على Nginx. لتهيئة هذه الإعدادات ، يمكنك التواصل مع دعم Kinsta ، وسنكون سعداء بإعداد تهيئة الخادم لك.
Imagify هو مكون إضافي شائع لتحسين الصور من نفس المطور مثل WP Rocket ( أحد مكونات التخزين المؤقت القليلة التي تعمل مع Kinsta ).
يمكنه ضغط الصور التي تقوم بتحميلها إلى موقع وورد بريس الخاص بك وتغيير حجمها تلقائيًا. بعد ذلك ، يمكن أن يساعدك أيضًا في تحويلها إلى WebP وتقديم هذه الإصدارات للزوار الذين لديهم متصفحات تدعمها.
هل سئمت من مضيف بطيء لموقع وورد بريس الخاص بك؟ نحن نقدم خوادم فائقة السرعة ودعمًا عالميًا على مدار الساعة طوال أيام الأسبوع من خبراء وورد بريس. تحقق من خططنا
من حيث الميزات ، تشترك ShortPixel و Imagify في الكثير من أوجه التشابه. يأتي الاختلاف الأكثر أهمية عندما تنظر إلى الأسعار. في حين أن ShortPixel تفرض عليك رسومًا استنادًا إلى الصور التي لا يوجد حد لحجمها لكل صورة ، فإن Imagify تفرض عليك رسومًا بناءً على الحجم الإجمالي للملف ، بدون حد للصورة.
لذلك إذا كنت بحاجة إلى تحسين الكثير من الصور الكبيرة ، فقد يكون أسلوب ShortPixel أرخص. ولكن إذا كنت بحاجة إلى تحسين الكثير من الصور الصغيرة ، فقد يكون نهج Imagify أكثر تكلفة.
Imagify لديه مستوى مجاني محدود يسمح بتحسين 25 ميغابايت شهريًا. بعد ذلك ، تبدأ الخطط المدفوعة من 4.99 دولارًا أمريكيًا شهريًا لما يصل إلى 1 جيجابايت أو 9.99 دولارًا لرصيد لمرة واحدة يبلغ 1 جيجابايت.
مثل ShortPixel ، يمكنك نشر حدود حسابك على مواقع غير محدودة.
لاستخدام Imagify لتقديم صور وورد بريس WebP ، ستحتاج إلى تثبيت المكون الإضافي من وورد بريس.org وإضافة مفتاح API الخاص بك للبدء.
بمجرد تنشيط المكون الإضافي ، يمكنك استخدام مربع الإعدادات العامة لاختيار مستوى الضغط الخاص بك.
كيفية ضبط مستوى الضغط في Imagify
كيفية ضبط مستوى الضغط في Imagify
لتمكين صور WebP ، قم بالتمرير لأسفل إلى قسم التحسين وابحث عن قسم تنسيق WebP :
حدد المربع لإنشاء إصدارات webp للصور
حدد المربع لعرض الصور بتنسيق webp …
حدد زر الاختيار لاستخدام علامات <picture>
إذا كنت تستضيف في Kinsta وتستخدم Kinsta CDN ، فأدخل عنوان URL الخاص بـ Kinsta CDN (بما في ذلك https: // ) في مربع إذا كنت تستخدم CDN (سنخبرك بكيفية العثور على عنوان URL الخاص بـ Kinsta CDN أدناه)
كيفية تمكين صور وورد بريس WebP في Imagify
كيفية تمكين صور وورد بريس WebP في Imagify
إذا كنت تستخدم Kinsta CDN ، فيمكنك العثور على عنوان URL الخاص بـ CDN عن طريق فتح موقعك في لوحة معلومات MyKinsta وزيارة علامة التبويب Kinsta CDN لإعدادات الموقع:
كيفية العثور على عنوان URL الخاص بـ Kinsta CDN
كيفية العثور على عنوان URL الخاص بـ Kinsta CDN
كما هو الحال مع ShortPixel ، إذا كنت تستضيف في Kinsta ، فستحتاج إلى إنشاء قاعدة Nginx لحاويات ذاكرة التخزين المؤقت لـ WebP (تواصل مع دعم Kinsta).
Optimole هو مكون إضافي لتحسين الصور في وورد بريس يعمل بشكل مختلف قليلاً عن Imagify و ShortPixel. يمكن لـ Optimole ضغط الصور وتغيير حجمها تلقائيًا. ومع ذلك ، فإنه يحتوي أيضًا على ميزتين بارزتين أخريين:
يمكنه تقديم صورك عبر شبكة CDN الخاصة به (المدعومة من Amazon CloudFront).
إنه يوفر صورًا تكيفية في الوقت الفعلي حيث تقدم Optimole الصورة بالحجم الأمثل لكل زائر. على سبيل المثال ، سيحصل الشخص الذي يتصفح على شاشة صغيرة على صورة ذات دقة أقل من الشخص الذي يتصفح على شاشة Retina.
يشبه هذا النهج خدمات التحسين / التلاعب الأخرى في الوقت الفعلي مثل Cloudinary ، و imgix ، و KeyCDN Image Processing ، إلخ.
يمكن لـ Optimole أيضًا تسليم صور WebP للزائرين باستخدام المتصفحات التي تدعمها كجزء من تحسين الصورة في الوقت الفعلي.
لدى Optimole خطة مجانية محدودة يمكنها التعامل مع عرض الصور لحوالي 5000 زائر شهريًا. بعد ذلك ، تبدأ الخطط المدفوعة بـ 19 دولارًا شهريًا لحوالي 25000 زائر.
للبدء ، ستحتاج إلى تثبيت المكون الإضافي من وورد بريس.org وتنشيطه باستخدام مفتاح API ( والذي يمكنك الحصول عليه من خلال التسجيل للحصول على حساب Optimole مجاني ).
بمجرد القيام بذلك ، ستبدأ Optimole تلقائيًا في تحسين صورك وتسليمها عبر شبكة CDN الخاصة بها . يتم تشغيل دعم WebP افتراضيًا ، لذلك لا داعي لتمكينه يدويًا.
لتكوين الإعدادات الأخرى ، مثل مستويات الضغط وسلوك القياس ، يمكنك الانتقال إلى Media → Optimole → Settings :
منطقة إعدادات Optimole – يتم تمكين صور وورد بريس WebP افتراضيًا
يقوم Optimole بتمكين صور وورد بريس WebP افتراضيًا.
نظرًا لأن Optimole يتولى تسليم صورك عبر CDN الخاص به ، فلا داعي لإعداد أي قواعد Nginx إذا كنت تستضيف في Kinsta.
تشكل صور موقع وورد بريس الخاص بك جزءًا كبيرًا من حجم ملف متوسط الصفحة. إذا تمكنت من إيجاد طرق لتقليل حجم صورك ، فيمكنك تسريع موقعك دون الإضرار بتجربة المستخدم. WebP هو تنسيق صور حديث يفعل ذلك بالضبط من خلال تقديم تخفيض بنسبة 25٪ تقريبًا في حجم الملف مقابل ملفات JPEG أو PNG المقارنة.
يستخدم حوالي 95٪ من مستخدمي الإنترنت متصفحًا يدعم WebP. تدعم إصدارات وورد بريس 5.8+ أيضًا WebP خارج منطقة الجزاء الآن. لذلك لا يوجد سبب يمنعك من استخدامه.
ومع ذلك ، لا تزال أقلية من المتصفحات ، لا سيما Safari على إصدارات macOS الأقدم ، لا تقدم دعم WebP. ومن ثم ، لا يمكنك تقديم صور WebP لجميع الزوار حتى الآن. لمعالجة هذه المشكلة ، يمكنك استخدام مكون وورد بريس الإضافي الذي يحول الصور إلى WebP ويقدم إصدارات WebP للزوار الذين تدعمها متصفحاتهم أثناء استخدام الصور الأصلية للزائرين الذين لا تدعمهم متصفحاتهم.
