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

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

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

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

ما هو WebP؟

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

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

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

ما هو ملف WebP؟

يستخدم ملف WebP بيانات صورة VP8 أو VP8L وحاوية تستند إلى RIFF. يستخدم امتداد الملف webp. مكتبة libwebp هي التطبيق المرجعي لمواصفات WebP. يمكنك رؤية المكتبة في مستودع git أو على شكل كرة تار.

فوائد استخدام WebP

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

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

كيفية إضافة صور WebP إلى WordPress

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

صور WebP غير مدعومة أصلاً بواسطة WordPress ولكن هناك حل بديل

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

هناك عدة طرق يمكنك من خلالها إضافة صور WebP إلى WordPress. يمكنك اختيار:

1. المسار اليدوي (يتطلب ذلك القليل من شحم الكوع ولكن لا يوجد شيء معقد للغاية) ، أو
2. استخدم البرنامج المساعد.

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

إضافة صور WebP يدويًا إلى WordPress

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

تحويل الصور إلى WebP

قبل أن تتمكن من البدء في استخدام صور WebP ، يجب تحويلها إلى تنسيق الملف الصحيح بحيث تكون متوافقة مع مكتبة وسائط WordPress. للقيام بذلك ، ستحتاج إلى محول صور عبر الإنترنت مثل Online-Convert.com.

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

لاستخدام المحول ، ما عليك سوى سحب الصور وإفلاتها حيث تظهر عبارة "Drop Files Here" ، وانتظر حتى تكتمل عملية التحويل ثم قم بتنزيل صورتك الجديدة.

استخدم أداة عبر الإنترنت لتحويل الصورة إلى WebP

تحويل صور WebP عبر الإنترنت

بشكل افتراضي ، لا يسمح Adobe Photoshop بتصدير الملفات بتنسيق WebP. ومع ذلك ، يمكنك إضافة هذه الوظيفة باستخدام مكون إضافي للبرنامج نفسه. يجب تنزيل هذا المكون الإضافي المتميز لبرنامج Adobe Photoshop (وليس WordPress) وإضافته إلى مجلد Photoshop العامل على جهاز الكمبيوتر الخاص بك.

خيار آخر هو استخدام تطبيق سطح المكتب. يعد كل من Webpconv لنظام التشغيل Windows و WebPonize لنظام التشغيل Mac من تطبيقات سطح المكتب التي يمكن تنزيلها واستخدامها في وضع عدم الاتصال. يمكن لهذه البرامج إجراء تحويلات JPEG إلى WebP أو PNG إلى WebP.

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

أضف صور WebP إلى موقع الويب الخاص بك

بمجرد أن تكون صورك بالتنسيق الصحيح ، يمكنك تحميلها على موقع الويب الخاص بك بإحدى طريقتين:

1. باستخدام SFTP ، يمكنك تسجيل الدخول إلى الخادم وإضافة الصور إلى مجلد التحميلات ، أو تجاوز مكتبة الوسائط ، أو
2. يمكنك تحرير ملف jobs.php لتمكين عمليات تحميل WebP

إضافة صور WebP باستخدام البرنامج المساعد

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

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

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

هناك العديد من المكونات الإضافية المجانية والمتميزة التي تحول الصور إلى WebP. فيما يلي نظرة على بعض الخيارات المجانية.

محسن صور EWWW

قم بتنزيل EWWW Image Optimizer من مستودع WordPress

EWWW Image Optimizer عبارة عن مكون إضافي مجاني مع ميزة تحويل WebP. يقوم بإنشاء إصدار WebP من ملفات JPEG و PNG. يتضمن الكثير من الخيارات مثل قواعد إعادة الكتابة المتوافقة مع Apache وخيار إعادة كتابة WebP بديل. إنه متوافق مع كل من ذاكرات التخزين المؤقت وشبكات CDN ، ويعمل مع المكون الإضافي Cache Enabler من KeyCDN.

ربما يكون هذا هو أسهل استخدام. تتيح لك ميزات WebP المضمنة استخدام التحويل مع فقدان البيانات لـ JPEGs و بدون فقدان لـ PNGs ، ويتم التحويل تلقائيًا. كل ما عليك فعله هو تثبيت البرنامج المساعد وتمكين الميزة في علامة تبويب WebP. لا يلزم أي إعداد آخر.

مُحسِّن صور البكسل القصير

قم بتنزيل ShortPixel Image Optimizer من مستودع WordPress

ShortPixel Image Optimizer عبارة عن مكون إضافي مجاني يقوم بتحويل أي JPEG أو PNG أو GIF إلى WebP. يستخدم كلاً من الضغط مع الفقد والفقد. كما أنه يعمل مع ملحقات ذاكرة التخزين المؤقت التي تدرك WebP. يوفر صور WebP للمتصفحات التي يمكنها عرضها والتنسيقات الأخرى لأولئك الذين لا يمكنهم عرضها.

يحتوي أيضًا على خيار لإضافة صور WebP إلى صفحات الواجهة الأمامية باستخدام HTML. للقيام بذلك ، يمكنك استخدام علامة <picture> بدلاً من علامة <img> العادية. لتعيينه على تحويل الصور تلقائيًا ، ما عليك سوى تمكين الميزة في علامة التبويب خيارات متقدمة. يمكنك استعادة الصور إذا كنت تريد.

WebP Express

قم بتنزيل WebP Express من مستودع WordPress

WebP Express هو مكون إضافي مجاني ينتج صورًا يقل حجمها عن نصف حجم ملفات JPEG. يقوم بتوجيه JPEG و PNGs إلى محول صور ليتم تحويله أو إلى الصورة المحولة بالفعل. إنه يعمل بغض النظر عن كيفية وصول الصور إلى الخادم. إنه يعمل مع مكتبة الوسائط والمعارض ولصور السمات المشار إليها باستخدام CSS.

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

Opti MozJpeg Guetzli WebP

قم بتنزيل Opti MozJpeg Guetzli WebP من مستودع WordPress

يعد Opti MozJpeg Guetzli WebP مكونًا إضافيًا مجانيًا تم إنشاؤه مع وضع Google Pagespeed Insights في الاعتبار. تستخدم برامج ترميز الصور Mozilla MozJpeg و Google Guetzli و Google WebP لتحويل صورك. يمكن تثبيت برامج التشفير محليًا أو يمكنك استخدام عميل ssh المدمج. يصل إلى أجهزة التشفير عن بعد باستخدام اتصال ssh بالجهاز الظاهري للمؤلف.

يمكنه تحويل جميع ملفات PNG التي لا تحتوي على قنوات ألفا إلى ملفات JPEG. يقوم بعمل نسخة احتياطية من صورك قبل إجراء التغييرات. يمكنك إعادة الصور الخاصة بك في أي وقت تريده.

مثال على صور WebP قيد التشغيل

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

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

هذه صورة التقطتها من Unsplash. هذا ملف JPEG ، تم تقليل عرضه إلى 800 بكسل وحفظه بجودة 98٪. إنه ملف 237 كيلو بايت.

هذه هي نفس الصورة المحفوظة بتنسيق PNG. إنه ملف 1.09 ميغابايت.

هذه هي نفس الصورة المحفوظة كملف WebP. يتم حفظها أيضًا بجودة 98٪. إنه ملف 199 كيلو بايت.

هذا هو نفس ملف WebP المحفوظ عند 34٪. إنه ملف 35 كيلو بايت. من الصعب رؤية أي اختلاف بين الصور.

خواطر ختامية

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

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

هل تستخدم أو تخطط لاستخدام صور WebP في تصميمات موقع الويب الخاص بك؟ أخبرنا برأيك حول WebP في التعليقات.