§

Mag-drop ng larawan o mag-click para pumili

PNG, JPEG, GIF, WebP, SVG, BMP — hanggang 30 MB. Isang larawan sa isang pagkakataon.

Ang larawan ay nababasa at nae-encode nang buo sa iyong device — hindi ito kailanman lumalabas sa iyong browser.

Ang mga developer at designer sa Pilipinas na nagtatayo ng e-commerce site para sa mga Pinoy na mamimili — mula sa Shopee PH at Lazada hanggang sa mga lokal na MSME na gumagamit ng Shopify — ay madalas na gumagamit ng Base64 data URI para sa mga inline na logo at icon sa mga HTML email at product listing. Ang mga ahensya ng gobyerno na sumusunod sa Philippine Digital Governance Framework at ang mga prubinsyang sistema ng DICT ay pumipili ng browser-based na mga tool upang maiwasang maipadala ang mga sensitibong imahe tulad ng mga litrato ng ID at mga screenshot ng internal na sistema sa mga external na server. Ang mga developer na nag-iintegrate sa GCash, PayMaya, at iba pang lokal na payment gateway ay gumagamit din ng Base64-encoded na mga imahe sa API documentation at sa inline testing bago ang pag-deploy. Dahil ang lahat ng encoding ay nangyayari sa browser, wala kahit isang pixel na umaalis sa device ng user.

// Mga Kaugnay na Tool

./base64-encoder
Base64 Encoder
Mag-encode ng teksto at file sa Base64 format.
→
./image-format-converter
Image Format Converter
Mag-convert ng PNG, JPEG, at WebP na larawan nang lokal — walang upload, may batch support.
→
./image-compressor
Image Compressor
Mag-compress ng JPEG, PNG, at WebP na larawan nang lokal — quality o target-size, walang upload.
→
./
Lahat ng Tool
I-browse ang buong koleksyon ng mga online tool ng Ultim8Soft.
→

Paano gumagana ang image-to-Base64 conversion

Ang buong conversion ay tumatakbo sa iyong browser gamit ang File API at ang built-in na btoa function — walang codec library na dina-download at walang server na nakakakita ng larawan. Narito ang pipeline, mula simula hanggang katapusan:

  1. Nag-drop o pumili ka ng larawan. Binabasa ito ng browser bilang Blob mula sa iyong lokal na disk, hindi kailanman kinokopya ang mga byte sa isang server.
  2. Ang file ay nababasa sa 1 MB na chunks at ang mga byte ng bawat chunk ay idinaragdag sa isang binary string. Ang chunking ay nagpapanatiling malaki ang mga larawan mula sa pag-overflow ng JavaScript call stack.
  3. Ang binary string ay ipinapasa sa btoa, na nag-map ng bawat tatlong byte sa apat na Base64 na karakter mula sa A–Z, a–z, 0–9, plus / na alpabeto.
  4. Ang MIME type ng file (image/png, image/jpeg, at iba pa) ay nababasa mula sa File object at idinaragdag bilang data: prefix, na gumagawa ng kumpletong data:image/…;base64,… URI.
  5. Inaayos ng page ang apat na output mula sa URI na iyon — ang kumpletong data URI, ang raw Base64 na walang prefix, ang handa nang i-paste na tag, at ang CSS background-image snippet — bawat isa ay may sariling copy button.

Bakit i-encode ang isang larawan bilang data URI?

  • Ang pag-inline ng isang maliit na logo o icon bilang data URI ay nag-aalis ng isang hiwalay na network round-trip, kaya ang page o email ay nagre-render ng unang frame nito nang kaunting mas mabilis.
  • Ang isang page o stylesheet na may mga inline na larawan ay self-contained. Gumagana ito offline at maaari mo itong ilipat nang hindi hinahawakan ang isang folder ng mga asset.
  • Maraming mail client ang nagba-block ng mga naka-link na remote na larawan bilang default. Mag-inline ng logo bilang Base64 at lalabas ito sa sandaling mabuksan ang mensahe, walang remote fetch na kailangan.
  • Ang encoding ay nangyayari nang buo sa iyong browser, kaya ang mga sensitibong larawan ay hindi kailanman napupunta sa isang third-party server. Sinasaklaw nito ang mga screenshot, ID scan, at internal na diagram.

Karaniwang paggamit para sa Base64 na mga larawan

Ang mga data URI ay lumalabas sa lahat ng dako kung saan ang isang larawan ay maliit na sapat na ang isang hiwalay na request ay nagkakahalaga ng higit pa kaysa sa ~33% na pagtaas ng laki na idinaragdag ng Base64. Tatlong pattern ang lagi na lumilitaw:

  • Mga inline na CSS icon: isang 1–2 KB na sprite o icon na ibinaba sa isang stylesheet bilang background-image: url(data:…) upang ang panuntunan ay ganap na self-contained.
  • Mga email signature at newsletter: ang isang logo na naka-embed bilang na may data URI src ay nagre-render kahit na nag-block ang client ng mga remote na larawan.
  • Pag-inline ng build-tool: ang mga bundler tulad ng Webpack at Vite ay awtomatikong nag-inline ng mga asset sa ilalim ng isang byte threshold, at hinahayaan ka ng tool na ito na i-preview nang eksakto kung ano ang hitsura ng output na iyon.

Ano ang hitsura ng isang Base64 na larawan?

Kumuha ng maliit na 1×1 transparent PNG. Ang raw bytes nito ay 67 bytes lamang, ngunit kapag na-encode ito ay nagiging string na iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, at ang kumpletong data URI ay data:image/png;base64,iVBORw0KGgo…. Pansinin na ang encoded na form ay halos isang-katlong mas malaki kaysa sa orihinal. Iyon ang kompromiso para gawing ligtas ang binary data na direktang i-embed sa teksto.

Ang aking larawan ba ay ina-upload kahit saan?

Hindi. Ginagamit ng conversion ang File API ng browser at ang native na btoa function para i-encode ang larawan nang buo sa iyong device. Maaari mo itong kumpirmahin mismo: buksan ang developer tools ng iyong browser, lumipat sa Network panel, at mag-convert ng larawan — ang tanging mga request na makikita mo ay ang page load at anumang ads. Walang may hugis na larawan na ipinapadala sa isang server, na siyang nagpapaligtas nito para sa mga screenshot, ID na dokumento, at internal na diagram.

Bakit mas malaki ang Base64 output kaysa sa aking orihinal na larawan?

Kinakatawan ng Base64 ang bawat tatlong byte ng binary data sa apat na ASCII na karakter, kaya ang encoded na teksto ay humigit-kumulang 33% na mas malaki kaysa sa source file. Ipinapakita ng data URI size readout sa page na ito ang eksaktong inflated na haba. Iyon ang dahilan kung bakit ang mga data URI ay makatuwirang gamitin lamang para sa maliliit na larawan — ang pag-inline ng 2 MB na larawan ay magpapalaki ng iyong HTML o CSS nang higit pa kaysa sa isang hiwalay na request. Bilang pangkalahatang alituntunin, mag-inline ng mga larawang wala pang humigit-kumulang 4 KB at mag-link sa anumang mas malaki.

Anong mga format ng larawan ang maaari kong i-convert?

Gumagana ang anumang format na kinikilala ng iyong browser bilang isang larawan, dahil binabasa ng tool ang raw bytes sa halip na i-decode ang larawan. Sinasaklaw nito ang PNG, JPEG, GIF, WebP, SVG, at BMP. Ang MIME type ay binabasa nang direkta mula sa file, kaya ang data: prefix ay lagi na tumutugma sa tunay na format — ang JPEG ay gumagawa ng data:image/jpeg at ang SVG ay gumagawa ng data:image/svg+xml. Ang SVG ay karapat-dapat ng espesyal na tala: ito ay teksto na, kaya para sa mga SVG ang URL-encoded na data URI ay kadalasang mas maliit kaysa sa Base64 na bersyon, bagaman ang tool na ito ay naglalabas ng Base64 na form para sa konsistensi.

Mag-drop ng larawan, kopyahin ang data URI o snippet na kailangan mo, at i-paste ito sa iyong HTML, CSS, o email template. Bawat byte ay nananatili sa iyong device. Walang upload, walang account, walang server round-trip.