WebP क्या है और वर्डप्रेस में इस इमेज फॉर्मेट का उपयोग कैसे करें

WebP क्या है और वर्डप्रेस में इस इमेज फॉर्मेट का उपयोग कैसे करें

आम तौर पर औसत वेब पेज के 50% वजन के लिए छवियों के साथ, आप अपनी छवियों को अनुकूलित करने के लिए जो कुछ भी कर सकते हैं वह न केवल आपके सर्वर पर जगह बचाता है बल्कि यह सुनिश्चित करता है कि आपके पेज तेजी से पेश किए जाएं।

सौभाग्य से, वेबपी छवि प्रारूप के साथ, आप छोटी, समृद्ध छवियां बना सकते हैं जो पीएनजी की तुलना में आकार में 26% छोटी हैं और जेपीईजी से 25-34% छोटी हैं – समान गुणवत्ता रखते हुए।

इस पोस्ट में, हम देखेंगे कि वेबपी क्या है और अपनी छवियों के आकार को नाटकीय रूप से कम करने के लिए अपनी वर्डप्रेस साइट पर इस छवि प्रारूप का उपयोग कैसे करें।

वेबपी क्या है?

वेबपी एक छवि फ़ाइल प्रारूप है जिसे Google में वेब प्रदर्शन टीम द्वारा बनाया गया है, जिसे जेपीईजी, पीएनजी और जीआईएफ के प्रतिस्थापन के रूप में विकसित किया गया है, जबकि अच्छे संपीड़न, पारदर्शिता और एनिमेशन का समर्थन करते हुए।

इसे पहली बार सितंबर 2010 में वेब पर हानिपूर्ण संकुचित ट्रू-कलर ग्राफिक्स के लिए एक नए खुले मानक के रूप में घोषित किया गया था, जो जेपीईजी के तुलनीय गुणवत्ता के छोटे फ़ाइल आकार का उत्पादन करता है।

2012 में दोषरहित और पारभासी छवियों के लिए समर्थन की घोषणा की गई, जिससे वेबपी पीएनजी प्रारूप का एक विकल्प बन गया।

वेबपी हानिपूर्ण संपीड़न एक छवि को एन्कोड करने के लिए भविष्य कहनेवाला कोडिंग का उपयोग करता है – वीडियो में कीफ़्रेम को संपीड़ित करने के लिए VP8 वीडियो कोडेक द्वारा उपयोग की जाने वाली समान विधि। एक ब्लॉक में मूल्य की भविष्यवाणी करने के लिए पिक्सेल के पड़ोसी ब्लॉकों में मूल्यों का उपयोग करके भविष्य कहनेवाला कोडिंग काम करता है और फिर केवल अंतर को एन्कोड करता है।

वेबपी दोषरहित संपीड़न नए पिक्सेल के पुनर्निर्माण के लिए पहले से देखे गए छवि अंशों का उपयोग करता है और यदि कोई मिलान नहीं मिलता है तो स्थानीय पैलेट का उपयोग कर सकता है।

जैसा कि आप Google की WebP गैलरी से नीचे दिए गए उदाहरणों में देख सकते हैं, बाईं ओर JPEG छवियों और दाईं ओर WebP संस्करणों के बीच गुणवत्ता में कोई उल्लेखनीय अंतर नहीं है। जब तक आप फ़ाइल आकार की जांच नहीं करते हैं, तब तक आप जो नहीं देखते हैं, वह यह है कि वेबपी छवियां जेपीईजी की तुलना में 30% से अधिक छोटी हैं।

जेपीईजी छवियां बनाम वेबपी छवियां

जैसा कि हमने पहले इस ब्लॉग पर कवर किया है, जब पृष्ठ भार की बात आती है, आकार मायने रखता है। आखिरकार, किसी वेब पेज का फ़ाइल आकार जितना छोटा होगा, वह उतनी ही तेज़ी से लोड होगा। यह कोई ब्रेनर नहीं है।

इसलिए वेबपी जैसे प्रारूप का उपयोग करके, अन्य तकनीकों, जैसे डब्ल्यूपी रॉकेट की आलसी लोड सुविधा के संयोजन में, अपनी छवियों के फ़ाइल आकार को कम करके, आप छोटी छवियों की सेवा कर सकते हैं और यह सुनिश्चित कर सकते हैं कि आपके पृष्ठ आपके साइट आगंतुकों को तेज़ी से वितरित किए जाएं। अंतिम लेकिन कम से कम, वेबपी प्रारूप का उपयोग करके, आप सबसे बड़े कंटेंटफुल पेंट ग्रेड को अनुकूलित करेंगे, जो कोर वेब विटल्स स्कोर में से एक है।

WebP के लिए ब्राउज़र समर्थन

आप सोच रहे होंगे, चूंकि वेबपी को अब लगभग आठ साल हो गए हैं, यह अधिक लोकप्रिय क्यों नहीं है? हम अभी भी जेपीईजी और पीएनजी का उपयोग क्यों कर रहे हैं जब वेबपी तुलनात्मक गुणवत्ता के छोटे फ़ाइल आकार का उत्पादन कर सकता है?

वेब पर कई तकनीकों की तरह जो अपने पैरों को खोजने के लिए संघर्ष करती हैं, सभी आधुनिक ब्राउज़र वेबपी का समर्थन नहीं करते हैं। कैन आई यूज… के अनुसार, वेबपी का समर्थन करने वाले ब्राउज़र में क्रोम, ओपेरा, ओपेरा मिनी, एंड्रॉइड ब्राउज़र और एंड्रॉइड के लिए क्रोम शामिल हैं।

कौन से ब्राउजर वेबपी छवियों का समर्थन करते हैं?

Microsoft ने घोषणा की कि वह पिछले अक्टूबर में अपने एज ब्राउज़र में WebP का समर्थन करेगा, मोज़िला ने फ़ायरफ़ॉक्स के लिए जल्द ही इसी तरह की घोषणा की। अब, यह सिर्फ Apple की सफारी है जो बिना किसी अनुकूलता के पिछड़ रही है।

शुरू में छवि प्रारूप का समर्थन करने में रुचि दिखाने के बाद जब इसने iOS 10 और macOS Sierra में WebP समर्थन जोड़ा, तो Apple ने बाद में इसे HEIF से बदल दिया, जो HEVC वीडियो संपीड़न मानक (जिसे H.265 और MPEG-H पार्ट के रूप में भी जाना जाता है) पर आधारित एक छवि प्रारूप है। 2).

हालांकि हाल ही में ऐसा कोई संकेत नहीं मिला है कि Apple भविष्य में WebP का समर्थन करेगा, कंपनी के पास अब बहुत कम विकल्प हैं कि अन्य सभी प्रमुख ब्राउज़र और इमेज एडिटिंग सॉफ़्टवेयर इसका समर्थन करते हैं।

WebP का उपयोग — JPEG/PNG के साथ फ़ॉलबैक के रूप में

सिर्फ इसलिए कि Apple WebP का समर्थन नहीं करता है, इसका मतलब यह नहीं है कि आपको प्रारूप का उपयोग नहीं करना चाहिए। जेपीईजी और पीएनजी को सफारी उपयोगकर्ताओं के लिए वापसी के रूप में प्रदर्शित करते हुए समर्थित ब्राउज़र का उपयोग करने वाले आगंतुकों को वेबपी फाइलें वितरित करना संभव है।

इस तरह, वेबपी को सभी उपयोगकर्ताओं को वितरित करने और सफ़ारी उपयोगकर्ताओं को टूटी हुई छवियों को देखने के जोखिम के बजाय, आप यह सुनिश्चित कर सकते हैं कि आपकी साइट के सभी आगंतुक आपकी छवियों को देखें – जबकि समर्थित ब्राउज़र वाले उपयोगकर्ताओं को तेज़ अनुभव मिलता है।

लेकिन अपनी साइट पर WebP का उपयोग करने या न करने का निर्णय लेने से पहले, कुछ बातों का ध्यान रखना चाहिए।

सबसे पहले, यह जान लें कि क्रोम 64% मार्केट शेयर के साथ सबसे लोकप्रिय ब्राउज़र है। इसलिए इस बात की अत्यधिक संभावना है कि आपके अधिकांश साइट विज़िटर आपकी साइट पर मौजूद किसी भी WebP इमेज को देखने में सक्षम होंगे।

गूगल एनालिटिक्स से ब्राउज़र उपयोग आँकड़े

यह तय करने से पहले कि इस पद्धति का उपयोग करना है या वेबपी को बिना किसी वापसी के प्रदर्शित करना है, यह देखने के लिए अपने Google Analytics की जांच करना एक अच्छा विचार है कि आपके विज़िटर कौन से ब्राउज़र का उपयोग कर रहे हैं।

यहां, आप देख सकते हैं कि मेरी साइट पर आने वाले विज़िटर क्रोम और फ़ायरफ़ॉक्स का अत्यधिक उपयोग करते हैं, जिसका अर्थ है कि अगर मैं वेबपी का उपयोग करता हूं तो मेरे 83% विज़िटर लाभान्वित होंगे।

दूसरी ओर, फ़ॉलबैक छवि विकल्प से लाभान्वित होने वाला सफारी तीसरा सबसे लोकप्रिय ब्राउज़र है।

वर्डप्रेस के साथ वेबपी का उपयोग कैसे करें

वर्डप्रेस 5.8 ने वेबपी समर्थन जोड़ा है, इसलिए अब आप अपनी वेबपी छवियों को डैशबोर्ड पर अपलोड कर सकते हैं। हालाँकि, वर्डप्रेस मूल स्वरूप को WebP में परिवर्तित नहीं करता है।

कोई नाटक नहीं, जैसा कि हम ऑस्ट्रेलिया में कहते हैं। आप हमेशा अपनी छवियों को वेबपी प्रारूप में परिवर्तित कर सकते हैं – आपको प्लगइन का उपयोग करने की आवश्यकता है।

निःशुल्क वेबपी एक्सप्रेस प्लगइन के साथ, आप सफारी उपयोगकर्ताओं को जेपीईजी/पीएनजी की सेवा करते हुए वेबपी का समर्थन करने वाले ब्राउज़रों को ऑटो-जेनरेट की गई वेबपी छवियों की सेवा दे सकते हैं। यह विकल्प आपकी साइट पर किसी भी छवि पर काम करता है, जिसमें मीडिया लाइब्रेरी, गैलरी और थीम शामिल हैं।

वेबपी एक्सप्रेस प्लगइन

जेटपैक की साइट एक्सेलेरेटर सुविधा (जिसे पहले फोटॉन के नाम से जाना जाता था) स्वचालित रूप से जेपीईजी और पीएनजी को वेबपी छवि प्रारूप में परिवर्तित कर देती है।

50% पर सेट होने पर फोटॉन एपीआई द्वारा प्रदान की जाने वाली संपीड़न की गुणवत्ता का एक उदाहरण यहां दिया गया है:

जेटपैक फोटॉन एपीआई संपीड़न

वैकल्पिक रूप से, आप अपने सीडीएन का उपयोग कर सकते हैं। क्लाउडफ्लेयर उपयोगकर्ता भुगतान योजनाओं पर सीडीएन की पोलिश सुविधा का उपयोग कर सकते हैं, जो स्वचालित वेबपी रूपांतरण प्रदान करता है। ऊपर बताए गए अन्य समाधानों की तरह, पोलिश इस फ़ाइल प्रकार का समर्थन करने वाले ब्राउज़रों के लिए वेबपी संस्करणों के साथ पृष्ठ की जेपीईजी और पीएनजी छवियों को स्वैप करके काम करता है।

पोलिश वर्डप्रेस प्लगइन

हमारा प्लगइन इमेजिफाई अब वेबपी छवियों का समर्थन करता है!

मई 2019 की शुरुआत में, WP Media (WP Rocket के पीछे की कंपनी) ने Imagify 1.9 लॉन्च किया।

इस प्रमुख रिलीज ने आखिरकार वह सुविधा पेश की जिसका हमारे कई ग्राहक इंतजार कर रहे थे: वेबपी समर्थन!

अब, प्रत्येक छवि के लिए जिसे आप इमेजिफाई प्लगइन के साथ अनुकूलित करते हैं, आपको इसका वेबपी संस्करण भी मिलेगा (यदि आप सेटिंग में विकल्प पर टिक करते हैं); आपकी मीडिया लाइब्रेरी में, इसके परिणामस्वरूप निम्न छवि संस्करण होंगे:

  • पूर्ण आकार की अनुकूलित छवि
  • पूर्ण आकार की वेबपी छवि
  • अनुकूलित थंबनेल
  • वेबपी थंबनेल

ऑप्टिमाइज़ेशन आपकी थीम और प्लगइन्स में शामिल छवियों के लिए भी काम करेगा।

यदि आप चाहें, तो Imagify WebP छवियों को आपके फ्रंट-एंड पर दो तरीकों से प्रदर्शित कर सकता है:

  1. <चित्र> टैग
  2. .htaccess फ़ाइल में नियमों को फिर से लिखें।

पहला विकल्प <की जगह लेता हैआईएमजी> <के साथ टैग करेंचित्र> टैग।
यह पसंदीदा समाधान होना चाहिए, लेकिन ध्यान रखें कि कुछ थीम टूट सकती हैं: इसलिए, यदि आप इस विकल्प को चुनते हैं, तो यह सत्यापित करना सुनिश्चित करें कि सब कुछ आपके फ्रंट-एंड पर सही ढंग से प्रदर्शित होता है।

दूसरा विकल्प आपकी साइट की कॉन्फ़िगरेशन फ़ाइल (.htaccess) में पुनर्लेखन नियम जोड़ता है और आपके पृष्ठों के कोड को नहीं बदलता है।
विचार करने के लिए एक महत्वपूर्ण विवरण: यह विकल्प सीडीएन के साथ काम नहीं करता!

पहले से अनुकूलित छवियों के बारे में क्या?

यदि आपने मूल छवियों की एक बैकअप प्रति रखी है, तो आपके पास उनके वेबपी संस्करण को अलग से बनाने की संभावना है (एक-एक करके या बल्क ऑप्टिमाइज़ेशन के माध्यम से)।

इमेजिफाई को मुफ्त में डाउनलोड करें!

जेपीजी/पीएनजी बनाम वेबपी तुलना

Google की वेब प्रदर्शन टीम वेबपी दोषरहित छवियों का वादा करती है जो पीएनजी से 26% छोटी हैं और वेबपी हानिपूर्ण छवियां जेपीईजी छवियों से 25-34% छोटी हैं। इसलिए मैंने वेबपी के साथ हासिल किए जा सकने वाले आकार में अंतर देखने के लिए कुछ तुलना परीक्षण किए।

जेपीईजी की तुलना वेबपी से करें

मैं अनस्प्लैश से छह यादृच्छिक जेपीईजी छवियों को डाउनलोड करता हूं, उन्हें यह देखने के लिए संकुचित करता हूं कि मुझे किस प्रकार की बचत मिल सकती है, और फिर तुलना करने के लिए मूल छवियों को वेबपी में परिवर्तित कर दिया।

जेपीईजी छवियों की तुलना वेबपी से करें

WebP में कनवर्ट करने से छवि आकार में औसतन 50% की कमी आई।

मुझे इमेज4.जेपीजी के जेपीईजी और वेबपी संस्करणों के बीच आकार में अंतर देखकर आश्चर्य हुआ, लेकिन सादे गुलाबी पृष्ठभूमि बड़े आकार के अंतर को समझाने के लिए एक लंबा रास्ता तय करती है। नीचे, आप दोनों संस्करणों को साथ-साथ देख सकते हैं। बाईं ओर की JPEG छवि दाईं ओर की WebP छवि की तुलना में थोड़ी अधिक स्पष्ट है।

JPEG इमेज की तुलना WebP इमेज से करना

PNG की तुलना WebP से करें

फिर से, मैंने बिना सोचे-समझे छह छवियां चुनीं, इस बार freepngs.com से पीएनजी फाइलें। मैंने उन्हें संकुचित किया और फिर तुलना करने के लिए मूल छवियों को वेबपी में परिवर्तित कर दिया।

पीएनजी छवियों की तुलना वेबपी से करें

फ़ाइल आकार में सबसे बड़ा अंतर पत्तियों और कॉफी मशीन की विस्तृत छवियों के लिए था (क्रमशः image4.png और image5.png), जबकि सबसे छोटा अंतर बिल्ली की श्वेत-श्याम छवियों (image3.png) के लिए था।

कुल मिलाकर, PNG से WebP में कनवर्ट करने से फ़ाइल आकार में औसतन 67% की कमी आई।

ऊपर लपेटकर

वेबपी फ़ाइल प्रारूप अभी भी लोकप्रियता और समर्थन में बढ़ रहा है, लेकिन इस फ़ाइल प्रारूप से बहुत कुछ हासिल करना है। यह JPEG और PNG (और GIF!) फ़ाइल स्वरूपों को हानिपूर्ण और दोषरहित संपीड़न के साथ बदल सकता है, लेकिन यह नाटकीय रूप से छोटे फ़ाइल आकार प्रदान करता है।

वेब के लिए वास्तव में कोई अन्य छवि प्रारूप या छवि अनुकूलन उपकरण नहीं है जो वेबपी कैन की तरह गुणवत्ता में कोई ध्यान देने योग्य हानि के बिना छोटे फ़ाइल आकार प्राप्त कर सकता है। इसलिए हम अनुशंसा करते हैं कि आप अपनी साइट के प्रदर्शन को बेहतर बनाने के लिए वेबपी प्रारूप का उपयोग करना शुरू करें।



WebP क्या है और वर्डप्रेस में इस इमेज फॉर्मेट का उपयोग कैसे करें WebP क्या है और वर्डप्रेस में इस इमेज फॉर्मेट का उपयोग कैसे करें

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *