बेस64 छवि एनकोडर

सीएसएस या HTML में एम्बेड करने के लिए छवियों को बेस64 स्ट्रिंग्स में कनवर्ट करें। बाहरी HTTP अनुरोधों, मुफ़्त, स्थानीय प्रसंस्करण के बिना आइकन और लोगो के लिए डेटा यूआरआई उत्पन्न करें।

Shehzad Munir द्वारा निर्मित और अनुरक्षित ·

बेस64 छवि एनकोडर
Loading Base64 Image Tool
  • डेवलपर उपकरण
  • मुक्त · कोई साइन-अप नहीं
  • आपके ब्राउज़र में चलता है
  • 4 विशेषताएं
Share

छवियों को कब इनलाइन करें

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

किसी छवि को Base64 पर एन्कोड करने से बड़ी फ़ाइल के लिए नेटवर्क अनुरोध ट्रेड हो जाता है। यह छोटी, अक्सर उपयोग की जाने वाली संपत्तियों, आइकनों, छोटे लोगो, स्पेसर ग्राफिक्स के लिए एक जीत है, जहां राउंड-ट्रिप विलंबता की लागत अतिरिक्त बाइट्स से अधिक होती है। बड़ी तस्वीरों के लिए, उन्हें अलग फ़ाइलों के रूप में रखें।

विशेषताएँ

  • छवि एन्कोडिंग को खींचें और छोड़ें
  • सीएसएस पृष्ठभूमि-छवि स्निपेट पीढ़ी
  • HTML img स्रोत डेटा URI आउटपुट
  • त्वरित बेस64 डिकोडिंग

बेस64 छवि एनकोडर का उपयोग कैसे करें

  1. 1

    एक छवि डालें

    एन्कोड करने के लिए PNG, JPG, या SVG को खींचें और छोड़ें या चुनें।

  2. 2

    आउटपुट कॉपी करें

    तैयार सीएसएस पृष्ठभूमि-छवि स्निपेट या HTML आईएमजी स्रोत डेटा यूआरआई लें।

  3. 3

    इसे एंबेड करें

    डेटा यूआरआई को अपनी स्टाइलशीट या मार्कअप में पेस्ट करें, किसी बाहरी फ़ाइल की आवश्यकता नहीं है।

  4. 4

    जरूरत पड़ने पर डिकोड करें

    मूल छवि का पूर्वावलोकन करने और डाउनलोड करने के लिए बेस64 स्ट्रिंग को वापस चिपकाएँ।

सामान्य उपयोग के मामले

  • HTTP अनुरोध को हटाने के लिए एक फ्रंट-एंड डेव एक छोटा आइकन इनलाइन करता है।
  • एक ईमेल डेवलपर एक लोगो एम्बेड करता है जो बाहरी होस्टिंग के बिना प्रस्तुत करता है।
  • एक डिज़ाइनर किसी अन्य के सीएसएस से खींचे गए डेटा यूआरआई का निरीक्षण करता है।
  • एक डेवलपर एक एसवीजी स्प्राइट को सीधे एक घटक में बंडल करता है।

विस्तृत मार्गदर्शिका

सीएसएस और एचटीएमएल में डेटा यूआरआई का उपयोग करना

डेटा यूआरआई सिर्फ एक स्ट्रिंग है जो डेटा: इमेज/पीएनजी; बेस64 से शुरू होती है। इसे सीएसएस पृष्ठभूमि-छवि या HTML आईएमजी स्रोत में छोड़ें और ब्राउज़र इसे इनलाइन प्रस्तुत करता है। यह टूल दोनों स्निपेट उत्पन्न करता है ताकि आप सही स्निपेट को सीधे पेस्ट कर सकें।

आकार का समझौता

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

अक्सर पूछे जाने वाले प्रश्नों

मैं किसी छवि को ऑनलाइन बेस64 में कैसे परिवर्तित करूं?

अपनी छवि (JPG, PNG, SVG, WEBP) खींचें और छोड़ें या अपलोड करने के लिए क्लिक करें। टूल तुरंत बेस64 स्ट्रिंग उत्पन्न करता है, जो सीएसएस या एचटीएमएल में डेटा यूआरआई के रूप में उपयोग के लिए तैयार है।

मुझे सीएसएस में बेस64 छवियों का उपयोग कब करना चाहिए?

आइकन, लोगो और यूआई तत्वों (5KB से कम) जैसी छोटी छवियों के लिए बेस 64 एन्कोडिंग का उपयोग करें। इससे इन परिसंपत्तियों के लिए HTTP अनुरोध समाप्त हो जाते हैं, जिससे प्रदर्शन में थोड़ा सुधार हो सकता है। बड़ी छवियों के लिए, बाहरी URL बेहतर हैं।

मैं CSS में बेस64 छवि का उपयोग कैसे करूँ?

इसे पृष्ठभूमि-छवि के रूप में उपयोग करें: पृष्ठभूमि-छवि: url('data:image/png;base64,iVBORw0KGgo...'); टूल स्वचालित रूप से कॉपी करने के लिए तैयार इस सीएसएस स्निपेट को जेनरेट करता है।

मैं HTML में बेस64 छवि का उपयोग कैसे करूँ?

इसे img टैग की src विशेषता के रूप में उपयोग करें: <img src='data:image/png;base64,iVBORw0KGgo...'/>। टूल आपके लिए यह HTML स्निपेट तैयार करता है।

क्या बेस64 एन्कोडिंग छवियों को बड़ा बनाती है?

हाँ। बेस64 एन्कोडिंग बाइनरी मूल की तुलना में फ़ाइल का आकार लगभग 33% बढ़ा देती है। यह एक समझौता है, आप एक HTTP अनुरोध सहेजते हैं लेकिन डेटा बड़ा होता है। यह बहुत छोटी छवियों के लिए उपयुक्त है लेकिन बड़ी तस्वीरों के लिए नहीं।

क्या मैं बेस64 स्ट्रिंग को वापस किसी छवि फ़ाइल में डीकोड कर सकता हूँ?

हाँ। डिकोड मोड पर स्विच करें, अपनी बेस64 स्ट्रिंग (डेटा:इमेज/... उपसर्ग के साथ या उसके बिना) पेस्ट करें, और टूल छवि को प्रस्तुत करता है और आपको इसे फ़ाइल के रूप में डाउनलोड करने देता है। यह HTML स्रोत कोड या एपीआई पेलोड से एम्बेडेड छवियां निकालने के लिए उपयोगी है।

मैं किसी छवि को बेस64 डेटा यूआरआई में कैसे परिवर्तित करूं?

एक JPG, PNG, GIF, WebP या SVG डालें और टूल बेस64 स्ट्रिंग प्लस रेडी-टू-पेस्ट स्निपेट आउटपुट करता है: एक डेटा URI, एक img src और एक CSS बैकग्राउंड-यूआरएल। रूपांतरण स्थानीय है, इसलिए छवि कभी अपलोड नहीं की जाती है।

मैं बेस64 स्ट्रिंग को किसी छवि में वापस कैसे डीकोड करूँ?

बेस64 (या पूर्ण डेटा यूआरआई) पेस्ट करें और टूल रेंडर करता है और आपको मूल छवि डाउनलोड करने देता है, जो सीएसएस या एचटीएमएल से एक एम्बेडेड छवि निकालने के लिए उपयोगी है।

मैं किसी छवि को बेस64 के रूप में क्यों एम्बेड करूँगा?

बेस64 छवि को सीधे HTML, CSS या ईमेल में एम्बेड करता है, इसलिए लोड करने के लिए कोई अलग फ़ाइल नहीं है, छोटे आइकन और इनलाइन संपत्तियों के लिए उपयोगी है, हालांकि बड़ी छवियों को सामान्य फ़ाइलों के रूप में छोड़ना बेहतर है।

क्या बेस64 छवियों को बड़ा बनाता है?

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

क्या मेरी छवि इसे एन्कोड करने के लिए अपलोड की गई है?

नहीं, एन्कोडिंग और डिकोडिंग पूरी तरह से आपके ब्राउज़र में होती है।

जर्नल से

All articles →