كيفية عرض صور WebP بدلاً من JPG أو PNG باستخدام WordPress

تقع Google في الجزء العلوي من السلسلة الغذائية عبر الإنترنت. تؤثر الشركة (أو تملي) الكثير مما يحدث عبر الإنترنت. ويواصل تنسيق الصور الجديد ، WebP ، هذا الاتجاه. مع تزايد أهمية سرعة تحميل الصفحة (ويرجع ذلك أساسًا إلى تصنيف صفحة Google) ، فإن المطورين والمصممين ينظرون إلى ضغط الصور باعتباره أسهل طريقة لتقليل أوقات التحميل. تأتي صور Google WebP أصغر بنسبة 30٪ تقريبًا من صور JPG أو PNG النموذجية وتحافظ على جودة مكافئة. وأفضل ما في الأمر أنه لا داعي للقلق بشأن تحويل صورك إلى WebP يدويًا.

سنشرح لك في هذه المقالة كيفية استخدام تنسيق الصورة الجديد هذا مع WordPress ، على الرغم من أنه غير مدعوم افتراضيًا حتى الآن.

دعنا نذهب اليها.

اشترك في قناتنا على اليوتيوب

استخدام Optimole لخدمة WebP على WordPress

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

من بين خدمات WebP التي جربناها ، فإن الخيار المفضل لدينا هو Optimole. لقد كان لدينا أفضل حظ في جعله يعمل بأقل قدر ممكن من التغيير والتبديل ، لذلك نريد أن نطلعك على كيفية إعداده وجعل تثبيت WordPress متوافقًا مع WebP بأكبر قدر ممكن من المتاعب.

أولاً ، من الواضح أنك سترغب في تنزيل وتثبيت المكون الإضافي نفسه. إنه موجود في WP.org repo ، وهو مجاني تمامًا. كما هي الخدمة المستندة إلى واجهة برمجة التطبيقات (API) التي تشغله (إلى حد ما). في حين أنه من الممكن تحويل الصور التقليدية إلى WebP أثناء التنقل باستخدام PHP ، لا يمنح كل مضيف ويب هذا الإذن لخادمك. إذا كان لديك هذا الإذن ، فيمكنك أيضًا البحث في المكون الإضافي WebP Express . يمكنك الحصول على قدر كبير من التحكم به ، لكنه يتطلب مزيدًا من التغيير والتبديل للعمل بسلاسة.

بمجرد تثبيت Optimole وتنشيطه على موقع WordPress الخاص بك ، ستجد خيار قائمة جديدًا في Media - Optimole .

مفتاح Optimole API الخاص بك

قبل أن تتمكن من الوصول إلى أي إعدادات أو تكوينات ، يجب أن يكون لديك حساب Optimole. إذا قمت بالفعل بإعداد واحد ، فيمكنك النقر فوق الزر لدي بالفعل مفتاح API . إذا لم يكن كذلك ، قم بالتسجيل والبريد الإلكتروني مفتاح API . الحساب الأساسي لمفتاح API مجاني ، وتحصل على ما يقرب من 5000 زيارة على هذا المستوى. إذا كنت بحاجة إلى أكثر من ذلك ، فهناك مستويات تسعير متاحة.

يُعرِّف Optimole الزيارة بأنها " أي شخص يزور موقعك مرة واحدة [. . .] يتم احتساب كل مستخدم مرة واحدة فقط. لا يهم ما يفعلونه على موقعك ، أو عدد الصور التي يقومون بتنزيلها ، أو عدد الصفحات التي يزورونها ؛ إنه مستخدم واحد فقط. إذا غادروا موقعك وعادوا في نفس اليوم ، فهم لا يزالون مجرد مستخدم واحد. "

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

ما عليك سوى لصقها مرة أخرى على لوحة معلومات WordPress الخاصة بك ، وستكون جاهزًا لبدء تقديم صور WebP باستخدام WordPress.

لوحات تحكم Optimole WordPress الخاصة بك

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

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

ثم هناك علامة التبويب " المشاكل المحتملة" في الأعلى. لا أحد يحب أن يرى علامة التبويب مميزة ، لكننا جميعًا نحتاج أيضًا إلى معرفة التعارضات التي قد تنشأ أيضًا.

المشكلة الأساسية التي واجهناها هي مع ضغط الصور ومكونات التوصيل الأخرى. كما ترى في الصورة أعلاه ، يعمل المكون الإضافي Jetpack بطريقة مشابهة لـ Optimole عبر Photon APIT ، حتى يتمكنوا من ارتطام الرؤوس. بالنسبة لنا ، يتجلى ذلك في عدم تسليم أي صورة للزائر على الإطلاق. ليس لدينا أي مشاكل مع خدمات الضغط الأخرى مثل TinyPNG أو Smush.

استخدام لوحات المعلومات

إذا كنت تريد المزيد من المعلومات التفصيلية حول كيفية أداء موقعك مع WebP ، فإن لوحة معلومات Optimole الخارجية تحتوي على هذه المعلومات لك.

بدلاً من حجم أصغر بمقدار 9.5 مرة ، يمكنك رؤية أحجام الملفات الفعلية التي تم تقديمها. بالإضافة إلى الملفات نفسها على مدار 30 يومًا.

يمكنك أيضًا تعيين العلامات المائية في لوحة معلومات Optimole (أو WP) بحيث عندما يتم تقديم WebP لشخص ما من موقع WordPress الخاص بك ، سيتم تمييز شعارك تلقائيًا. إنها عملية بسيطة ، ويمكنك التحكم في التعتيم والموقع وما إلى ذلك.

يمكنك بشكل أساسي أن تفعل نفس الأشياء من كلا لوحتي المعلومات. إما ضمن علامة التبويب " الإعدادات" في WordPress ، أو من خلال زيارة لوحة القيادة الخارجية في Optimole. يعتمد الأمر كليًا على ما تشعر بالراحة تجاهه ، بالإضافة إلى مستوى البيانات التي تحتاجها في أي وقت.

بالإضافة إلى ذلك ، ستكون قادرًا على التحكم في مستوى الضغط ، والتحميل البطيء ، ومتى / إذا تم تقديم صور معينة على أنها WebP استنادًا إلى أسماء الملفات. ستجد كل هذا ضمن علامة التبويب " الإعدادات" في Media - Optimole .

تغليف

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

ما هو شعورك تجاه تقديم صور WebP إلى زوار موقعك على الويب؟

المادة مميزة صورة بواسطة vladwel / shutterstock.com