Base64 इमेज कैसे कंप्रेस करें (Gzip आम तौर पर क्यों विफल होता है)
डिकोड की गई इमेज को अनुकूलित करके Base64 घटाने का तरीका, Gzip की Data URL सीमा और JavaScript में 100 KB लक्ष्य समझें।
Base64 लगभग 33.3% बड़ा क्यों होता है
Base64 कंप्रेशन नहीं, बाइनरी से टेक्स्ट में एन्कोडिंग है। यह हर तीन बाइट को चार वर्णों में दिखाता है, इसलिए सटीक लंबाई 4 × ceil(n / 3) होती है। Data URL का उपसर्ग इसके अतिरिक्त जुड़ता है।
तीन संभावित प्रोसेसिंग क्रम
इमेज बाइट→Base64 मानक है, पर टेक्स्ट बड़ा होता है। Base64→Gzip→Base64 में दोनों परतें उलटनी पड़ती हैं। Base64→इमेज डिकोड→अनुकूलन→Base64 से img src के लिए सामान्य इमेज बनी रहती है।
दोबारा टेक्स्ट बनाने पर Gzip का लाभ क्यों घटता है
बीच का Gzip डेटा छोटा दिख सकता है, लेकिन उसे फिर Base64 बनाने पर एन्कोडिंग खर्च और Gzip header जुड़ते हैं। परिणाम JPEG, PNG या WebP नहीं बल्कि Gzip डेटा होता है, इसलिए सीधे नहीं दिखता।
इमेज फ़ॉर्मेट पहले से संपीड़ित होते हैं
JPEG, PNG और WebP अपने कंप्रेशन का उपयोग करते हैं। वास्तविक बचत आम तौर पर कम पिक्सेल, कम हानिपूर्ण क्वालिटी, हटाए गए मेटाडेटा या अधिक उपयुक्त फ़ॉर्मेट से आती है।
ब्राउज़र में सही JavaScript तरीका
Base64 और magic bytes जांचें, ImageBitmap से डिकोड करें, सीमित Canvas पर बनाएं और toBlob से एन्कोड करें। प्रोडक्शन कोड में आकार सीमा, एनिमेशन निषेध, WebP क्षमता जांच और पुराने कार्य को रोकने की व्यवस्था भी होनी चाहिए।
ब्राउज़र की मूल API का छोटा उदाहरण
async function compressBase64Image(dataUrl, maxWidth = 1600, quality = 0.82) {
const [header, payload] = dataUrl.split(',', 2);
const mime = header.match(/^data:([^;]+);base64$/)?.[1];
if (!mime || !/^image\/(png|jpeg|webp)$/.test(mime)) throw new Error('Unsupported image');
const binary = atob(payload.replace(/\s+/g, ''));
const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
const bitmap = await createImageBitmap(new Blob([bytes], { type: mime }));
try {
const scale = Math.min(1, maxWidth / bitmap.width);
const canvas = document.createElement('canvas');
canvas.width = Math.max(1, Math.round(bitmap.width * scale));
canvas.height = Math.max(1, Math.round(bitmap.height * scale));
const context = canvas.getContext('2d');
if (!context) throw new Error('Canvas 2D unavailable');
context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/webp', quality));
if (!blob) throw new Error('Encoding failed');
const output = new Uint8Array(await blob.arrayBuffer());
let outputBinary = '';
for (let offset = 0; offset < output.length; offset += 0x8000) {
outputBinary += String.fromCharCode(...output.subarray(offset, offset + 0x8000));
}
return `data:${blob.type};base64,${btoa(outputBinary)}`;
} finally {
bitmap.close();
}
}
इमेज को 100 KB तक कैसे घटाएं
100 KB को 102,400 इमेज बाइट मानें। JPEG/WebP की क्वालिटी सीमित बार binary search से खोजें; जरूरत पड़े तो sqrt(लक्ष्य/वर्तमान) अनुपात से कुछ ही चरणों में पक्षानुपात रखते हुए आकार घटाएं।
क्वालिटी, आयाम और फ़ॉर्मेट के अलग प्रभाव
क्वालिटी codec के निर्णय बदलती है, जबकि आकार घटाने से पिक्सेल कम होते हैं। फ़ोटो के लिए JPEG/WebP और पारदर्शिता के लिए PNG/WebP उपयोगी हो सकते हैं; वास्तविक आउटपुट की तुलना जरूरी है।
PNG की पारदर्शिता और JPEG की पृष्ठभूमि
JPEG में alpha channel नहीं होता। PNG/WebP बनाए रखें या JPEG में बदलने से पहले पृष्ठभूमि का रंग स्पष्ट रूप से चुनकर पुष्टि करें।
GIF, एनिमेटेड WebP और SVG का विशेष मामला
Canvas आम तौर पर केवल एक फ़्रेम लेता है। इसलिए GIF, एनिमेटेड WebP और ICO अस्वीकार होने चाहिए; SVG के लिए अलग टेक्स्ट अनुकूलक उपयुक्त है।
स्थानीय प्रोसेसिंग गोपनीयता बढ़ाती है, सुरक्षा सिद्ध नहीं करती
अपलोड और server storage न होने से एक जोखिम घटता है, लेकिन यह malware scan नहीं है। डिवाइस, extension और browser codec से जुड़े जोखिम फिर भी रहते हैं।
Base64 कब छोड़ देना चाहिए
बड़ी इमेज के लिए Blob URL, अलग cache योग्य फ़ाइल या Blob, FormData अथवा ArrayBuffer के जरिए बाइनरी अपलोड अधिक उपयुक्त है।
अक्सर पूछे जाने वाले सवाल
क्या Base64 को कंप्रेस किया जा सकता है?
हां, सामान्य डेटा की तरह किया जा सकता है, लेकिन परिणाम सीधे उपयोग योग्य मानक इमेज Base64 नहीं रहता।
क्या परिणाम img src में सीधे चलेगा?
केवल तब, जब डिकोड किया गया डेटा अभी भी इमेज हो। Gzip डेटा को पहले खोलना पड़ता है।
100 KB तक कैसे घटाएं?
क्वालिटी को सीमित बार खोजें और जरूरत पड़ने पर पक्षानुपात रखते हुए आयाम घटाएं।
क्या इमेज की क्वालिटी घटेगी?
आकार बदलने और हानिपूर्ण क्वालिटी से दृश्य जानकारी कम हो सकती है।
Base64 लगभग 33% बड़ा क्यों है?
क्योंकि हर तीन बाइट को चार वर्णों में दिखाया जाता है।
क्या इमेज अपलोड होती है?
नहीं। इस साइट का कंप्रेसर पूरा काम ब्राउज़र के भीतर करता है।
Gzip पहले लगाएं या बाद में?
दस्तावेज के बाहर सामान्य HTTP कंप्रेशन इस्तेमाल करें; इमेज Data URL के भीतर Gzip न मिलाएं।