GIF से Base64 कन्वर्टर

GIF फ़ॉर्मैट के बारे में

GIF (Graphics Interchange Format, MIME टाइप image/gif) 1987 से चला आ रहा है। हर फ़्रेम अधिकतम 256 रंगों के पैलेट का उपयोग करता है, जिसे LZW से लॉसलेस तरीक़े से कंप्रेस किया जाता है। पारदर्शिता या तो पूरी होती है या बिल्कुल नहीं: पैलेट की एक प्रविष्टि को पारदर्शी चिह्नित किया जा सकता है, लेकिन आंशिक अपारदर्शिता संभव नहीं है। एक फ़ाइल में अलग-अलग विलंब वाले कई फ़्रेम और एक लूप काउंट हो सकता है, इसीलिए GIF छोटे एनिमेशन का फ़ॉर्मैट बन गया।

GIF का Base64 आम GIF89a वर्ज़न के लिए R0lGODlh से, और पुराने GIF87a के लिए R0lGODdh से शुरू होता है।

एनिमेशन बनाए रखना

जब आप मूल फ़ॉर्मैट रखते हैं, तो टूल फ़ाइल के बाइट को जैसे के तैसे एनकोड करता है। इसलिए data URI ठीक फ़ाइल की तरह ही एनिमेट होता है, चाहे आप उसे <img> टैग में इस्तेमाल करें या CSS बैकग्राउंड के रूप में।

PNG, JPEG या WebP में कन्वर्ट करने, या “अधिकतम चौड़ाई” सेट करने पर ब्राउज़र इमेज को दोबारा बनाता है, और केवल पहला फ़्रेम बचता है। यह तब उपयोगी है जब आपको किसी एनिमेशन का स्थिर पूर्वावलोकन चाहिए, लेकिन एनिमेटेड वर्ज़न के लिए दोनों विकल्प बंद रखें।

GIF data URI अब भी कहाँ काम के हैं

• CSS में छोटे लोडिंग स्पिनर और एनिमेटेड स्टेटस आइकन।
• क्लासिक 1x1 पारदर्शी पिक्सेल, जिसे प्लेसहोल्डर src के रूप में इस्तेमाल किया जाता है। यह केवल कुछ दर्जन बाइट लेता है और Base64 में 100 से काफ़ी कम अक्षर।
• कम रंगों वाली सरल लाइन आर्ट, जिसमें GIF कॉम्पैक्ट रहता है।

बड़े एनिमेशन के लिए यह ठीक नहीं है। 2 MB का रिएक्शन GIF लगभग 2.7 MB टेक्स्ट बन जाता है, जिसे अलग से कैश नहीं किया जा सकता; होस्ट की गई वीडियो फ़ाइल या एनिमेटेड WebP कहीं हल्का पड़ता है।

.loading {
  background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}

<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">