ಚಿತ್ರದಿಂದ-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, ಪ್ರಿಫಿಕ್ಸ್ ಇಲ್ಲದ ಕಚ್ಚಾ Base64, ಸಿದ್ಧ-ಪೇಸ್ಟ್
ಟ್ಯಾಗ್, ಮತ್ತು ಒಂದು CSS background-image ಸ್ನಿಪೆಟ್ — ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ನಕಲು ಬಟನ್ನೊಂದಿಗೆ.
ಚಿತ್ರವನ್ನು data URI ಆಗಿ ಏಕೆ ಎನ್ಕೋಡ್ ಮಾಡಬೇಕು?
- ಚಿಕ್ಕ ಲೋಗೋ ಅಥವಾ ಐಕಾನ್ ಅನ್ನು data URI ಆಗಿ ಇನ್ಲೈನ್ ಮಾಡುವುದರಿಂದ ಪ್ರತ್ಯೇಕ ನೆಟ್ವರ್ಕ್ ರೌಂಡ್-ಟ್ರಿಪ್ ತೆಗೆದುಹೋಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಪುಟ ಅಥವಾ ಇಮೇಲ್ ತನ್ನ ಮೊದಲ ಫ್ರೇಮ್ ಅನ್ನು ಸ್ವಲ್ಪ ಬೇಗ ಎಳೆಯುತ್ತದೆ.
- ಚಿತ್ರಗಳನ್ನು ಇನ್ಲೈನ್ ಹೊಂದಿರುವ ಪುಟ ಅಥವಾ ಸ್ಟೈಲ್ಶೀಟ್ ಸ್ವಯಂಪೂರ್ಣವಾಗಿರುತ್ತದೆ. ಅದು ಆಫ್ಲೈನ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಮತ್ತು ನೀವು ಆಸ್ತಿ-ಫೋಲ್ಡರ್ ಎಳೆಯದೆ ಅದನ್ನು ಎಲ್ಲೆಡೆ ನಕಲಿಸಬಹುದು.
- ಹಲವು ಮೇಲ್ ಕ್ಲೈಂಟ್ಗಳು ಲಿಂಕ್ ಮಾಡಿದ ಬಾಹ್ಯ ಚಿತ್ರಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ತಡೆಯುತ್ತವೆ. ಲೋಗೋವನ್ನು Base64 ಆಗಿ ಇನ್ಲೈನ್ ಮಾಡಿ ಮತ್ತು ಸಂದೇಶ ತೆರೆದ ಕ್ಷಣವೇ ಅದು ಕಾಣಿಸುತ್ತದೆ, ಯಾವುದೇ ಬಾಹ್ಯ ಫೆಚ್ ಅಗತ್ಯವಿಲ್ಲ.
- ಎನ್ಕೋಡಿಂಗ್ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಆಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಸೂಕ್ಷ್ಮ ಚಿತ್ರಗಳು ಎಂದಿಗೂ ಮೂರನೇ-ಪಕ್ಷದ ಸರ್ವರ್ಗೆ ಪ್ರಯಾಣಿಸುವುದಿಲ್ಲ. ಇದರಲ್ಲಿ ಸ್ಕ್ರೀನ್ಶಾಟ್, ID ಸ್ಕ್ಯಾನ್, ಮತ್ತು ಆಂತರಿಕ ರೇಖಾಚಿತ್ರಗಳು ಸೇರಿವೆ.
Base64 ಚಿತ್ರಗಳ ಸಾಮಾನ್ಯ ಬಳಕೆಗಳು
Base64 ಸೇರಿಸುವ ~33% ಗಾತ್ರ ಹಿಗ್ಗುವಿಕೆಗಿಂತ ಪ್ರತ್ಯೇಕ ವಿನಂತಿ ಹೆಚ್ಚು ದುಬಾರಿ ಆಗುವಷ್ಟು ಚಿತ್ರ ಚಿಕ್ಕದಿರುವಲ್ಲೆಲ್ಲಾ data URI ಕಾಣಿಸುತ್ತದೆ. ಮೂರು ಮಾದರಿಗಳು ನಿರಂತರ ಬರುತ್ತವೆ:
- ಇನ್ಲೈನ್ CSS ಐಕಾನ್ಗಳು: 1–2 KB ಸ್ಪ್ರೈಟ್ ಅಥವಾ ಐಕಾನ್ ಅನ್ನು ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ background-image: url(data:…) ಆಗಿ ಡ್ರಾಪ್ ಮಾಡಿ, ಇದರಿಂದ ನಿಯಮ ಸಂಪೂರ್ಣ ಸ್ವಯಂಪೂರ್ಣವಾಗಿರುತ್ತದೆ.
- ಇಮೇಲ್ ಸಹಿಗಳು ಮತ್ತು ನ್ಯೂಸ್ಲೆಟರ್ಗಳು: data URI src ಹೊಂದಿರುವ
ಆಗಿ ಎಂಬೆಡ್ ಮಾಡಿದ ಲೋಗೋ ಕ್ಲೈಂಟ್ ಬಾಹ್ಯ ಚಿತ್ರಗಳನ್ನು ತಡೆದಾಗಲೂ ಕಾಣಿಸುತ್ತದೆ.
- ಬಿಲ್ಡ್-ಟೂಲ್ ಇನ್ಲೈನಿಂಗ್: Webpack ಮತ್ತು Vite ನಂತಹ ಬಂಡ್ಲರ್ಗಳು ಬೈಟ್ ಮಿತಿ ಕೆಳಗಿನ ಆಸ್ತಿಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಇನ್ಲೈನ್ ಮಾಡುತ್ತವೆ, ಮತ್ತು ಆ ಔಟ್ಪುಟ್ ನಿಖರವಾಗಿ ಹೇಗೆ ಕಾಣಿಸುತ್ತದೆ ಎಂದು ಪೂರ್ವವೀಕ್ಷಿಸಲು ಈ ಉಪಕರಣ ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.
Base64 ಚಿತ್ರ ಹೇಗೆ ಕಾಣಿಸುತ್ತದೆ?
ಒಂದು ಚಿಕ್ಕ 1×1 ಪಾರದರ್ಶಕ PNG ತೆಗೆದುಕೊಳ್ಳಿ. ಅದರ ಕಚ್ಚಾ ಬೈಟ್ಗಳು ಕೇವಲ 67 ಬೈಟ್ಗಳು, ಆದರೆ ಎನ್ಕೋಡ್ ಮಾಡಿದಾಗ ಅದು iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= ಎಂಬ ಸ್ಟ್ರಿಂಗ್ ಆಗುತ್ತದೆ, ಮತ್ತು ಪೂರ್ಣ data URI ಆಗಿದೆ data:image/png;base64,iVBORw0KGgo…. ಎನ್ಕೋಡ್ ಮಾಡಿದ ರೂಪ ಮೂಲಕ್ಕಿಂತ ಸುಮಾರು ಮೂರನೇ ಒಂದು ಭಾಗ ದೊಡ್ಡದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬೈನರಿ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಟೆಕ್ಸ್ಟ್ನಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲು ಸುರಕ್ಷಿತಗೊಳಿಸುವುದಕ್ಕಾಗಿ ಅದು ಪಡೆಯುವ ವ್ಯಾಪಾರ-ಆಫ್.
ನನ್ನ ಚಿತ್ರ ಎಲ್ಲಾದರೂ ಅಪ್ಲೋಡ್ ಆಗುತ್ತದೆಯೇ?
ಇಲ್ಲ. ಪರಿವರ್ತನೆ ಚಿತ್ರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಸಾಧನದಲ್ಲಿ ಎನ್ಕೋಡ್ ಮಾಡಲು ಬ್ರೌಸರ್ನ File API ಮತ್ತು ಸ್ಥಳೀಯ btoa ಫಂಕ್ಷನ್ ಬಳಸುತ್ತದೆ. ನೀವೇ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು: ನಿಮ್ಮ ಬ್ರೌಸರ್ನ ಡೆವಲಪರ್ ಟೂಲ್ಗಳನ್ನು ತೆರೆಯಿರಿ, Network ಪ್ಯಾನೆಲ್ಗೆ ಬದಲಿಸಿ, ಮತ್ತು ಒಂದು ಚಿತ್ರ ಪರಿವರ್ತಿಸಿ — ನೀವು ನೋಡುವ ಏಕೈಕ ವಿನಂತಿಗಳು ಪುಟ ಲೋಡ್ ಮತ್ತು ಯಾವುದೇ ಜಾಹೀರಾತುಗಳು. ಚಿತ್ರ-ಆಕಾರದ ಯಾವುದೂ ಸರ್ವರ್ಗೆ ಕಳುಹಿಸಲ್ಪಡುವುದಿಲ್ಲ, ಇದು ಸ್ಕ್ರೀನ್ಶಾಟ್, ID ದಾಖಲೆಗಳು, ಮತ್ತು ಆಂತರಿಕ ರೇಖಾಚಿತ್ರಗಳಿಗೆ ಇದನ್ನು ಸುರಕ್ಷಿತ ಮಾಡುತ್ತದೆ.
Base64 ಔಟ್ಪುಟ್ ನನ್ನ ಮೂಲ ಚಿತ್ರಕ್ಕಿಂತ ಏಕೆ ದೊಡ್ಡದು?
Base64 ಬೈನರಿ ಡೇಟಾದ ಪ್ರತಿ ಮೂರು ಬೈಟ್ಗಳನ್ನು ನಾಲ್ಕು ASCII ಅಕ್ಷರಗಳಿಂದ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಎನ್ಕೋಡ್ ಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಮೂಲ ಫೈಲ್ಗಿಂತ ಸುಮಾರು 33% ದೊಡ್ಡದು. ಈ ಪುಟದಲ್ಲಿನ data URI ಗಾತ್ರ ರೀಡ್ಔಟ್ ನಿಖರವಾದ ಹಿಗ್ಗಿದ ಉದ್ದ ತೋರಿಸುತ್ತದೆ. ಆ ಓವರ್ಹೆಡ್ನಿಂದಲೇ data URI ಚಿಕ್ಕ ಚಿತ್ರಗಳಿಗೆ ಮಾತ್ರ ಅರ್ಥಪೂರ್ಣ — 2 MB ಫೋಟೋ ಇನ್ಲೈನ್ ಮಾಡುವುದು ನಿಮ್ಮ HTML ಅಥವಾ CSS ಅನ್ನು ಪ್ರತ್ಯೇಕ ವಿನಂತಿ ತಗಲುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಉಬ್ಬಿಸುತ್ತದೆ. ಹೆಬ್ಬೆರಳ ನಿಯಮವಾಗಿ, ಸುಮಾರು 4 KB ಕೆಳಗಿನ ಚಿತ್ರಗಳನ್ನು ಇನ್ಲೈನ್ ಮಾಡಿ ಮತ್ತು ಅದಕ್ಕಿಂತ ದೊಡ್ಡ ಯಾವುದನ್ನೂ ಲಿಂಕ್ ಮಾಡಿ.
ನಾನು ಯಾವ ಚಿತ್ರ ಫಾರ್ಮ್ಯಾಟ್ಗಳನ್ನು ಪರಿವರ್ತಿಸಬಹುದು?
ನಿಮ್ಮ ಬ್ರೌಸರ್ ಚಿತ್ರ ಎಂದು ಗುರುತಿಸುವ ಯಾವುದೇ ಫಾರ್ಮ್ಯಾಟ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಏಕೆಂದರೆ ಉಪಕರಣ ಚಿತ್ರವನ್ನು ಡಿಕೋಡ್ ಮಾಡುವ ಬದಲು ಕಚ್ಚಾ ಬೈಟ್ಗಳನ್ನು ಓದುತ್ತದೆ. ಇದರಲ್ಲಿ 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 ಅಥವಾ ಸ್ನಿಪೆಟ್ ನಕಲು ಮಾಡಿ, ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ HTML, CSS, ಅಥವಾ ಇಮೇಲ್ ಟೆಂಪ್ಲೇಟ್ಗೆ ಪೇಸ್ಟ್ ಮಾಡಿ. ಪ್ರತಿ ಬೈಟ್ ನಿಮ್ಮ ಸಾಧನದಲ್ಲೇ ಉಳಿಯುತ್ತದೆ. ಅಪ್ಲೋಡ್ ಇಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, ಸರ್ವರ್ ರೌಂಡ್-ಟ್ರಿಪ್ ಇಲ್ಲ.