చిత్రం-నుండి-Base64 మార్పిడి ఎలా పనిచేస్తుంది
పూర్ణ మార్పిడి మీ బ్రౌజర్లో File API మరియు బిల్ట్-ఇన్ btoa ఫంక్షన్ ఉపయోగించి జరుగుతుంది — ఏ కోడెక్ లైబ్రరీ డౌన్లోడ్ కాదు మరియు ఏ సర్వర్ చిత్రాన్ని చూడదు. ఇక్కడ మొదటి నుండి చివరి వరకు పైప్లైన్:
- మీరు చిత్రాన్ని డ్రాప్ చేస్తారు లేదా ఎంచుకుంటారు. బ్రౌజర్ దాన్ని మీ స్థానిక డిస్క్ నుండి Blob గా చదువుతుంది, బైట్లు సర్వర్కు కాపీ కావు.
- ఫైల్ 1 MB ముక్కలుగా చదవబడుతుంది మరియు ప్రతి ముక్క బైట్లు ఒక బైనరీ స్ట్రింగ్కు జోడించబడతాయి. ముక్కలుగా చేయడం వల్ల పెద్ద చిత్రాలు JavaScript కాల్ స్టాక్ ఓవర్ఫ్లో అవ్వవు.
- బైనరీ స్ట్రింగ్ btoa కు ఇవ్వబడుతుంది, ఇది A–Z, a–z, 0–9, +, / అక్షరమాల నుండి ప్రతి మూడు బైట్లను నాలుగు Base64 అక్షరాలకు మ్యాప్ చేస్తుంది.
- ఫైల్ MIME రకం (image/png, image/jpeg మొదలైనవి) File ఆబ్జెక్ట్ నుండి చదవబడుతుంది మరియు data: prefix గా చేర్చబడుతుంది, పూర్ణ data:image/…;base64,… URI ఉత్పత్తి చేస్తుంది.
- పేజ్ ఆ 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 చిహ్నాలు: 1–2 KB స్ప్రైట్ లేదా చిహ్నం stylesheet లో background-image: url(data:…) గా వేయబడుతుంది, నియమం పూర్తిగా స్వయం సమృద్ధంగా ఉంటుంది.
- ఇమెయిల్ సిగ్నేచర్లు మరియు న్యూస్లెటర్లు: data URI src తో
గా ఎంబెడ్ చేయబడిన లోగో క్లయింట్ రిమోట్ చిత్రాలను బ్లాక్ చేసినప్పుడు కూడా రెండర్ అవుతుంది.
- బిల్డ్-టూల్ ఇన్లైనింగ్: Webpack మరియు Vite వంటి బండ్లర్లు బైట్ threshold కంటే తక్కువ 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: prefix ఎల్లప్పుడూ నిజమైన ఫార్మాట్తో సరిపోతుంది — JPEG data:image/jpeg మరియు SVG data:image/svg+xml ఉత్పత్తి చేస్తుంది. SVG కు ఒక ప్రత్యేక గమనిక: ఇది ఇప్పటికే టెక్స్ట్, కాబట్టి SVG కు URL-encoded data URI తరచుగా Base64 సంస్కరణ కంటే చిన్నదిగా ఉంటుంది, అయినప్పటికీ ఈ టూల్ సమగ్రత కోసం Base64 రూపాన్ని ఉత్పత్తి చేస్తుంది.
చిత్రాన్ని డ్రాప్ చేయండి, data URI లేదా మీకు అవసరమైన snippet కాపీ చేయండి, మరియు HTML, CSS లేదా ఇమెయిల్ టెంప్లేట్లో పేస్ట్ చేయండి. ప్రతి బైట్ మీ పరికరంలో ఉంటుంది. అప్లోడ్ లేదు, అకౌంట్ లేదు, సర్వర్ రౌండ్-ట్రిప్ లేదు.