Pag-convert ng Larawan sa Base64 at Vice Versa
Ang Base64 encoding ay isang paraan ng pagsasalin ng binary na data ng larawan patungo sa format na text. Ang prosesong ito ay nagbibigay-daan upang ang isang larawan ay maasikaso bilang isang string ng mga karakter na madaling maipasok sa loob ng mga web document. Ang Base64 Image Converter ay idinisenyo upang gawin ang dalawang direksyon ng prosesong ito: ang pag-encode ng pisikal na file ng larawan patungo sa text, at ang pag-decode ng Base64 text pabalik sa orihinal na file ng larawan.
Ang tool na ito ay gumagana para sa mga developer na nangangailangang mag-embed ng maliliit na icon o placeholder sa HTML o CSS, mga content creator na gumagawa ng mga email template kung saan kailangang naka-inline ang mga larawan, at para sa sinumang kailangang mag-convert ng larawan sa Base64 data URI o magbalik ng Base64 string sa isang file.
Mga Suportadong Format at Limitasyon sa Pag-encode
Sa direksyong Larawan → Base64, tinatanggap ng converter ang iba't ibang uri ng format ng larawan. Maaari mong i-drag at drop ang file o i-click ang interface upang pumili ng larawan. Ang mga suportadong format ay ang mga sumusunod:
- PNG
- JPG
- GIF
- WebP
- SVG
- AVIF
- BMP
- ICO
- TIFF
Ang maximum na laki ng file na pinapayagang i-encode ay 5 MB. Kung magpapasok ng higit sa isang larawan sa pamamagitan ng pag-drag at drop, ang unang larawan lamang ang gagamitin ng system. Ang tool ay nagpapakita ng mga partikular na error message batay sa sitwasyon:
- Kung ang file ay hindi kabilang sa mga suportadong format, lalabas ang error na "Ang file na iyon ay hindi suportadong larawan."
- Kung ang file ay lumampas sa limitasyon sa laki, ipapakita ang "Ang larawang iyan ay mas malaki sa
{max}. Subukan ang mas maliit." - Kung may problema sa pagbasa ng file, ang babala ay "Hindi mabasa ang file na iyon."
Ang converter ay nagpapanatili sa orihinal na bytes ng larawan. Hindi nito binabago ang kalidad, hindi nagka-crop, hindi nagre-resize, at hindi nagko-convert ng format ng larawan patungo sa iba pang uri tulad ng PNG o JPG. Dapat isaalang-alang na ang proseso ng Base64 encoding ay nagpapalaki sa laki ng data nang humigit-kumulang isang katlo (approx. 33%) kumpara sa orihinal na file.
Pag-decode ng Base64 String Pabalik sa Larawan
Sa direksyong Base64 → Larawan, ang tool ay tumatanggap ng data:image/... URI o isang raw Base64 string. Ang maximum na haba ng input na pinapayagang i-decode ay 8 MB. Tinatanggap ng decoder ang standard at URL-safe na Base64, kasama ang mga whitespace at newlines.
Awtomatikong tinutukoy ng tool ang uri ng larawan habang nagde-decode. Kung matagumpay ang pag-decode, ang larawan ay maaaring i-download gamit ang filename na brobrogo-image. na sinusundan ng kaukulang file extension.
Sa proseso ng pag-decode, maaaring lumitaw ang mga sumusunod na error:
- Kung ang inilagay na text ay hindi sumusunod sa tamang istruktura: "Hindi valid na Base64."
- Kung ang text ay matagumpay na na-decode ngunit hindi ito tumutugma sa anumang kilalang format ng larawan: "Ang Base64 na ito ay hindi nagde-decode sa isang kilalang format ng larawan."
- Kung ang haba ng input ay lumampas sa limitasyon: "Masyadong mahaba ang input na iyan. Panatilihin itong mas mababa sa
{max}." - Kung ang data ay na-decode ngunit may sira ang file kaya hindi ito maipakita: "Na-decode ang data ng larawan ngunit hindi ito maipakita."
Paggamit ng Base64 sa HTML at CSS
Ang mga nabuong output mula sa pag-encode ay inihahanda sa iba't ibang format upang madaling magamit sa web development. Ang mga format na ito ay makikita sa ilalim ng label na "Output":
| Format ng Output | Paglalarawan at Paggamit |
|---|---|
| Data URI | Ang buong string na naglalaman ng media type at ng encoded data, na handang i-embed nang direkta. |
| Base64 | Ang hilaw (raw) na Base64 string lamang ng larawan, walang kasamang metadata. |
| CSS | Naka-format na bilang isang CSS property: background-image: url('data:image/...');. |
| HTML | Naka-format bilang isang kumpletong HTML image tag: <img src="data:image/..." />. |
Ipinapakita rin ng tool ang "Output character" upang malaman ang kabuuang haba ng string, pati na rin ang "Laki ng larawan" na tumutukoy sa dimensyon nito.
Ang pangunahing bentahe ng pag-inline ng maliliit na larawan gamit ang Base64 ay ang pagbawas sa bilang ng HTTP requests. Sa halip na humingi ang browser ng hiwalay na file mula sa server, ang data ng larawan ay kasama na sa mismong HTML o CSS file. Gayunpaman, hindi ito mainam para sa malalaking larawan dahil pinapalaki nito ang sukat ng dokumento at hindi maaaring i-cache ng browser ang larawan nang hiwalay sa mismong pahina.
Seguridad at Pagproseso ng Data
Ang pagproseso ng inyong larawan ay ligtas at pribado. Ang pagbasa at pag-convert ng file ay buong nagaganap sa loob ng inyong browser. Walang anumang data o larawan ang inia-upload sa mga server ng BroBroGo. Ang lahat ng kalkulasyon at pagbuo ng string ay lokal na pinapatakbo ng inyong sariling device.
Mga Madalas Itanong (FAQ)
Ano po ang isang Base64 data URI image? Ito ay isang larawan na naka-encode bilang text, kaya maaari itong ilagay nang direkta sa loob ng HTML o CSS sa halip na i-load mula sa hiwalay na file. Nakakatipid ito ng request, na lubhang kapaki-pakinabang para sa maliliit na icon at email template.
Dapat ko po bang i-inline ang malalaking larawan sa ganitong paraan? Mas mabuting huwag na po. Pinalalaki ng Base64 ang data nang humigit-kumulang isang katlo at hindi ito maaaring i-cache nang hiwalay sa pahina, kaya gamitin lang ito para sa maliliit na asset at i-link ang malalaking larawan bilang mga normal na file.
Kaya po ba nitong ibalik ang Base64 string sa isang file? Opo. Lumipat sa Base64 → Larawan, mag-paste ng data URI o raw Base64 string, at awtomatiko nitong tutukuyin ang uri ng larawan, ipapakita ang preview, at hahayaan kayong i-download ang file.
Ano ang limitasyon sa laki ng file na maaaring i-convert? Para sa pag-encode (Larawan → Base64), ang limitasyon sa laki ng file ay 5 MB. Para naman sa pag-decode (Base64 → Larawan), ang limitasyon sa haba ng input string ay 8 MB.