Base64 എൻകോഡിംഗും വെബ് ഡെവലപ്മെന്റിലെ അതിന്റെ ഉപയോഗവും
കമ്പ്യൂട്ടർ ശൃംഖലകളിലൂടെ ബൈനറി ഡാറ്റയെ ടെക്സ്റ്റ് രൂപത്തിൽ സുരക്ഷിതമായി കൈമാറാൻ ഉപയോഗിക്കുന്ന ഒരു രീതിയാണ് Base64 എൻകോഡിംഗ്. ചിത്രങ്ങൾ പോലുള്ള ബൈനറി ഫയലുകളെ ASCII ടെക്സ്റ്റ് സ്ട്രിംഗുകളാക്കി മാറ്റാൻ ഇത് സഹായിക്കുന്നു. വെബ് ഡെവലപ്മെന്റിൽ, ചിത്രങ്ങൾ പ്രത്യേക ഫയലുകളായി സെർവറിൽ സൂക്ഷിക്കുന്നതിന് പകരം, അവയെ നേരിട്ട് കോഡിനുള്ളിൽ ഉൾപ്പെടുത്താൻ ഈ സാങ്കേതികവിദ്യ ഉപയോഗിക്കുന്നു.
ചിത്രങ്ങളെ ഇത്തരത്തിൽ ടെക്സ്റ്റ് രൂപത്തിലാക്കി മാറ്റുമ്പോൾ അവ "data URI" (Data Uniform Resource Identifier) എന്ന ഫോർമാറ്റിലാണ് വെബ് പേജുകളിൽ ഉപയോഗിക്കുന്നത്. ഒരു ബ്രൗസറിന് ചിത്രത്തിന്റെ ഡാറ്റ നേരിട്ട് വായിക്കാൻ പാകത്തിലുള്ള ഘടനയാണ് ഇതിനുള്ളത്. വെബ്സൈറ്റുകളുടെ വേഗത വർദ്ധിപ്പിക്കുന്നതിനും, എച്ച്ടിടിപി (HTTP) റിക്വസ്റ്റുകളുടെ എണ്ണം കുറയ്ക്കുന്നതിനും ഡെവലപ്പർമാർ ഈ രീതി വ്യാപകമായി ഉപയോഗിക്കുന്നു.
ഇൻലൈൻ ചിത്രങ്ങളുടെ ഗുണങ്ങളും ദോഷങ്ങളും
ചെറിയ ചിത്രങ്ങൾ Base64 രൂപത്തിൽ എച്ച്ടിഎംഎൽ (HTML) അല്ലെങ്കിൽ സിഎസ്എസ് (CSS) കോഡിനുള്ളിൽ നേരിട്ട് ഉൾപ്പെടുത്തുന്നത് (Inlining) വഴി നിരവധി ഗുണങ്ങളുണ്ട്:
- HTTP റിക്വസ്റ്റുകൾ കുറയുന്നു: ഓരോ ചിത്രവും സെർവറിൽ നിന്ന് പ്രത്യേകം ഡൗൺലോഡ് ചെയ്യുന്നതിന് പകരം ഒറ്റ ഡോക്യുമെന്റിൽ തന്നെ ലഭ്യമാകുന്നതിനാൽ ബ്രൗസറിന്റെ ജോലി ലഘൂകരിക്കപ്പെടുന്നു.
- ഇമെയിൽ ടെംപ്ലേറ്റുകൾ: ഇമെയിലുകളിൽ ചിത്രങ്ങൾ അറ്റാച്ച്മെന്റായി അയക്കുന്നതിന് പകരം ഇൻലൈൻ ആയി ഉൾപ്പെടുത്താൻ ഇത് സഹായിക്കുന്നു.
- പോർട്ടബിലിറ്റി: കോഡ് മാത്രം കൈമാറിയാൽ ചിത്രവും ഒപ്പം ലഭിക്കും എന്നതിനാൽ ഫയൽ പാത്തുകൾ തെറ്റാനുള്ള സാധ്യത ഇല്ലാതാകുന്നു.
എന്നിരുന്നാലും, വലിയ ചിത്രങ്ങൾക്ക് ഈ രീതി ഉപയോഗിക്കുന്നത് ദോഷകരമാണ്:
- ഫയൽ വലുപ്പം വർദ്ധിക്കുന്നു: ബൈനറി ഫയലുകളെ Base64 ലേക്ക് മാറ്റുമ്പോൾ ഡാറ്റയുടെ വലുപ്പം യഥാർത്ഥ ചിത്രത്തിന്റെ വലുപ്പത്തേക്കാൾ ഏകദേശം മൂന്നിലൊന്ന് (33%) വർദ്ധിക്കുന്നു.
- കാഷിംഗ് (Caching) പ്രശ്നങ്ങൾ: ചിത്രങ്ങൾ പ്രത്യേക ഫയലുകളായി സൂക്ഷിക്കുമ്പോൾ ബ്രൗസറുകൾ അവ കാഷെ ചെയ്ത് വെക്കാറുണ്ട്. എന്നാൽ Base64 കോഡിനുള്ളിൽ ഉൾപ്പെടുത്തുമ്പോൾ, ഓരോ തവണ പേജ് ലോഡ് ചെയ്യുമ്പോഴും ഈ വലിയ ടെക്സ്റ്റ് ഡാറ്റയും വീണ്ടും ലോഡ് ചെയ്യേണ്ടി വരുന്നു.
പിന്തുണയ്ക്കുന്ന ചിത്രങ്ങളുടെ ഫോർമാറ്റുകളും പരിധികളും
ഈ ടൂൾ വിവിധ തരത്തിലുള്ള ഇമേജ് ഫോർമാറ്റുകളെ പിന്തുണയ്ക്കുന്നു. എൻകോഡ് ചെയ്യുന്നതിനും ഡീകോഡ് ചെയ്യുന്നതിനും കൃത്യമായ ഫയൽ വലുപ്പ പരിധികളും നിബന്ധനകളും നിശ്ചയിച്ചിട്ടുണ്ട്.
പിന്തുണയ്ക്കുന്ന ഫോർമാറ്റുകൾ
- PNG, JPG, GIF, WebP, SVG, AVIF, BMP, ICO, TIFF.
പരിധികളും നിയമങ്ങളും
- എൻകോഡിംഗ് പരിധി: എൻകോഡ് ചെയ്യാനായി നൽകുന്ന ചിത്രത്തിന്റെ പരമാവധി വലുപ്പം 5 MB ആയി പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.
- ഡീകോഡിംഗ് പരിധി: ഡീകോഡ് ചെയ്യാനായി നൽകുന്ന Base64 അല്ലെങ്കിൽ data URI സ്ട്രിംഗിന്റെ പരമാവധി ദൈർഘ്യം 8 MB ആണ്.
- മൾട്ടിപ്പിൾ ഫയലുകൾ: ഒന്നിലധികം ചിത്രങ്ങൾ ഒന്നിച്ച് ഡ്രാഗ് ചെയ്ത് ഇട്ടാൽ, ആദ്യത്തെ ചിത്രം മാത്രമേ കൺവേർഷനായി ഉപയോഗിക്കുകയുള്ളൂ.
- പ്രോസസ്സിംഗ് രീതി: ഈ ടൂൾ ചിത്രങ്ങളുടെ യഥാർത്ഥ ബൈറ്റുകളെ എൻകോഡ് ചെയ്യുകയോ ഡീകോഡ് ചെയ്യുകയോ മാത്രമേ ചെയ്യുന്നുള്ളൂ. ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യാനോ, ക്രോപ്പ് ചെയ്യാനോ, റീസൈസ് ചെയ്യാനോ, അല്ലെങ്കിൽ മറ്റ് ഫോർമാറ്റുകളിലേക്ക് (ഉദാഹരണത്തിന് PNG-ൽ നിന്ന് JPG-ലേക്ക്) മാറ്റാനോ ഈ ടൂൾ ഉപയോഗിക്കാൻ കഴിയില്ല.
ചിത്രങ്ങൾ എങ്ങനെ Base64 ലേക്ക് മാറ്റാം (എൻകോഡിംഗ്)
ചിത്രങ്ങളെ ടെക്സ്റ്റ് രൂപത്തിലേക്ക് മാറ്റാൻ താഴെ പറയുന്ന ഘട്ടങ്ങൾ പിന്തുടരുക:
- ടൂളിലെ കൺവേർഷൻ ദിശ എന്ന വിഭാഗത്തിൽ നിന്ന് ചിത്രം → Base64 എന്നത് തിരഞ്ഞെടുക്കുക.
- ഒരു ചിത്രം ഇവിടെ ഇടുക അല്ലെങ്കിൽ തിരഞ്ഞെടുക്കാൻ ക്ലിക്ക് ചെയ്യുക എന്ന ഭാഗത്തേക്ക് ചിത്രം ഡ്രാഗ് ചെയ്യുകയോ ക്ലിക്ക് ചെയ്ത് ഫയൽ തിരഞ്ഞെടുക്കുകയോ ചെയ്യുക.
- ചിത്രം വിജയകരമായി പ്രോസസ്സ് ചെയ്താൽ Base64 തയ്യാറാണ് — താഴെ നിന്ന് കോപ്പി ചെയ്യുക. എന്ന സന്ദേശം കാണാം.
- താഴെ നൽകിയിരിക്കുന്ന ഔട്ട്പുട്ട് ഫോർമാറ്റ് ഓപ്ഷനുകളിൽ നിന്ന് ആവശ്യമായ ഫോർമാറ്റ് തിരഞ്ഞെടുത്ത് കോപ്പി ചെയ്യാം:
- Data URI: എച്ച്ടിഎംഎൽ അല്ലെങ്കിൽ സിഎസ്എസിൽ നേരിട്ട് ഉപയോഗിക്കാവുന്ന പൂർണ്ണമായ ഡാറ്റാ സ്ട്രിംഗ്.
- Base64: ചിത്രത്തിന്റെ റോ (Raw) Base64 സ്ട്രിംഗ് മാത്രം.
- CSS:
background-imageപ്രോപ്പർട്ടിയിൽ ഫോർമാറ്റ് ചെയ്ത രൂപം. - HTML:
<img>ടാഗിൽ ഫോർമാറ്റ് ചെയ്ത രൂപം.
- ഔട്ട്പുട്ടിനൊപ്പം ഔട്ട്പുട്ട് അക്ഷരങ്ങൾ (ക്യാരക്ടർ കൗണ്ട്), ചിത്രത്തിന്റെ വലുപ്പം (ഡൈമൻഷൻ) എന്നിവയും കാണാൻ സാധിക്കും.
Base64 സ്ട്രിംഗിനെ എങ്ങനെ ചിത്രമാക്കാം (ഡീകോഡ്)
കൈവശമുള്ള Base64 ടെക്സ്റ്റിനെ തിരികെ ചിത്രമാക്കി മാറ്റാൻ താഴെ പറയുന്ന ഘട്ടങ്ങൾ പിന്തുടരുക:
- ടൂളിൽ കൺവേർഷൻ ദിശ എന്നതിൽ നിന്ന് Base64 → ചിത്രം എന്നത് തിരഞ്ഞെടുക്കുക.
- Base64 അല്ലെങ്കിൽ data URI എന്ന് ലേബൽ ചെയ്ത ബോക്സിൽ നിങ്ങളുടെ കോഡ് പേസ്റ്റ് ചെയ്യുക. ടൂൾ സ്റ്റാൻഡേർഡ്, URL-safe Base64 സ്ട്രിംഗുകളെയും വൈറ്റ്സ്പെയ്സുകളും ന്യൂലൈനുകളും ഉള്ള സ്ട്രിംഗുകളെയും പിന്തുണയ്ക്കുന്നു.
- കോഡ് സാധുവാണെങ്കിൽ ചിത്രം ഡീകോഡ് ചെയ്തു. എന്ന സന്ദേശത്തോടൊപ്പം ചിത്രത്തിന്റെ പ്രിവ്യൂ കാണാം.
- ചിത്രം ഡൗൺലോഡ് ചെയ്യുക എന്ന ബട്ടൺ ക്ലിക്ക് ചെയ്ത് ഫയൽ കമ്പ്യൂട്ടറിലേക്ക് സേവ് ചെയ്യാം. ഡീകോഡ് ചെയ്ത ചിത്രങ്ങൾ
brobrogo-image.എന്ന് തുടങ്ങി അനുയോജ്യമായ ഫയൽ എക്സ്റ്റൻഷനോടെയാണ് ഡൗൺലോഡ് ചെയ്യപ്പെടുക.
പിശകുകളും അവയ്ക്കുള്ള കാരണങ്ങളും
പ്രോസസ്സിംഗിനിടയിൽ എന്തെങ്കിലും തടസ്സമുണ്ടായാൽ താഴെ പറയുന്ന പിശക് സന്ദേശങ്ങൾ കാണിക്കുന്നു:
- ആ ഫയൽ പിന്തുണയ്ക്കുന്ന ഒരു ചിത്രമല്ല. — നൽകിയ ഫയൽ ഫോർമാറ്റ് ടൂൾ പിന്തുണയ്ക്കുന്നതല്ലെങ്കിൽ.
- ആ ചിത്രത്തിന്
{max}-നേക്കാൾ വലുപ്പമുണ്ട്. ചെറിയ ഒന്ന് ഉപയോഗിച്ച് ശ്രമിക്കുക. — ഫയൽ വലുപ്പം 5 MB-യിൽ കൂടുതലാകുമ്പോൾ. - ആ ഫയൽ വായിക്കാൻ കഴിഞ്ഞില്ല. — സിസ്റ്റത്തിന് ഫയൽ റീഡ് ചെയ്യാൻ സാധിക്കാതെ വരുമ്പോൾ.
- അത് സാധുവായ Base64 അല്ല. — പേസ്റ്റ് ചെയ്ത ടെക്സ്റ്റ് ശരിയായ Base64 ഫോർമാറ്റിൽ അല്ലെങ്കിൽ.
- ഈ Base64-നെ തിരിച്ചറിയാൻ കഴിയുന്ന ഒരു ചിത്രമായി ഡീകോഡ് ചെയ്യാൻ കഴിയില്ല. — ടെക്സ്റ്റ് ഡീകോഡ് ചെയ്യാൻ സാധിക്കുന്നുണ്ടെങ്കിലും അത് ഒരു ചിത്രത്തിന്റെ ബൈനറി ഡാറ്റ അല്ലെങ്കിൽ.
- ആ ഇൻപുട്ട് വളരെ ദൈർഘ്യമേറിയതാണ്. ഇത്
{max}-ൽ താഴെയായി സൂക്ഷിക്കുക. — പേസ്റ്റ് ചെയ്ത ടെക്സ്റ്റ് 8 MB പരിധിക്ക് മുകളിലാണെങ്കിൽ. - ചിത്രത്തിന്റെ ഡാറ്റ ഡീകോഡ് ചെയ്തെങ്കിലും പ്രദർശിപ്പിക്കാൻ കഴിഞ്ഞില്ല. — ഡാറ്റ ഡീകോഡ് ചെയ്യാൻ കഴിഞ്ഞെങ്കിലും ബ്രൗസറിന് അത് ചിത്രമായി റെൻഡർ ചെയ്യാൻ സാധിക്കാതെ വരുമ്പോൾ.
സ്വകാര്യതയും ഡാറ്റാ സുരക്ഷയും
ഈ ടൂൾ ഉപയോഗിക്കുമ്പോൾ നിങ്ങളുടെ ചിത്രങ്ങളോ ഡാറ്റയോ സുരക്ഷിതമായിരിക്കും. ചിത്രങ്ങൾ വായിക്കുന്നതും പരിവർത്തനം ചെയ്യുന്നതുമായ എല്ലാ പ്രക്രിയകളും പൂർണ്ണമായും നിങ്ങളുടെ വെബ് ബ്രൗസറിനുള്ളിൽ തന്നെയാണ് നടക്കുന്നത്. ചിത്രങ്ങളോ ടെക്സ്റ്റോ ഈ ടൂളിന്റെ സെർവറുകളിലേക്ക് അപ്ലോഡ് ചെയ്യപ്പെടുന്നില്ല.
അടിക്കടി ചോദിക്കുന്ന ചോദ്യങ്ങൾ (FAQ)
എന്താണ് Base64 data URI ഇമേജ്?
ഇത് ടെക്സ്റ്റ് ആയി എൻകോഡ് ചെയ്ത ഒരു ചിത്രമാണ്, അതിനാൽ ഒരു പ്രത്യേക ഫയലിൽ നിന്ന് ലോഡ് ചെയ്യുന്നതിന് പകരം HTML അല്ലെങ്കിൽ CSS-ൽ നേരിട്ട് ഉൾപ്പെടുത്താം. ഇത് ഒരു റിക്വസ്റ്റ് ലാഭിക്കുന്നു, ഇത് ചെറിയ ഐക്കണുകൾക്കും ഇമെയിൽ ടെംപ്ലേറ്റുകൾക്കും വളരെ ഉപകാരപ്രദമാണ്.
വലിയ ചിത്രങ്ങൾ ഞാൻ ഈ രീതിയിൽ ഇൻലൈൻ ചെയ്യണമോ?
അങ്ങനെ ചെയ്യാതിരിക്കുന്നതാണ് നല്ലത്. Base64 ഡാറ്റയുടെ വലുപ്പം മൂന്നിലൊന്ന് വർദ്ധിപ്പിക്കുന്നു, കൂടാതെ പേജിൽ നിന്ന് വേറിട്ട് ഇത് കാഷെ ചെയ്യാൻ കഴിയില്ല. അതിനാൽ ചെറിയ അസറ്റുകൾക്കായി മാത്രം ഇത് ഉപയോഗിക്കുക, വലിയ ചിത്രങ്ങൾ സാധാരണ ഫയലുകളായി ലിങ്ക് ചെയ്യുക.
ഒരു Base64 സ്ട്രിംഗിനെ തിരികെ ഒരു ഫയലാക്കി മാറ്റാൻ ഇതിന് കഴിയുമോ?
അതെ. Base64 → ചിത്രം എന്നതിലേക്ക് മാറുക, ഒരു data URI അല്ലെങ്കിൽ റോ Base64 സ്ട്രിംഗ് പേസ്റ്റ് ചെയ്യുക, ഇത് ചിത്രത്തിന്റെ തരം കണ്ടെത്തുകയും പ്രിവ്യൂ കാണിക്കുകയും ഫയൽ ഡൗൺലോഡ് ചെയ്യാൻ അനുവദിക്കുകയും ചെയ്യും.
ഈ ടൂൾ ഉപയോഗിച്ച് എനിക്ക് ചിത്രങ്ങളുടെ ഫോർമാറ്റ് മാറ്റാൻ സാധിക്കുമോ?
ഇല്ല. ഈ ടൂൾ ചിത്രങ്ങളുടെ യഥാർത്ഥ ബൈറ്റുകളെ എൻകോഡ് ചെയ്യുകയോ ഡീകോഡ് ചെയ്യുകയോ മാത്രമേ ചെയ്യുന്നുള്ളൂ. ഇത് ചിത്രങ്ങളെ കംപ്രസ് ചെയ്യുകയോ, ക്രോപ്പ് ചെയ്യുകയോ, റീസൈസ് ചെയ്യുകയോ, മറ്റ് ഫോർമാറ്റുകളിലേക്ക് മാറ്റുകയോ ഇല്ല.