हालाँकि, WebP के माध्यम से चित्र वितरित करना आसान नहीं है। यह आपके सर्वर के वेबसर्वर, चयनित सीडीएन, थीम, कैशिंग प्लगइन्स आदि पर निर्भर करता है।
यह मार्गदर्शिका आपको वेबपी छवियों को वर्डप्रेस पर तीन तरीकों से वितरित करने में मदद करेगी।
वेबपी क्या है?
वेब के लिए नया छवि प्रारूप
गूगल द्वारा
वेबपी गूगल द्वारा विकसित एक छवि प्रारूप (जैसे पीएनजी और जेपीजी) है। WebP (.webp) छवियां बहुत छोटी होती हैं, जो वेबसाइटों को गति देती हैं और कम बैंडविड्थ का उपयोग करती हैं।
छवि के आधार पर, आप आकार को 25% से घटाकर 70% कर सकते हैं।
JPEG, PNG, GIF, आदि के अपने फायदे और नुकसान हैं। नीचे दी गई तालिका आपको एक विचार देगी:
| जेपीजी | जीआईएफ | पीएनजी | एसवीजी | |
| वेक्टर | ❌ | ❌ | ❌ | ✅ |
| रेखापुंज | ✅ | ✅ | ✅ | ❌ |
| पारदर्शिता | ❌ | ✅ | ✅ | ✅ |
| एनीमेशन | ❌ | ✅ | ✅ | ✅ |
| खोया | ✅ | ❌ | ❌ | ❌ |
WebP में ऊपर बताई गई लगभग सभी विशेषताएं हैं! तो फिर हम हर जगह WebP का इस्तेमाल क्यों नहीं कर सकते?
हर जगह WebP का उपयोग क्यों नहीं करते?
जैसा कि आप देख सकते हैं, केवल 80% डिवाइस केवल वेबपी का समर्थन करते हैं। केवल पुराने ब्राउज़र ही नहीं, Safari/iOS Safari अभी भी WebP का समर्थन नहीं करता है।
WebP की सेवा करना इतना कठिन क्यों है?
जैसा कि आपने देखा, हम ब्राउज़र के अनुसार चित्र वितरित करते हैं। यदि ब्राउज़र वेबपी का समर्थन नहीं करता है, तो हमें उन्हें मूल छवि (jpg/png/gif) प्रदान करनी होगी।
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 फ़ाइल एक्सटेंशन है, अगर ब्राउज़र वेबपी का समर्थन करता है, तो प्रतिक्रिया वेबपी होगी। इसे "विविध प्रतिक्रिया" भी कहा जाता है।
छवि टैग बनाम विविध प्रतिक्रिया
प्रत्येक के अपने पक्ष और विपक्ष हैं। यहाँ एक तुलना तालिका है:
| छवि टैग | विविध प्रतिक्रिया | |
|---|---|---|
| पृष्ठभूमि छवियों के साथ काम करता है | ❌ | ✅ |
| सीडीएन अनुकूल | ✅ | (बस कुछ ही) |
| सर्वर को कॉन्फ़िगर करने की आवश्यकता है | ❌ | (nginx) |
| आलसी लोडिंग के साथ काम करता है | ✅ | ✅ |
वर्डप्रेस में वेबपी में छवियों की सेवा कैसे करें?
विधि # 1 - सीडीएन का उपयोग केवल फ्लाई वेबपी रूपांतरण के साथ करें
यह शायद सबसे सरल उपाय है। कुछ सीडीएन प्रदाता वर्तमान में छवि अनुकूलन के साथ-साथ वेबपी रूपांतरण के लिए ऑन-द-फ्लाई छवि का समर्थन करते हैं।
यहाँ कुछ है:
- बनीसीडीएन
- पोलिश के साथ Cloudflare (प्रो प्लान)
- बादल
- शॉर्टपिक्सल अनुकूली छवियां (स्टैकपाथ सीडीएन का उपयोग करता है)
- WP संपीड़न
आप इस पद्धति का उपयोग करके डिस्क स्थान भी बचा सकते हैं क्योंकि आपको सामान्य और परिवर्तित वेबपी छवियों दोनों को संग्रहीत करने की आवश्यकता नहीं है।
बनीसीडीएन
बनीसीडीएन बनी ऑप्टिमाइज़र के साथ आता है, जो छवियों को संपीड़ित कर सकता है और उन्हें फ्लाई पर वेबपी में परिवर्तित कर सकता है।
विधि #2 - विविध प्रतिक्रिया + सीडीएन का उपयोग करना
जैसा कि ऊपर वर्णित है, "विविध प्रतिक्रिया" में एक एकल छवि URL होगा जो अनुरोधित ब्राउज़र के आधार पर वेबपी और गैर-वेबपी दोनों छवियों की सेवा कर सकता है।
हमें सही सीडीएन चुनने की भी आवश्यकता है जो वेबपी अनुरोध शीर्षलेखों को कैश कुंजी के रूप में समर्थन देता है। अन्यथा, एक बार वेबपी छवि सर्वर पर कैश हो जाने के बाद, इसे उन ब्राउज़रों को डिलीवर किया जाएगा जो वेबपी का समर्थन नहीं करते हैं।
वर्डप्रेस में विविध प्रतिक्रिया को अनुकूलित करना
वर्डप्रेस में वेबपी के लिए रिच रिस्पांस सेट करने का सबसे आसान तरीका वेबपी एक्सप्रेस प्लगइन का उपयोग करना है। बस प्लगइन स्थापित करें और "सेटिंग्स सहेजें और नए .htaccess नियमों को लागू करें" पर क्लिक करें।
वेबपी एक्सप्रेस वेबपी कनवर्टर को कॉन्फ़िगर करेगा और नियमों को अधिलेखित करेगा ताकि जब उसे एक अनुरोध प्राप्त हो, तो वह छवियों को वेबपी में बदल देगा, और यदि ब्राउज़र वेबपी का समर्थन नहीं करता है, तो डिफ़ॉल्ट छवि वितरित की जाएगी।
यदि आप Nginx . में हैं
WebP Express आवश्यक '.htaccess' पुनर्लेखन नियम जोड़ता है, लेकिन केवल Apache, LiteSpeed, या OpenLiteSpeed सर्वर पर काम करता है। यदि आप Nginx का उपयोग कर रहे हैं तो आपको संपादित करने की आवश्यकता हैnginx.configऔर निम्नलिखित कोड जोड़ें:
# वेबपी एक्सप्रेस नियम# ------------------------ स्थान ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary स्वीकार करें;समाप्त 365d;if ($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;}# -- ----------------- (वेबपी एक्सप्रेस नियम यहां समाप्त होते हैं)उपरोक्त कोड आवश्यक प्रतिक्रिया शीर्षलेख जोड़ता है (कैश प्रबंधन भी भिन्न होता है) और यदि यह मौजूद है तो वेबपी वितरित करने का प्रयास करता है, अन्यथा इसे कनवर्टर पर रीडायरेक्ट करें (ब्राउज़र समर्थन के आधार पर)
विविध प्रतिक्रिया का समर्थन करने वाले सीडीएन प्रदाता
यदि आपका सीडीएन प्रदाता वेबपी को कैशिंग कुंजी के रूप में समर्थन नहीं करता है, तो वेबपी फाइलें उन ब्राउज़रों को वितरित की जाएंगी जो वेबपी का समर्थन नहीं करते हैं। इसी तरह, एक मौका है कि गैर-वेबपी छवियां समर्थित ब्राउज़रों को वितरित की जाएंगी।
बनीसीडीएन , कीसीडीएन , गूगल सीडीएन और कई अन्य सीडीएन प्रदाता कैश कुंजी के रूप में वेबपी का समर्थन करते हैं। सुनिश्चित करें कि आपने उन्हें सेटिंग में सक्षम किया है।
वीबनीसीडीएन :
वीकीसीडीएन :
क्या आप Cloudflare के फ्री प्लान का इस्तेमाल कर रहे हैं?
दुर्भाग्य से, क्लाउडफ्लेयर की मुफ्त योजना कैश कुंजी के रूप में वेबपी का समर्थन नहीं करती है। या तो BunnCDN जैसे CDN का उपयोग करें या उनकी पेशेवर योजना में अपग्रेड करें।
लोकप्रिय होस्टिंग प्रदाताओं के साथ विविध प्रतिक्रिया + सीडीएन सेट करें
सुनिश्चित करें कि वेबपी एक्सप्रेस स्थापित है।
- Kinsta या WP Engine - उपरोक्त Nginx कॉन्फ़िगरेशन जोड़ने के लिए उनकी सहायता टीम से संपर्क करें और अपने CDN (KeyCDN) में WebP कैशिंग कुंजी शामिल करें।
- क्लाउडवे - बस वेबपी एक्सप्रेस स्थापित करें और .htacess का उपयोग करके सेटिंग्स को सहेजें। क्योंकि Cloudways एक हाइब्रिड Apache + Nginx दृष्टिकोण का उपयोग करता है, यह बॉक्स से बाहर काम करता है।
- SiteGound - Nginx कॉन्फ़िगरेशन जोड़ने के लिए समर्थन से संपर्क करें। ऊपर के रूप में एक समर्थित सीडीएन का प्रयोग करें।
- लाइटस्पीड / ओपनलाइटस्पीड / अपाचे सर्वर - बस वेबपी एक्सप्रेस इंस्टॉल करें और सेटिंग्स को '.htacess' से सेव करें। ऊपर के रूप में एक समर्थित सीडीएन का भी उपयोग करें।
- Nginx (LEMP स्टैक) के साथ कस्टम VPS - सेट अप
nginx.confऔर ऊपर के रूप में एक समर्थित सीडीएन का उपयोग करें।
विधि #3 - एक छवि टैग का उपयोग करना
यदि उपरोक्त दोनों विधियां आपके लिए काम नहीं करती हैं, तो आप छवि टैग का उपयोग कर सकते हैं। इसे सर्वर कॉन्फ़िगरेशन की आवश्यकता नहीं है (nginx.conf को संपादित करना) और सभी सीडीएन प्रदाताओं का समर्थन करता है।
इस पद्धति का उपयोग करने से WebP वितरण के लिए HTML बदल जाएगा। यह पृष्ठभूमि छवियों के साथ काम नहीं करेगा, कुछ विषयों, कैशिंग प्लगइन्स, आलसी लोडिंग प्लगइन्स आदि के साथ असंगत है।
यदि आप इस विधि का उपयोग करते हैं, तो सभी img टैग इस प्रकार परिवर्तित हो जाएंगे:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>यदि ब्राउज़र वेबपी का समर्थन करता है, तो संबंधित फ़ाइल वितरित की जाती है; अन्यथा, एक सामान्य छवि वितरित की जाती है।
WordPress में WebP के लिए इमेज टैग को कस्टमाइज़ करना
इमेज टैग सेट करने का सबसे आसान तरीका वेबपी एक्सप्रेस है।
ऑपरेशन मोड को "सीडीएन अनुकूल" पर सेट करें और "एचटीएमएल बदलें" सक्षम करें।
निष्कर्ष
काश वह दिन आता जब सभी ब्राउज़र WebP को सपोर्ट करते!
यदि आप महीने में कुछ डॉलर खर्च कर सकते हैं, तो सबसे आसान और सबसे कुशल तरीका है बनीसीडीएन जैसे सीडीएन का उपयोग करना, जो छवियों को फ्लाई पर वेबपी में परिवर्तित कर देगा। अन्यथा, ऊपर बताए गए तरीके #2 से चिपके रहें।
