படம்-முதல்-Base64 மாற்றம் எவ்வாறு செயல்படுகிறது
முழு மாற்றமும் உங்கள் உலாவியில் File API மற்றும் உள்ளமைக்கப்பட்ட btoa செயல்பாட்டைப் பயன்படுத்தி இயங்குகிறது — எந்த கோடெக் நிரல்தொகுப்பும் பதிவிறக்கப்படுவதில்லை, எந்த சேவையகமும் படத்தைப் பார்ப்பதில்லை. தொடக்கம் முதல் முடிவு வரை தொடரோடை இங்கே:
- நீங்கள் படத்தை இடுகிறீர்கள் அல்லது தேர்ந்தெடுக்கிறீர்கள். உலாவி அதை உங்கள் உள்ளூர் வட்டில் இருந்து Blob ஆகப் படிக்கிறது, பைட்டுகள் ஒருபோதும் சேவையகத்திற்கு நகலெடுக்கப்படுவதில்லை.
- கோப்பு 1 MB துண்டுகளில் படிக்கப்படுகிறது, ஒவ்வொரு துண்டின் பைட்டுகளும் ஒரு பைனரி சரத்தில் சேர்க்கப்படுகின்றன. துண்டுகளாக்குவதால் பெரிய படங்கள் JavaScript காஸ் ஸ்டாக் ஓவர்ஃப்ளோவிலிருந்து பாதுகாக்கப்படுகின்றன.
- பைனரி சரம் btoa-க்கு அனுப்பப்படுகிறது, இது A–Z, a–z, 0–9, +, / எழுத்துக்கோர்வையிலிருந்து ஒவ்வொரு மூன்று பைட்டுகளையும் நான்கு Base64 எழுத்துக்களுக்கு வரைபடமாக்குகிறது.
- கோப்பின் MIME வகை (image/png, image/jpeg மற்றும் பிற) File பொருளிலிருந்து படிக்கப்பட்டு data: முன்னொட்டாக இணைக்கப்படுகிறது, பூர்ண data:image/…;base64,… URI உருவாகிறது.
- பக்கம் அந்த URI இலிருந்து நான்கு வெளியீடுகளை உருவாக்குகிறது — முழு data URI, முன்னொட்டு இல்லாத Raw Base64, ready-to-paste
குறிச்சொல் மற்றும் CSS background-image snippet — ஒவ்வொன்றுக்கும் அதன் சொந்த நகலெடு பொத்தான்.
ஏன் படத்தை data URI ஆக குறியாக்க வேண்டும்?
- ஒரு சிறிய சின்னம் அல்லது ஐகானை data URI ஆக இன்லைன் செய்வதால் ஒரு தனி வலையமைப்பு சுற்று-பயணம் நீக்கப்படுகிறது, பக்கம் அல்லது மின்னஞ்சல் சற்று விரைவாக முதல் சட்டத்தை காட்டுகிறது.
- இன்லைன் படங்கள் உள்ள பக்கம் அல்லது நடை-தாள் தன்னிறைவானது. அது ஆஃப்லைனில் வேலை செய்கிறது, assets கோப்புறை இல்லாமல் எங்கும் நகலெடுக்கலாம்.
- பெரும்பாலான மெயில் கிளையன்டுகள் இயல்பாகவே இணைக்கப்பட்ட தொலைநிலை படங்களைத் தடுக்கின்றன. Base64 இல் சின்னத்தை இன்லைன் செய்யுங்கள், செய்தி திறந்த உடனே அது தெரியும், தொலைநிலை ஈர்ப்பு தேவையில்லை.
- குறியாக்கம் முழுவதுமாக உங்கள் உலாவியில் நடைபெறுகிறது, எனவே உணர்திறன் படங்கள் ஒருபோதும் மூன்றாம் தரப்பு சேவையகத்திற்கு செல்வதில்லை. திரைப்பிடிப்புகள், ID ஆவணங்கள் மற்றும் உள் வரைபடங்களுக்கு இது பாதுகாப்பானது.
Base64 படங்களின் பொதுவான பயன்பாடுகள்
Data URI அங்கே தோன்றுகின்றன, படம் போதுமான அளவு சிறியதாக இருக்கும்போது, தனி கோரிக்கை Base64 சேர்க்கும் ~33% அளவு வீக்கத்தை விட அதிக விலை கொடுக்கும். மூன்று வடிவங்கள் மீண்டும் மீண்டும் வருகின்றன:
- இன்லைன் CSS ஐகான்கள்: நடை-தாளில் background-image: url(data:…) ஆக வைக்கப்படும் 1–2 KB ஸ்ப்ரைட் அல்லது ஐகான், விதி முழுவதுமாக தன்னிறைவானது.
- மின்னஞ்சல் கையொப்பங்கள் மற்றும் செய்திமடல்கள்: data URI src உடன்
ஆக உட்பொதிக்கப்பட்ட சின்னம் கிளையன்ட் தொலைநிலை படங்களைத் தடுக்கும்போதும் காட்டப்படும்.
- கட்டமைப்பு-கருவி இன்லைனிங்: Webpack மற்றும் Vite போன்ற தொகுப்பாளர்கள் பைட் வரம்பிற்கு கீழுள்ள assets ஐ தானாகவே இன்லைன் செய்கின்றன, இந்த கருவி அந்த வெளியீடு சரியாக எப்படி இருக்கும் என்பதை முன்னோட்டம் காணலாம்.
Base64 படம் எப்படி இருக்கும்?
ஒரு சிறிய 1×1 வெளிப்படையான PNG எடுங்கள். அதன் raw bytes வெறும் 67 bytes மட்டுமே, ஆனால் குறியாக்கியதும் அது iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= என்ற சரம் ஆகிறது, மற்றும் முழு data URI data:image/png;base64,iVBORw0KGgo… ஆகும். குறியாக்கப்பட்ட வடிவம் அசலை விட சுமார் மூன்றில் ஒரு பங்கு பெரியது என்பதை கவனியுங்கள். உரையில் நேரடியாக பைனரி தரவை பொதிக்கும் பரிமாற்றம் இதுதான்.
என் படம் எங்காவது பதிவேற்றப்படுகிறதா?
இல்லை. மாற்றம் உலாவியின் File API மற்றும் நேட்டிவ் btoa செயல்பாட்டைப் பயன்படுத்தி படத்தை முழுவதுமாக உங்கள் சாதனத்தில் குறியாக்குகிறது. நீங்களே உறுதிப்படுத்திக்கொள்ளலாம்: உலாவியின் developer tools திறந்து, Network பலகைக்கு மாறி, ஒரு படத்தை மாற்றுங்கள் — பக்க ஏற்றம் மற்றும் விளம்பரங்கள் மட்டுமே தெரியும். படம் போன்ற எதுவும் சேவையகத்திற்கு அனுப்பப்படுவதில்லை, இது திரைப்பிடிப்புகள், ID ஆவணங்கள் மற்றும் உள் வரைபடங்களுக்கு பாதுகாப்பானது.
Base64 வெளியீடு ஏன் என் அசல் படத்தை விடப் பெரியது?
Base64 பைனரி தரவின் ஒவ்வொரு மூன்று பைட்டுகளையும் நான்கு ASCII எழுத்துக்களால் குறிப்பிடுகிறது, எனவே குறியாக்கப்பட்ட உரை மூல கோப்பை விட சுமார் 33% பெரியதாக இருக்கும். இந்தப் பக்கத்தில் data URI அளவு கணிப்பு சரியான ஊதிய நீளத்தை காட்டுகிறது. அதனால்தான் data URI சிறிய படங்களுக்கு மட்டுமே அர்த்தமுடையது — 2 MB புகைப்படத்தை இன்லைன் செய்வது உங்கள் HTML அல்லது CSS ஐ தனி கோரிக்கையை விட மிகவும் பெரிதாக்கும். பொது விதி: சுமார் 4 KB கீழ் படங்களை இன்லைன் செய்யுங்கள், பெரியவற்றை இணைக்கவும்.
எந்த படக் கோப்பு வகைகளை மாற்றலாம்?
உங்கள் உலாவி படமாக அங்கீகரிக்கும் எந்த வடிவமும் வேலை செய்கிறது, ஏனென்றால் கருவி படத்தை மறைகுறியாக்காமல் raw bytes படிக்கிறது. அதில் PNG, JPEG, GIF, WebP, SVG மற்றும் BMP அடங்கும். MIME வகை நேரடியாக கோப்பிலிருந்து படிக்கப்படுகிறது, எனவே data: முன்னொட்டு எப்போதும் உண்மையான வடிவத்துடன் பொருந்துகிறது — JPEG data:image/jpeg மற்றும் SVG data:image/svg+xml உருவாக்குகிறது. SVG க்கு ஒரு சிறப்பு குறிப்பு: இது ஏற்கனவே உரை, எனவே SVG க்கு URL-குறியாக்கப்பட்ட data URI பெரும்பாலும் Base64 பதிப்பை விட சிறியதாக இருக்கும், இருப்பினும் இந்த கருவி சமத்துவத்திற்காக Base64 வடிவத்தை வழங்குகிறது.
படத்தை இடுங்கள், data URI அல்லது தேவையான snippet நகலெடுங்கள், மற்றும் HTML, CSS அல்லது மின்னஞ்சல் வார்ப்புருவில் ஒட்டுங்கள். ஒவ்வொரு பைட்டும் உங்கள் சாதனத்தில் இருக்கும். பதிவேற்றம் இல்லை, கணக்கு இல்லை, சேவையக சுற்று-பயணம் இல்லை.