படம் இருந்து Base64

1. அறிமுகம்

படத்தை Base64-ஆக மாற்றி என்பது பதிவேற்றப்பட்ட படக் கோப்பை Base64-குறியாக்கப்பட்ட (Base64-encoded) சரமாக (string) மாற்றும் எளிய ஆன்லைன் கருவியாகும். Base64 என்பது பைனரி தரவின் உரை-அடிப்படையிலான பிரதிநிதித்துவமாகும். இது HTML, CSS, JSON அல்லது API payload-களில் தனியான கோப்பு கோரிக்கை இல்லாமல் படங்களை நேரடியாக உட்பொதிக்க (embed) அனுமதிக்கிறது.

இந்த கருவி பொதுவாக இணைய உருவாக்குநர்கள் (Web Developers), Frontend பொறியாளர்கள், API ஒருங்கிணைப்பாளர்கள் மற்றும் மின்னஞ்சல் வார்ப்புரு (Email Template) வடிவமைப்பாளர்களால் பயன்படுத்தப்படுகிறது. இவர்கள் படங்களை நேரடியாக தங்கள் குறியீட்டில் (code) சேர்க்க வேண்டிய தேவை கொண்டவர்கள். ஒரு படக் கோப்பை ஹோஸ்ட் செய்து அதன் URL-ஐ குறிப்பிடுவதற்கு பதிலாக, அதை Base64 சரமாக மாற்றி data URI-இல் உட்பொதிக்கலாம். இது குறிப்பாக சிறிய ஐகான்கள், லோகோக்கள், மின்னஞ்சல் வார்ப்புருக்கள் அல்லது வெளிப்புற கோப்பு கோரிக்கைகள் கட்டுப்படுத்தப்பட்ட பாதுகாப்பான அமைப்புகளுக்கு மிகவும் பயனுள்ளதாகும்.

நீங்கள் ஒரு இணையப் பயன்பாட்டை உருவாக்கினாலும், வள விநியோகத்தை மேம்படுத்தினாலும் அல்லது API பதிலில் படங்களை ஒருங்கிணைத்தாலும், இந்த கருவி படக் கோப்புகளை Base64 வடிவத்திற்கு விரைவாகவும் பாதுகாப்பாகவும் மாற்ற உதவுகிறது.

2. இது எவ்வாறு செயல்படுகிறது

இந்த கருவி பதிவேற்றப்பட்ட படக் கோப்பை ஏற்றுக்கொண்டு, அதன் பைனரி உள்ளடக்கத்தை Base64-குறியாக்கப்பட்ட சரமாக மாற்றுகிறது. Base64 குறியாக்கம் பைனரி தரவை ASCII எழுத்துகளாக மாற்றுகிறது. இதனால் JSON, HTML அல்லது XML போன்ற உரை-அடிப்படையிலான வடிவங்களை எதிர்பார்க்கும் அமைப்புகளுக்கு இடையே படத் தரவை பாதுகாப்பாக பரிமாற முடியும்.

உள்ளீட்டு அளவுரு

• படம் (கோப்பு பதிவேற்றம்) – மாற்றத்திற்காக பயனர் தேர்ந்தெடுத்த படக் கோப்பு.

ஆதரிக்கப்படும் கோப்பு வகைகள்

இணக்கத்தன்மை மற்றும் பாதுகாப்பை உறுதிப்படுத்த குறிப்பிட்ட பட வடிவங்கள் மட்டுமே ஏற்றுக்கொள்ளப்படுகின்றன:

• .gif
• .png
• .jpg
• .jpeg
• .svg

சரிபார்ப்பு விதிகள்

• கோரிக்கை CSRF பாதுகாப்பு சரிபார்ப்பை வெற்றிகரமாக கடக்க வேண்டும்.
• பதிவேற்றப்பட்ட கோப்பு சேவையகத்தின் அதிகபட்ச பதிவேற்ற அளவை மீறக்கூடாது.
• கோப்பில் பதிவேற்றப் பிழைகள் இருக்கக்கூடாது.
• கோப்பு நீட்டிப்பு (extension) அனுமதிக்கப்பட்ட பட வடிவங்களில் ஒன்றுடன் பொருந்த வேண்டும்.

செயலாக்க தர்க்கம்

பதிவேற்றப்பட்ட கோப்பு சரிபார்ப்பை வெற்றிகரமாக கடந்த பிறகு:

1. படக் கோப்பு சேவையகத்தில் தற்காலிகமாக சேமிக்கப்படுகிறது.
2. கோப்பின் பைனரி உள்ளடக்கம் படிக்கப்படுகிறது.
3. பைனரி தரவு Base64 குறியாக்கத்தைப் பயன்படுத்தி குறியாக்கப்படுகிறது.
4. குறியாக்கப்பட்ட சரம் முடிவாக திருப்பி வழங்கப்படுகிறது.

வெளியீட்டு வடிவம்

இந்த கருவி படக் கோப்பைக் குறிக்கும் Base64 சரத்தை வெளியிடுகிறது. வெளியீட்டில் data:image/...;base64, முன்னொட்டு (prefix) தானாக சேர்க்கப்படாது. எனவே HTML அல்லது CSS-இல் பயன்படுத்தும்போது பொருத்தமான MIME வகையை நீங்கள் முன்கூட்டியே சேர்க்க வேண்டியிருக்கலாம்.

வரம்புகள்

• பெரிய படங்கள் சேவையகத்தின் பதிவேற்ற வரம்பை மீறக்கூடும்.
• Base64 குறியாக்கம் கோப்பின் அளவை சுமார் 33% அதிகரிக்கிறது.
• செயல்திறன் பாதிப்பு காரணமாக பெரிய உற்பத்தி வளங்களுக்கு இது பொருத்தமானதல்ல.

3. இந்த கருவியை எவ்வாறு பயன்படுத்துவது

1. பதிவேற்ற பொத்தானைக் கிளிக் செய்யவும்.
2. ஆதரிக்கப்படும் படக் கோப்பைத் தேர்ந்தெடுக்கவும் (GIF, PNG, JPG, JPEG அல்லது SVG).
3. படிவத்தைச் சமர்ப்பிக்கவும்.
4. கருவி படத்தை செயலாக்கும் வரை காத்திருக்கவும்.
5. உருவாக்கப்பட்ட Base64 சரத்தை நகலெடுக்கவும்.
6. அந்த சரத்தை உங்கள் HTML, CSS, JSON அல்லது API payload-இல் பயன்படுத்தவும்.

4. நடைமுறை எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு 1: HTML-இல் லோகோவை உட்பொதித்தல்

உள்ளீடு: logo.png (5 KB)

வெளியீடு (சுருக்கப்பட்டது):

iVBORw0KGgoAAAANSUhEUgAA...

HTML-இல் பயன்படுத்த:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

இதனால் தனியாக ஒரு படக் கோப்பை கோர வேண்டிய அவசியம் நீங்குகிறது.

எடுத்துக்காட்டு 2: JSON API-இல் படத் தரவை அனுப்புதல்

உள்ளீடு: avatar.jpg

வெளியீடு (சுருக்கப்பட்டது):

/9j/4AAQSkZJRgABAQAAAQABAAD...

JSON payload எடுத்துக்காட்டு:

{
  "username": "john_doe",
  "avatar": "/9j/4AAQSkZJRgABAQAAAQABAAD..."
}

உரை-அடிப்படையிலான payload-களை மட்டுமே எதிர்பார்க்கும் API-கள் மூலம் படங்களைப் பதிவேற்றும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

5. உருவாக்குநர்களுக்கான பயன்பாட்டு நிலைகள்

- இணையப் பயன்பாடுகளில் Inline வளங்கள்

HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க, உருவாக்குநர்கள் சிறிய ஐகான்கள் அல்லது UI கூறுகளை Base64-ஐப் பயன்படுத்தி நேரடியாக CSS கோப்புகளில் உட்பொதிக்கலாம்.

- மின்னஞ்சல் வார்ப்புரு உருவாக்கம்

பல மின்னஞ்சல் கிளையண்ட்கள் வெளிப்புற படங்களைத் தடுக்கின்றன. படங்களை Base64-ஆக மாற்றுவதன் மூலம் அவற்றை HTML மின்னஞ்சல்களில் நேரடியாக உட்பொதிக்க முடியும்.

- API அடிப்படையிலான படப் பதிவேற்ற அமைப்புகள்

மொபைல் பயன்பாடுகள் அல்லது Frontend பயன்பாடுகள் Backend API-களுக்கு அனுப்புவதற்கு முன் படங்களை Base64-ஆக மாற்றலாம்.

- பாதுகாப்பான அல்லது Offline பயன்பாடுகள்

கட்டுப்படுத்தப்பட்ட சூழல்களில் இயங்கும் பயன்பாடுகள், கோப்பு ஹோஸ்டிங்கை நம்பாமல் படங்களை நேரடியாக உட்பொதிக்க முடியும்.

PHP எடுத்துக்காட்டு

$imageData = file_get_contents('logo.png');
$base64 = base64_encode($imageData);
echo $base64;

JavaScript எடுத்துக்காட்டு

const reader = new FileReader();
reader.onload = function() {
  const base64String = reader.result.split(',')[1];
  console.log(base64String);
};
reader.readAsDataURL(fileInput.files[0]);

பாதுகாப்பு கருத்தில் கொள்ள வேண்டியவை

• சேவையகத்தில் கோப்பு வகைகளை எப்போதும் சரிபார்க்கவும்.
• பதிவேற்ற அளவு வரம்புகளை அமல்படுத்தவும்.
• படிவங்களில் CSRF பாதுகாப்பைப் பயன்படுத்தவும்.
• கோப்பு நீட்டிப்புகளை சுத்தப்படுத்தி சரிபார்க்கவும்.

6. அடிக்கடி கேட்கப்படும் கேள்விகள்

படங்களுக்கான Base64 குறியாக்கம் என்றால் என்ன?

Base64 குறியாக்கம் ஒரு படத்தின் பைனரி தரவை உரைச் சரமாக மாற்றுகிறது. இதனால் அதை HTML, CSS அல்லது JSON-இல் உட்பொதிக்க முடியும்.

ஒரு படத்தை ஏன் Base64-ஆக மாற்ற வேண்டும்?

இது படங்களை நேரடியாக குறியீட்டில் உட்பொதிக்க அனுமதிக்கிறது. இதனால் வெளிப்புற கோப்பு கோரிக்கைகள் தேவையில்லை.

Base64 கோப்பின் அளவை அதிகரிக்குமா?

ஆம். Base64 குறியாக்கம், அசல் பைனரி கோப்புடன் ஒப்பிடும்போது, கோப்பின் அளவை சுமார் 33% அதிகரிக்கிறது.

நான் SVG-ஐ Base64-ஆக மாற்ற முடியுமா?

ஆம். SVG கோப்புகள் ஆதரிக்கப்படுகின்றன மற்றும் பிற பட வடிவங்களைப் போலவே குறியாக்கப்படலாம்.

Base64 பெரிய படங்களுக்கு பொருத்தமானதா?

இல்லை. பெரிய Base64 சரங்கள் செயல்திறனை பாதித்து, பக்கம் ஏற்றப்படும் நேரத்தை அதிகரிக்கக்கூடும்.

இந்த கருவி பாதுகாப்பானதா?

இந்த கருவி கோப்பு வகையைச் சரிபார்க்கிறது, பதிவேற்ற வரம்புகளை அமல்படுத்துகிறது மற்றும் பாதுகாப்பான செயலாக்கத்தை உறுதிப்படுத்த CSRF பாதுகாப்பை உள்ளடக்கியுள்ளது.