ومع ذلك ، فإن توصيل الصور عبر WebP ليس بالأمر السهل. يعتمد ذلك على خادم الويب الخاص بالخادم ، و cdn المحدد ، والموضوع ، ومكونات التخزين المؤقت ، وما إلى ذلك.
سيساعدك هذا الدليل على توصيل صور WebP إلى WordPress بثلاث طرق.
ما هو WebP؟
تنسيق صورة جديد للويب
من جوجل
WebP هو تنسيق صورة (مثل png و jpg) تم تطويره بواسطة Google. تميل صور WebP (.webp) إلى أن تكون أصغر بكثير ، مما يزيد من سرعة مواقع الويب ويستخدم نطاقًا تردديًا أقل.
اعتمادًا على الصورة ، يمكنك تقليل الحجم من 25٪ إلى 70٪.
JPEG و PNG و GIF وما إلى ذلك لها مزاياها وعيوبها. سيعطيك الجدول أدناه فكرة:
| JPG | GIF | بي إن جي | SVG | |
| المتجه | ❌ | ❌ | ❌ | ✅ |
| النقطية | ✅ | ✅ | ✅ | ❌ |
| الشفافية | ❌ | ✅ | ✅ | ✅ |
| حيوية | ❌ | ✅ | ✅ | ✅ |
| ضائع | ✅ | ❌ | ❌ | ❌ |
يحتوي WebP على جميع الميزات المذكورة أعلاه تقريبًا! إذن لماذا لا يمكننا استخدام WebP في كل مكان؟
لماذا لا تستخدم WebP في كل مكان؟
كما ترى ، فإن 80٪ فقط من الأجهزة تدعم WebP فقط. ليس فقط المتصفحات القديمة ، لا يزال Safari / iOS Safari لا يدعم WebP.
ما سبب صعوبة خدمة WebP؟
كما لاحظت ، نقوم بتسليم الصور وفقًا للمتصفح. إذا كان المستعرض لا يدعم WebP ، فيجب علينا تزويدهم بالصورة الأصلية (jpg / png / gif).
هناك طريقتان رئيسيتان لخدمة WebP:
استخدام علامة الصورة
يمكننا ان نستخدمصورةعلامة لإخبار المتصفح بأن لدينا تنسيق WebP. إذا كان المستعرض يدعمها ، فسيتم تحميل الصورة العادية / الاحتياطية.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>بإجابة مختلفة
في إجابة مختلفة كالعادة لديك ملف واحد. بالضبط:
<img src="img.jpg" />يدعم عنوان URL للصورة الواحدة تسليم ملفات jpg و webp. هذا ما يفعله الخادم.
على الرغم من أنه ملحق ملف .jpg ، إذا كان المستعرض يدعم WebP ، فستكون الاستجابة WebP. وتسمى أيضًا "الاستجابة المتنوعة".
علامة الصورة مقابل الاستجابة المتنوعة
كل له ايجابيات وسلبيات. هنا جدول مقارنة:
| علامة الصورة | استجابة متنوعة | |
|---|---|---|
| يعمل مع صور الخلفية | ❌ | ✅ |
| ودية CDN | ✅ | ✅ (القليل فقط) |
| يحتاج الخادم إلى التكوين | ❌ | ✅ (nginx) |
| يعمل مع التحميل البطيء | ✅ | ✅ |
كيف تخدم الصور في WebP في WordPress؟
الطريقة رقم 1 - استخدم CDN فقط مع تحويل fly WebP
ربما يكون هذا هو الحل الأبسط. يدعم بعض موفري CDN حاليًا تحويل الصور أثناء التنقل إلى WebP إلى جانب تحسين الصورة.
وهنا عدد قليل:
- الأرنب
- Cloudflare مع البولندية (خطة Pro)
- سحابة
- الصور التكيفية ذات البيكسل القصير (تستخدم StackPath CDN)
- ضغط الفسفور الابيض
يمكنك أيضًا توفير مساحة على القرص باستخدام هذه الطريقة حيث لا يتعين عليك تخزين صور WebP العادية والمحولة.
الأرنب
يأتي BunnyCDN مع Bunny Optimizer ، والذي يمكنه ضغط الصور وتحويلها إلى WebP أثناء الطيران.
الطريقة رقم 2 - استخدام استجابة متنوعة + CDN
كما هو موضح أعلاه ، سيكون "للاستجابة المتنوعة" عنوان URL لصورة واحدة يمكن أن يخدم كلاً من صور WebP وغير التابعة لـ Webp اعتمادًا على المتصفح المطلوب.
نحتاج أيضًا إلى اختيار CDN المناسب الذي يدعم رؤوس طلبات WebP كمفتاح ذاكرة التخزين المؤقت. بخلاف ذلك ، بمجرد تخزين صورة WebP مؤقتًا على الخادم ، سيتم تسليمها إلى المتصفحات التي لا تدعم WebP.
تخصيص الاستجابة المتنوعة في ووردبريس
أسهل طريقة لإعداد استجابة غنية لـ WebP في WordPress هي استخدام المكون الإضافي WebP Express. ما عليك سوى تثبيت البرنامج المساعد والنقر على "حفظ الإعدادات وفرض قواعد htaccess جديدة".
سيقوم WebP Express بتكوين محول WebP والكتابة فوق القواعد بحيث عندما يتلقى طلبًا ، فإنه يقوم بتحويل الصور إلى WebP أثناء التنقل ، وإذا كان المستعرض لا يدعم WebP ، فسيتم تسليم الصورة الافتراضية.
إذا كنت في Nginx
يضيف WebP Express قواعد إعادة كتابة ".htaccess" الضرورية ، ولكنه يعمل فقط على خادم Apache أو LiteSpeed أو OpenLiteSpeed. إذا كنت تستخدم Nginx ، فأنت بحاجة إلى التعديلnginx.configوأضف الكود التالي:
# قواعد WebP Express # -------------------- الموقع ~ * ^ /؟ wp-content /.* . (png | jpe؟ g) $ {add_header Vary قبول ؛ تنتهي صلاحيته 365d ؛ إذا ($ http_accept! ~ * "webp") {break؛} try_files / wp-content / webp-express / webp-images / doc-root / $ uri.webp $ uri.webp / wp-content /plugins/webp-express/wod/webp-on-demand.php؟xsource=x$request_filename&wp-content=wp-content؛}# توجيه طلبات الويب غير الموجودة إلى موقع المحول ~ * ^ /؟ wp-content / . * . (png | jpe؟ g) . webp $ {try_files $ uri / wp-content / plugins / webp-express / wod / webp-realizer.php؟ wp-content = wp-content؛} # - ----------------- (تنتهي قواعد WebP Express هنا)يضيف الكود أعلاه رؤوس الاستجابة المطلوبة (تختلف أيضًا إدارة ذاكرة التخزين المؤقت) ويحاول توصيل WebP إذا كان موجودًا ، أو قم بإعادة توجيهه إلى المحول (بناءً على دعم المتصفح)
يدعم مقدمو CDN الاستجابة المتنوعة
إذا كان موفر CDN الخاص بك لا يدعم WebP كمفتاح تخزين مؤقت ، فسيتم تسليم ملفات WebP إلى المستعرضات التي لا تدعم WebP. وبالمثل ، هناك احتمال أن يتم تسليم صور بخلاف الويب إلى المتصفحات المدعومة.
الأرنب , مفتاح CDN , جوجل CDN والعديد من موفري CDN الآخرين يدعمون WebP كمفتاح تخزين مؤقت. تأكد من تمكينها في الإعدادات.
الخامسالأرنب :
الخامسمفتاح CDN :
هل تستخدم خطة Cloudflare المجانية؟
لسوء الحظ ، لا تدعم خطة Cloudflare المجانية WebP كمفتاح تخزين مؤقت. إما أن تستخدم CDN مثل BunnCDN أو قم بالترقية إلى خطتهم المهنية.
قم بإعداد استجابة متنوعة + CDN مع مزودي الاستضافة المشهورين
تأكد من تثبيت WebP Express.
- Kinsta أو WP Engine - اتصل بفريق الدعم الخاص بهم لإضافة تكوين Nginx أعلاه وتضمين مفتاح التخزين المؤقت لـ WebP في CDN (KeyCDN).
- Cloudways - ما عليك سوى تثبيت WebP Express وحفظ الإعدادات باستخدام htacess. نظرًا لأن Cloudways تستخدم نهج Apache + Nginx الهجين ، فإنها تعمل خارج الصندوق.
- SiteGound - اتصل بالدعم لإضافة تكوين Nginx. استخدم CDN مدعوم على النحو الوارد أعلاه.
- خادم LiteSpeed / OpenLiteSpeed / Apache - ما عليك سوى تثبيت WebP Express وحفظ الإعدادات باستخدام ".htacess". استخدم أيضًا CDN مدعومًا على النحو الوارد أعلاه.
- مخصص VPS مع Nginx (LEMP Stack) - إعداد
nginx.confواستخدم CDN مدعومًا على النحو الوارد أعلاه.
الطريقة # 3 - استخدام علامة الصورة
إذا لم تعمل كلتا الطريقتين المذكورتين أعلاه من أجلك ، فيمكنك استخدام علامة الصورة. لا يتطلب تكوين الخادم (تحرير nginx.conf) ويدعم جميع موفري CDN.
سيؤدي استخدام هذه الطريقة إلى تغيير HTML لتسليم WebP. لن يعمل مع صور الخلفية ، وغير متوافق مع بعض السمات ، ومكونات التخزين المؤقت ، ومكونات التحميل البطيئة ، وما إلى ذلك.
إذا كنت تستخدم هذه الطريقة ، فسيتم تحويل جميع علامات img على النحو التالي:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>إذا كان المستعرض يدعم WebP ، يتم تسليم الملف المقابل ؛ وإلا ، يتم تسليم صورة عادية.
تخصيص علامة صورة لـ WebP في WordPress
أسهل طريقة لإعداد علامة صورة هي عبر WebP Express.
اضبط وضع التشغيل على "CDN friendly" وقم بتمكين "Alter HTML".
استنتاج
أتمنى أن يأتي اليوم الذي تدعم فيه جميع المتصفحات WebP!
إذا كان بإمكانك إنفاق بضعة دولارات شهريًا ، فإن الطريقة الأسهل والأكثر فاعلية هي استخدام CDN مثل BunnyCDN ، والذي سيحول الصور إلى WebP أثناء التنقل. خلاف ذلك ، التزم بالطريقة رقم 2 التي ذكرتها أعلاه.
