§

ഇമേജ് ഇവിടെ ഡ്രോപ്പ് ചെയ്യുക അല്ലെങ്കിൽ ക്ലിക്ക് ചെയ്‌ത് തിരഞ്ഞെടുക്കുക

PNG, JPEG, GIF, WebP, SVG, BMP — 30 MB വരെ. ഒരു ഇമേജ് ഒരേ സമയം.

ഇമേജ് പൂർണ്ണമായും ഉപകരണത്തിൽ മാത്രം വായിക്കുകയും എൻകോഡ് ചെയ്യുകയും ചെയ്യുന്നു — ഒരിക്കലും ബ്രൗസർ വിടുന്നില്ല.

കേരളത്തിലെ Technopark, Infopark, Cyberpark എന്നിവിടങ്ങളിൽ പ്രവർത്തിക്കുന്ന ഡെവലപ്പർമാർക്ക് Base64 data URI ഒരു ദൈനംദിന ആവശ്യകതയാണ്. React മരിച്ചും Next.js പ്രൊജക്ടുകളിൽ ചെറിയ ഐക്കണുകൾ ഇൻലൈൻ ചെയ്യുക, HTML ഇ-മെയിൽ ന്യൂസ്‌ലെറ്ററുകളിൽ Base64 ലോഗോ ഉൾക്കൊള്ളിക്കുക — ക്ലൈന്റ് റിമോട്ട് ഇമേജ് ബ്ലോക്ക് ചെയ്‌താലും അത് കാണിക്കും. Digital Kerala Mission, KSFE പോർട്ടൽ, ഇ-ഗവേണൻസ് സേവനങ്ങൾ ഇവ ഡേറ്റ സ്വകാര്യത ഉറപ്പ് ചെയ്യുന്ന ടൂളുകൾ ഉപയോഗിക്കുന്നു. ഇവിടെ ഇമേജ് ഒരിക്കലും സർവ്വറിൽ പോകില്ല — JavaScript ൽ മാത്രം.

// അനുബന്ധ ടൂളുകൾ

./base64-encoder
Base64 എൻകോഡർ
ടെക്സ്റ്റ്, ഫയലുകൾ Base64 ഫോർമാറ്റിലേക്ക് എൻകോഡ് ചെയ്യുക.
→
./image-format-converter
ഇമേജ് ഫോർമാറ്റ് കൺവേർട്ടർ
PNG, JPEG, WebP ഇമേജുകൾ ലോക്കലായി കൺവേർട്ട് ചെയ്യുക — അപ്‌ലോഡ് ഇല്ല, ബാച്ച് സപ്പോർട്ട് ഉണ്ട്.
→
./image-compressor
ഇമേജ് കംപ്രസർ
JPEG, PNG, WebP ഇമേജുകൾ ലോക്കലായി കംപ്രസ് ചെയ്യുക — ക്വാളിറ്റി അല്ലെങ്കിൽ ടാർഗറ്റ്-സൈസ്, അപ്‌ലോഡ് ഇല്ല.
→
./
എല്ലാ ടൂളുകളും
Ultim8Soft ഓൺലൈൻ ടൂളുകളുടെ പൂർണ്ണ ശേഖരം ബ്രൗസ് ചെയ്യുക.
→

ഇമേജ്-മുതൽ-Base64 കൺവേർഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു

പൂർണ്ണ കൺവേർഷൻ ബ്രൗസറിൽ File API ഉം ബിൽറ്റ്-ഇൻ btoa ഫംഗ്ഷനും ഉപയോഗിച്ച് ഇയങ്ങുന്നു — ഒരു കോഡെക് ലൈബ്രറിയും ഡൗൺലോഡ് ആകില്ല, ഒരു സർവ്വറും ഇമേജ് കാണില്ല. ആദ്യം മുതൽ അവസാനം വരെ പൈപ്പ്‌ലൈൻ ഇതാ:

  1. ഇമേജ് ഡ്രോപ്പ് ചെയ്യുകയോ തിരഞ്ഞെടുക്കുകയോ ചെയ്യുക. ബ്രൗസർ ലോക്കൽ ഡിസ്കിൽ നിന്ന് Blob ആക്കി വായിക്കും, ബൈറ്റുകൾ ഒരിക്കലും സർവ്വറിൽ കോപ്പി ആകില്ല.
  2. ഫയൽ 1 MB ചങ്ക്‌കൾ ആക്കി വായിക്കുന്നു, ഓരോ ചങ്കിലെ ബൈറ്റുകൾ ഒരു ബൈനറി സ്ട്രിംഗ്‌ ആക്കി ചേർക്കുന്നു. ഇത് വലിയ ഇമേജുകൾ JavaScript കോൾ സ്റ്റാക്ക് ഓവർഫ്ലോ ഒഴിവാക്കാൻ സഹായിക്കുന്നു.
  3. ബൈനറി സ്ട്രിംഗ് btoa-ലേക്ക് കൈമാറുന്നു, ഇത് A–Z, a–z, 0–9, +, / ആൽഫബെറ്റ് ഉപയോഗിച്ച് ഓരോ മൂന്ന് ബൈറ്റും നാലു Base64 ക്യാരക്ടറുകളിലേക്ക് map ചെയ്യുന്നു.
  4. ഫയലിന്റെ MIME തരം (image/png, image/jpeg തുടങ്ങിയവ) File ഒബ്ജക്ടിൽ നിന്ന് വായിച്ച് data: prefix ആക്കി ചേർക്കുന്നു, പൂർണ data:image/…;base64,… URI ഉണ്ടാകുന്നു.
  5. ആ URI ഉപയോഗിച്ച് നാലു ഔട്ട്‌പുട്ടുകൾ ഉണ്ടാക്കുന്നു — പൂർണ data URI, prefix ഇല്ലാത്ത Raw Base64, ready-to-paste ടാഗ്, CSS background-image snippet — ഓരോന്നിനും സ്വന്തം കോപ്പി ബട്ടൺ.

ഇമേജ് data URI ആക്കി എൻകോഡ് ചെയ്യുന്നതെന്തിന്?

  • ഒരു ചെറിയ ലോഗോ data URI ആക്കി ഇൻലൈൻ ചെയ്‌താൽ ഒരു നെറ്റ്‌വർക്ക് റൗണ്ട്-ട്രിപ്പ് ഒഴിവാകും, പേജ് അല്ലെങ്കിൽ ഇ-മെയിൽ അൽപം വേഗത്തിൽ ആദ്യ ഫ്രേം കാണിക്കും.
  • ഇൻലൈൻ ഇമേജ് ഉള്ള പേജ് സ്വാശ്രയമാണ്. ഓഫ്‌ലൈൻ ആയി പ്രവർത്തിക്കും, assets ഫോൾഡർ ഇല്ലാതെ ഏതിടത്തും കോപ്പി ചെയ്യാം.
  • മിക്ക മെയിൽ ക്ലൈന്റുകളും ഡിഫോൾട്ടായി ലിങ്ക്ഡ് ഇമേജ് ബ്ലോക്ക് ചെയ്യുന്നു. Base64 ൽ ലോഗോ ഇൻലൈൻ ചെയ്‌ത്, സന്ദേശം തുറക്കുമ്പോൾ ഉടൻ കാണിക്കും, റിമോട്ട് ഫെച്ച് ആവശ്യമില്ല.
  • എൻകോഡിംഗ് ബ്രൗസറിൽ മാത്രം നടക്കുന്നതിനാൽ, സ്വകാര്യ ഇമേജുകൾ ഒരിക്കലും മൂന്നാം കക്ഷി സർവ്വറിൽ പോകില്ല. സ്ക്രീൻഷോട്ടുകൾ, ID ഡോക്യുമെൻ്റ്, ആന്തരിക ഡയഗ്രം — ഇവ എല്ലാം സുരക്ഷിതം.

Base64 ഇമേജുകളുടെ സാധാരണ ഉപയോഗങ്ങൾ

ഇമേജ് ഇത്ര ചെറുതാകുമ്പോൾ data URI ഉചിതമാണ് — Base64 ചേർക്കുന്ന ~33% സൈസ് വർദ്ധനവ് പ്രത്യേക ഫയൽ ലോഡ് ചെയ്യുന്നതിലും ലാഭകരം. ആവർത്തിക്കുന്ന മൂന്ന് പാറ്റേണുകൾ:

  • ഇൻലൈൻ CSS ഐക്കൺ: stylesheet ൽ background-image: url(data:…) ആക്കിവെക്കുന്ന 1–2 KB സ്‌പ്രൈറ്റ് അല്ലെങ്കിൽ ഐക്കൺ, ഒരൊറ്റ CSS rule മതി.
  • ഇ-മെയിൽ സിഗ്നേച്ചർ, ന്യൂസ്‌ലെറ്റർ: data URI src ഉള്ള ആക്കി ഉൾക്കൊള്ളിച്ച ലോഗോ, ക്ലൈന്റ് ഇമേജ് ബ്ലോക്ക് ചെയ്‌താലും കാണിക്കുന്നു.
  • ബിൽഡ്-ടൂൾ ഇൻലൈനിംഗ്: Webpack, Vite ബൈറ്റ് threshold-ൽ കുറഞ്ഞ assets ഓട്ടോ-ഇൻലൈൻ ചെയ്യുന്നു; ഈ ടൂൾ ആ ഔട്ട്‌പുട്ട് കൃത്യമായി എങ്ങനെ ഇരിക്കും എന്ന് preview ചെയ്യാൻ സഹായിക്കുന്നു.

Base64 ഇമേജ് എങ്ങനെ ഇരിക്കും?

ഒരു ചെറിയ 1×1 പ്രാരൂഡ PNG എടുക്കൂ. Raw bytes 67 bytes മാത്രം, പക്ഷേ encode ചെയ്‌ത ശേഷം iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= ഈ സ്ട്രിംഗ് ആകുന്നു, പൂർണ data URI data:image/png;base64,iVBORw0KGgo… ആണ്. encode ചെയ്ത വടിവ് original നേക്കാൾ ഏകദേശം മൂന്നിലൊന്ന് വലുതാണ് — ടെക്സ്റ്റിൽ നേരിട്ട് ബൈനറി ഡേറ്റ ഉൾക്കൊള്ളിക്കുന്നതിന്റെ trade-off ഇതാണ്.

ഇമേജ് എങ്ങോ അപ്‌ലോഡ് ആകുമോ?

ഇല്ല. ഇത് ബ്രൗസറിന്റെ File API ഉം നേടിവ് btoa ഫംഗ്ഷനും ഉപയോഗിച്ച് ഉപകരണത്തിൽ തന്നെ ഇമേജ് encode ചെയ്യുന്നു. സ്വയം ഉറപ്പ് വരുത്താം: developer tools തുറന്ന് Network panel ൽ നോക്കി ഒരു ഇമേജ് convert ചെയ്യൂ — പേജ് ലോഡ് ഉം ആഡ് കോൾ ഉം മാത്രം കാണും. ഇമേജ് ഡേറ്റ ഒന്നും സർവ്വറിൽ പോകില്ല — screenshots, ID ഡോക്യുമെൻ്റ്, ആന്തരിക ഡയഗ്രം ഇവ safe ആണ്.

Base64 ഔട്ട്‌പുട്ട് അസൽ ഇമേജിലും വലുതെന്തിന്?

Base64 ഓരോ മൂന്ന് ബൈറ്റും നാലു ASCII ക്യാരക്ടർ ആക്കുന്നതിനാൽ, encoded ടെക്സ്റ്റ് source file ലേക്കാൾ ഏകദേശം 33% വലുതായിരിക്കും. ഈ പേജിൽ data URI size readout കൃത്യമായ ഇൻഫ്ലേഷൻ നിള കാണിക്കുന്നു. അതിനാൽ data URI ചെറിയ ഇമേജുകൾക്ക് മാത്രം ഉചിതം — 2 MB ഫോട്ടോ inline ചെയ്‌ത് HTML/CSS ക്ക് ഒരു request-ൽ ഉള്ളതിലും വലിയ ഭാരം ഏൽക്കും. പൊതുവേ: 4 KB-ൽ കുറഞ്ഞ ഇമേജ് inline ചെയ്യൂ, വലുതിന് link ഉപയോഗിക്കൂ.

ഏത് ഇമേജ് ഫോർമാറ്റ് convert ചെയ്യാം?

ബ്രൗസർ image ആക്കി recognise ചെയ്യുന്ന ഏത് format ഉം പ്രവർത്തിക്കും — ടൂൾ ഇമേജ് decode ചെയ്യാതെ raw bytes ആണ് വായിക്കുന്നത്. PNG, JPEG, GIF, WebP, SVG, BMP ഇവ ഉൾക്കൊള്ളുന്നു. MIME type ഫൈൽ നിന്ന് നേരിട്ടു വായിക്കപ്പെടുന്നതിനാൽ data: prefix എല്ലായ്‌പ്പോഴും യഥാർഥ format ആണ് — JPEG → data:image/jpeg, SVG → data:image/svg+xml. SVG ഒരു കുറിപ്പ്: ഇത് ടെക്സ്റ്റ് ആണ്, SVG-ന് URL-encoded data URI മിക്കപ്പോഴും Base64 version-ലേക്കാൾ ചെറുത്, ഇ ടൂൾ consistency-ക്ക് Base64 form emit ചെയ്യുന്നു.

ഇമേജ് ഡ്രോപ്പ് ചെയ്‌ത്, data URI അല്ലെങ്കിൽ ആവശ്യമുള്ള snippet കോപ്പി ചെയ്‌ത്, HTML, CSS അല്ലെങ്കിൽ ഇ-മെയിൽ ടെംപ്ലേറ്റിൽ paste ചെയ്‌തോളൂ. ഓരോ ബൈറ്റും ഉപകരണത്തിൽ ഉണ്ടാകും. അപ്‌ലോഡ് ഇല്ല, അക്കൗണ്ട് ഇല്ല, സർവ്വർ ഇടത്തടവ് ഇല്ല.