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

WebP क्या है?

WebP एक इमेज फ़ॉर्मैट है जिसे Google ने 2010 में जारी किया था। यह VP8 वीडियो कोडेक पर आधारित लॉसी कंप्रेशन, एक अलग लॉसलेस मोड, अल्फ़ा चैनल और एनिमेशन, सब कुछ एक ही फ़ॉर्मैट में देता है। इसका MIME टाइप image/webp है, और चूँकि फ़ाइल एक RIFF कंटेनर है, इसलिए Base64 आउटपुट UklGR से शुरू होता है। Google के अनुसार लॉसलेस WebP फ़ाइलें PNG से लगभग 26% छोटी होती हैं, और लॉसी फ़ाइलें तुलनीय गुणवत्ता पर JPEG से 25 से 34% छोटी।

WebP data URI के लिए क्यों उपयुक्त है

Base64 हर फ़ाइल में उतना ही एक-तिहाई जोड़ता है, इसलिए सबसे छोटी स्रोत फ़ाइल से सबसे छोटी स्ट्रिंग मिलती है। इसी वजह से WebP स्वाभाविक रूप से उपयुक्त है: WebP में कन्वर्ट किया गया पारदर्शी PNG आइकन अपनी पारदर्शिता बनाए रखता है और आमतौर पर छोटा हो जाता है, और JPEG फ़ोटो मिलती-जुलती दृश्य गुणवत्ता पर छोटी हो जाती है। बहुत ऊँची गुणवत्ता सेटिंग से ऐसी फ़ाइल बन सकती है जो ऑप्टिमाइज़ की गई मूल फ़ाइल से बड़ी हो, इसलिए कॉपी करने से पहले एनकोड किया गया आकार जाँचें।

एनिमेटेड WebP फ़ाइलें बिना बदले एनकोड करने पर अपने सभी फ़्रेम बनाए रखती हैं। कन्वर्ट करने या आकार बदलने पर केवल एक फ़्रेम दोबारा रेंडर होता है।

ब्राउज़र और क्लाइंट समर्थन

सभी मौजूदा प्रमुख ब्राउज़र WebP दिखाते हैं: Chrome, Edge, Firefox, Opera और Safari 14 या उसके बाद के वर्ज़न। केवल Internet Explorer जैसे बहुत पुराने ब्राउज़र में इसका समर्थन नहीं है। ईमेल की स्थिति अलग है: Windows के लिए Outlook सहित कई डेस्कटॉप ईमेल क्लाइंट WebP रेंडर नहीं करते, इसलिए ईमेल टेम्पलेट में PNG या JPEG का उपयोग करें।

JavaScript में WebP data URI बनाना

// उपयोगकर्ता द्वारा चुनी गई फ़ाइल पढ़ें
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);

// canvas को 80% गुणवत्ता पर WebP के रूप में दोबारा एनकोड करें
const uri = canvas.toDataURL('image/webp', 0.8);

अगर कोई ब्राउज़र WebP एनकोड नहीं कर सकता, तो toDataURL बिना कोई सूचना दिए PNG पर लौट आता है, इसलिए जाँच लें कि परिणाम data:image/webp से शुरू होता है।