Utilia
Mga kategorya ▾
Wika: fil ▾

Image to Base64 Converter

I-convert ang larawan sa Base64 o data URI na may CSS at HTML na handang i-paste, o i-decode ang Base64 pabalik sa larawan na may preview. Libre at pribado.

Larawan → Base64

Base64 → larawan

Paano i-convert ang larawan sa Base64

  1. Sa Larawan → Base64, i-drop ang isang larawan sa drop zone o i-click ito para pumili (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Piliin ang Output: Data URI (data:image/png;base64,…), Base64 lang, CSS background-image o HTML tag, na may kasama ring lapad at taas ng larawan.
  3. I-click ang Kopyahin, o I-download bilang .txt para sa mahahabang resulta.

Ibinibigay ng linya sa ilalim ng drop zone ang tunay na format (binabasa mula sa mga byte ng file, hindi sa pangalan nito), ang mga dimensyon, ang laki ng file at ang haba ng data URI.

Paano i-convert ang Base64 pabalik sa larawan

  1. Sa Base64 → larawan, i-paste ang text sa Base64 text o data URI. Puwede kang mag-paste ng hubad na Base64 string, buong data URI, o kahit isang buong CSS rule o <img> tag: hahanapin ang data URI sa loob nito. Hindi pinapansin ang mga line break at space, at gumagana rin ang URL-safe na Base64 (may - at _).
  2. I-click ang I-decode ang larawan. Lalabas ang preview, ang uri, ang mga dimensyon at ang laki.
  3. I-click ang I-download ang larawan para i-save ito na may tamang file extension.

Sinusuri ang uri gamit ang “magic bytes” ng file, ang signature sa simula ng bawat image format (halimbawa 89 50 4E 47 para sa PNG o FF D8 FF para sa JPEG). Kung sinasabi ng data URI na image/jpeg pero PNG ang laman, sasabihin ito ng tool at gagamitin ang tunay na uri. Tinatanggihan ang anumang hindi kilalang larawan, at 20 MB ng image data ang limitasyon.

Paano gumagana ang Base64

Ginagawang 4 na napi-print na character ng Base64 ang bawat 3 byte ng file, na kinukuha mula sa A–Z, a–z, 0–9, + at /, na may = bilang padding sa dulo. Kaya mga 33% na mas malaki ang naka-encode na text kaysa sa file: ang 30 KB na icon ay nagiging humigit-kumulang 40 KB na text. Nagdaragdag ang data URI ng maikling header, data:<type>;base64,, para malaman ng browser kung paano ito babasahin.

Kailan dapat i-inline ang mga larawan bilang data URI

Kapaki-pakinabang ang mga data URI para sa:

  • maliliit na icon, logo at background sa CSS, para makatipid ng isang request;
  • mga HTML email at single-file na HTML document na dapat gumana nang walang panlabas na file;
  • mga JSON API at configuration file na text lang ang kayang dalhin.

Hindi sila bagay sa malalaking litrato. Mas malaki nang isang katlo ang text kaysa sa file, hindi ito maaaring i-cache nang hiwalay sa page o style sheet na may hawak nito, at nagpapabagal ito ng rendering. Lampas humigit-kumulang 10 hanggang 100 KB, kadalasang mas mainam ang karaniwang image file na may magandang caching, kaya nagpapakita ang tool ng paalala para sa mga larawang mahigit 100 KB.

Sa iyong browser tumatakbo ang lahat: hindi kailanman ina-upload ang mga larawan at ipinaste na text.

Mga madalas itanong

Paraan ba ng pag-compress o pagprotekta sa larawan ang Base64?

Hindi. Ginagawang mga 33% na mas malaki ng Base64 ang data at kahit sino ay puwedeng mag-decode nito. Ginagawa lang nitong text ang binary data para makadaan sa mga lugar na hindi kayang magdala ng binary.

Bakit hindi lumalabas ang data URI ko?

Ang pinakakaraniwang dahilan ay nawawala o maling uri sa header, mga space o quotation mark na napasama sa gitna ng string, o putol na text. I-paste ito sa Base64 → larawan: iuulat ng tool ang mga di-wastong character at susuriin ang tunay na uri.

Puwede bang gamitin ang SVG bilang data URI?

Oo. Puwedeng i-encode sa Base64 ang SVG gaya ng anumang larawan. Para sa SVG, madalas na mas maikli ang URL-encoded na data URI (data:image/svg+xml,%3Csvg…); dine-decode ng tool na ito ang dalawang anyo.

Gumagana ba ito sa mga HEIC o AVIF na larawan?

Gumagana ang pag-encode sa anumang image file. Lalabas lang ang preview kung kayang ipakita ng iyong browser ang format, pero laging tama ang Base64 text at ang download.

May limitasyon ba sa laki?

Oo, 20 MB ng image data, sa dalawang direksyon. Pinapabagal ng mas malalaking string ang mga browser at bihirang magandang ideya ito sa isang web page.

Mga kaugnay na tool