मुखपृष्ठ » वेब डिजाइन » वेबपी छवि प्रारूप का उपयोग करने के लिए पूरा गाइड

    वेबपी छवि प्रारूप का उपयोग करने के लिए पूरा गाइड

    WebP, या अनौपचारिक रूप से उच्चारित किया जाता है weppy, लगभग 5 साल पहले Google डेवलपर्स द्वारा पेश किया गया एक छवि प्रारूप है। यदि आप एक वेब डिज़ाइनर हैं, या एक डेवलपर जो आपकी छवि फ़ाइल के आकार को कम करने और अनुकूलित करने का प्रयास करता है, तो वेबपी आपके चेहरे पर मुस्कान लाने में सक्षम है।.

    संक्षेप में, यहां कुछ महत्वपूर्ण चीजें हैं जिनके बारे में आपको इस नए-नए-लेकिन-अभी भी शांत छवि प्रारूप के बारे में जानने की आवश्यकता है:

    • WebP .webp के फ़ाइल एक्सटेंशन द्वारा जाता है.
    • WebP हानिपूर्ण और दोषरहित संपीड़न को अपनाता है.
    • WebP हानिपूर्ण चित्र संभावित हैं 25-34% जेपीईजी से छोटा है.
    • WebP दोषरहित चित्र संभावित हैं पीएनजी की तुलना में 25% छोटा है.
    • वेबपी दोषरहित पारदर्शिता का समर्थन करता है, अर्थात् अल्फा चैनल के साथ पीएनजी.
    • WebP एनीमेशन का समर्थन करता है। यानी एनिमेटेड जीआईएफ.

    संक्षेप में, WebP JPEG, GIF, PNG की छवि फ़ाइल आकार को कम करने में सक्षम है। यहां वेबपी पर एक रिफ्रेशर है जिसे आपको मजेदार सामान में जाने से पहले देखना चाहिए.

    एक प्रयोग

    वेब पर दावों के बारे में सबसे अच्छी बात यह है कि हम हमेशा सत्यता और प्रामाणिकता की जांच के लिए प्रयोग चला सकते हैं। यहाँ कुछ प्रयोग हैं जो मैंने पता लगाने के लिए किए संभावित रूप से कितनी छोटी छवि मिल सकती है वे विभिन्न छवि प्रारूपों (JPEG, PNG और GIF) से वेबपी में परिवर्तित हो जाते हैं.

    1. जेपीईजी - हानिपूर्ण छवि

    यहाँ एक यादृच्छिक JPEG छवि है जिसे मैंने Pexels से पकड़ा है. मूल फाइल - 165kb. ↓

    छवि JpegMini के साथ अनुकूलित है. नई फाइल - 101kb.

    अंत में, उसी छवि को वेबपी प्रारूप में बदल दिया जाता है. अंतिम फाइल - 70kb.

    एक और बात: यदि एक ही छवि को निम्न स्वरूपों में परिवर्तित किया गया था, तो यहां अलग-अलग फाइलें हैं:

    • GIF - 285kb
    • पीएनजी 8 - 241.2kb
    • पीएनजी 24 - 657.6kb
    2. पीएनजी - दोषरहित छवि

    अब, पारदर्शिता के साथ पीएनजी के साथ प्रयास करें। (स्रोत). मूल फाइल - 587kb.

    यहाँ पर चित्र को typypng से अनुकूलित किया गया है. नई फाइल - 278kb.

    और अंत में, छवि वेबपी प्रारूप में बदल गई. अंतिम फाइल - 112kb.

    3. एनिमेटेड जीआईएफ

    जब वेबपी में परिवर्तित किया जाता है, एक JPEG इमेज 165kb से 70kb तक जाती है, जबकि एक PNG इमेज 587kb से 112kb पर जाती है.

    आइए देखें कि एनिमेटेड GIF का किराया कैसा है:

    • मूल फ़ाइलें - 6.8mb
    • वेबपी फाइल करता है - 6.3mb

    सारांश:

    संपूर्ण प्रयोग को सारांशित करने के लिए यहां एक तालिका दी गई है:

    हानिपूर्ण (JPG) दोषरहित (PNG) एनिमेटेड GIF
    मूल 165kb 587kb 6.8MB
    औजारों से अनुकूलित 101kb 278kb -
    वेबपी प्रारूप 70kb 112kb 6.3mb

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

    उपकरण के साथ वेबपी में परिवर्तित

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

    WebPonize के लिये मैक

    WebPonize संभवतः मैक पर WebP प्रारूप में छवियों को परिवर्तित करने का सबसे सरल और तेज़ तरीका है। बस आपको अपनी छवियों को WebPonize में ड्रैग और ड्रॉप करना होगा और यह रूपांतरण कर देगा। आप ouput प्राप्त करेंगे, पहले आकार, बाद के आकार और मूल फ़ाइल की कमी का%। [वेबपेज डाउनलोड करें]

    Webpconv के लिये विंडोज

    यदि आप Windows चला रहे हैं, तो Webpconv वह ऐप है जिसे आपको इंस्टॉल करना चाहिए। यह पोर्टेबल संस्करण में भी आता है ताकि आप इसे अपने फ्लैश ड्राइव पर स्वतंत्र रूप से चला सकें। [डाउनलोड Webconv]

    कमांड लाइन्स के साथ परिवर्तित

    यदि आप geeky महसूस कर रहे हैं, तो आप शायद कमांड लाइनों का उपयोग करके रूपांतरण को बहाना चाहते हैं. cwebp अपने JPEG, PNG या TIFF छवियों को WebP प्रारूप में कनवर्ट करता है और dwebp उन्हें वापस पीएनजी प्रारूप में परिवर्तित करता है। आइए देखें कि यह कैसे काम करता है.

    ध्यान दें: निम्नलिखित मैक मैक एक्स के लिए मार्गदर्शन करता है। विंडोज और लिनक्स उपयोगकर्ताओं के लिए, यहां क्लिक करें.

    मैक OSX पर MacPorts की स्थापना

    सबसे पहले, सुनिश्चित करें कि आपने Xcode स्थापित किया है, फिर इन चरणों का पालन करें:

    1. MacPorts को डाउनलोड और इंस्टॉल करें। यदि आपके पास पहले से ही MacPorts आपके मैक में स्थापित है, तो चरण 2 पर आगे बढ़ें.
    2. प्रक्षेपण टर्मिनल.
    3. प्रकार "सूदो पोर्ट सेल्फअपडेट"और हिट दर्ज करें। यह आपके MacPorts को नवीनतम संस्करण में अपडेट करेगा.
    4. अगला, टाइप करें "sudo port install webp"और हिट दर्ज करें। यह स्थापित करेगा।" libwebp (वेबपी लाइब्रेरी).

    बस। अब एक नजर डालते हैं कमांड लाइन का उपयोग करके छवियों को वेबपी में कैसे बदलें.

    परिवर्तित / वापस करने के लिए आदेश

    यहाँ आदेश हैं:

    I - JPEG / PNG छवि फ़ाइलों को WebP प्रारूप में बदलें

    स्वरूप: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

    उदाहरण:

    cwebp -q 80 example.png -o example.webp 

    II - गुप्त वेब छवि PNG पर वापस आती है

    स्वरूप: dwebp [WebP_filename] -o [PNG_filename]

    उदाहरण:

    dwebp image.webp -o image.png 

    अधिक: यदि आप अन्य माध्यमों से कन्वर्सेशन को टालते हैं, तो यहां JP / PNG फोन को WebP में बदलने के लिए ग्रन्ट और गल्प कार्यों का उपयोग करने के निर्देश हैं।.

    ऑनलाइन उपकरण के साथ कन्वर्ट

    यदि आप इस कार्य को करने के लिए अपने ऑपरेटिंग सिस्टम पर कोई एप्लिकेशन इंस्टॉल करना नहीं देख रहे हैं, तो इसके बजाय इन ऑनलाइन टूल का चयन करें। यहाँ कुछ है जो मुझे पता चला है:

    • Online-converter.com
    • Webp-convertor.com
    • Zamzar

    सुझाव: अगर आप google वेबप ऑनलाइन परिवर्तित करें , आपको शायद अधिक विकल्प मिलेंगे.

    फोटोशॉप प्लगइन

    आपको यह जानकर खुशी हो सकती है कि एक फोटोशॉप प्लगइन भी है जो आपको फ़ोटोशॉप के माध्यम से वेबपी प्रारूप में छवियों को सहेजने की अनुमति देता है। यह प्लगइन मैक ओएस एक्स (सीएस 2- सीएस 6) और विंडोज (32 बिट और 64 बिट) का समर्थन करता है। [यहाँ प्लगइन डाउनलोड करें।]

    ध्यान दें: बस सोचा कि आपको पता होना चाहिए कि मैंने इसे फ़ोटोशॉप सीसी पर आज़माया। वहाँ काम नहीं किया.

    WebP ब्राउज़र समर्थन

    अंत में, चलो संगतता के बारे में बात करते हैं। वर्तमान में, आप निम्न ब्राउज़रों (Ref) पर WebP प्रारूप चित्र देख सकते हैं:

    • IOS के लिए Chrome / Chrome
    • ओपेरा / ओपेरा मिनी

    इतना भाग्य नहीं फ़ायर्फ़ॉक्स तथा सफारी, जो अभी भी मूल रूप से वेबपी प्रारूप का समर्थन नहीं करते हैं। हालाँकि, आप WebPJS जावास्क्रिप्ट लाइब्रेरी का उपयोग कर सकते हैं क्लाइंट साइट पर डेटापीआई स्ट्रिंग में वेबपी छवियों को परिवर्तित करें.

    अन्य छवि प्रारूपों पर वापस जाएं

    असमर्थित ब्राउज़रों के कारण छवि त्रुटियों को दिखाने से बचने के लिए एक कमबैक का उपयोग करना हमेशा एक अच्छा विचार है। इस स्थिति में, वापसी JPG या PNG प्रारूप में छवि के लिए होगी। यहाँ आप इसे कैसे करते हैं.

      source srcset = "example.webp 1x" प्रकार = "छवि / वेबप">   

    इस कोड के लिए, छवियों / पूरा-गाइड करने के लिए का उपयोग कर-webp छवि format_13.jpg उपयोगकर्ता द्वारा फ़ायरफ़ॉक्स या सफारी का उपयोग करने पर लोड किया जाएगा.

    वेबपी छवियों का पूर्वावलोकन

    आप क्रोम और ओपेरा ब्राउजर पर वेबपी छवियों का पूर्वावलोकन कर सकते हैं। लेकिन अगर आप इसे अपनी मशीन पर स्थानीय रूप से करना चाहते हैं, तो आपको कुछ उपकरणों की आवश्यकता होगी.

    मैक उपयोगकर्ता त्वरित लुक फ़ंक्शन (चयनित छवि या हाइलाइट किए गए, स्पेसबार को दबाकर) का उपयोग करके वेबपी प्रारूप छवियों का पूर्वावलोकन करने के लिए वेबपैकलूक का उपयोग कर सकते हैं).

    विंडोज उपयोगकर्ताओं के लिए, वेबपीसीकोड फ़ाइल एक्सप्लोरर में वेबपी छवियों के थंबनेल पूर्वावलोकन को प्रदर्शित करेगा। वेबपी और जेपीईजी समकक्ष दोनों को दिखाया जाएगा। कुछ समर्थित विंडो ओएस (विस्टा, 7, 8) पर, वेबपी छवि को विंडोज फोटो व्यूअर पर भी दिखाया जा सकता है.

    अधिक: ReSCR.it WeBP प्रारूप में छवियों को स्वचालित रूप से वितरित करता है और यदि आप अपनी छवियों को MaxCDN के साथ संग्रहीत करते हैं तो यह उपलब्ध है। (और पढो)

    आगे के संदर्भ

    • एनिमेटेड GIF को वेबपी में परिवर्तित करना
    • WebP कैसे काम करता है
    • स्वीकृत सामग्री वार्ता के माध्यम से वेबपी को तैनात करना
    • वेबपी के साथ तेज़, छोटा और अधिक सुंदर वेब
    • वेब पर नई छवि प्रारूप तैनात करना
    • वेबपी एपीआई प्रलेखन