Paano ko iko-convert ang larawan sa Base64 data URI para sa CSS?

I-drop o i-paste ang larawan (Ctrl+V), pagkatapos ay buksan ang tab na CSS at i-click ang Kopyahin. Makakakuha ka ng rule na background-image: url(...) na may nakapaloob na data URI. Ganito rin gumagana ang mga tab na HTML, Markdown, Raw Base64 at JSON.

Bakit mga isang-katlo na mas malaki ang Base64 output kaysa sa larawan ko?

Ginagawang 4 na text character ng Base64 ang bawat 3 byte, kaya mga 33% na mas malaki ang teksto kaysa sa file. Kaya angkop ang data URI sa maliliit na icon at logo, hindi sa malalaking larawan.

Paano ko mapapaikli ang Base64 string?

Buksan muna ang Paliitin at magtakda ng Max na lapad o Format (WebP, JPEG o PNG), at ibaba ang Kalidad para sa WebP o JPEG. Hindi mapapaliit sa ganitong paraan ang mga file na SVG at GIF; SVG ay may tab na SVG (URL-encoded) bilang kapalit.

Maaari ko bang gawing larawan muli ang isang Base64 string?

Oo. Ilipat ang Direksyon sa Base64 papuntang Larawan at i-paste ang data URI o payak na Base64. Nakikilala nito ang PNG, JPEG, GIF, WebP, SVG, BMP, ICO at AVIF, at saka nag-aalok ng download. Nagpapakita ng error ang di-wastong input.

Bakit pumapalya ang Kopyahin o mukhang putol ang preview sa malaking larawan?

Ang unang 2000 character lang ang ipinapakita ng preview, pero ibinibigay ng Kopyahin at I-download ang buong halaga. Maaaring lumampas sa limitasyon ng clipboard ng browser ang napakalaking string, kaya gamitin ang I-download o paliitin muna ang larawan.

Oo. Libre ang bawat tool, walang account at walang credit card. Ang trabaho ay tumatakbo sa iyong device sa halip na sa aming mga server, kaya ito nananatiling libre.

Ina-upload ba ang mga file ko?

Hindi. Binubuksan at pinoproseso ang mga file mo sa loob ng iyong browser at hindi ipinapadala sa LibraTool. Nagda-download muna ang ilang tool ng processing engine o AI model sa iyong browser; walang data mo sa download na iyon.

Gumagana ba ito sa mobile?

Oo. Gumagana ito sa mga kasalukuyang mobile browser sa iOS at Android, nang walang ini-install. Ang napakalalaking file ay maaaring bumagal o maubusan ng memory sa telepono, kaya gumamit ng computer para sa mga iyon.

🖼️

Libreng Larawan sa Base64

I-convert ang isang larawan sa isang Base64 data URI para sa inline na paggamit sa CSS, HTML, o Markdown. Kopyahin ang mga handa nang snippet. Encoded sa iyong browser; hindi kailanman nag-a-upload.

Ang laki ng file ay depende sa iyong deviceNananatiling pribado ang mga fileHindi kailangan ng loginLibre magpakailanman

Gumagana offline kapag na-load na

I-drop ang file dito, o mag-click para mag-browse

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · pinoproseso sa iyong device

o pindutin ang Ctrl+V para i-paste mula sa clipboard

I-browse ang mga file

Tip: maaari mo ring i-paste ang larawan mula sa iyong clipboard (Ctrl+V).

Ang iyong mga file ay hindi kailanman lumalabas sa iyong device. Lahat ng pagproseso ay nangyayari nang lokal sa iyong browser.

I-convert ang larawan sa Base64 data URI na maaaring direktang i-paste sa CSS, HTML, o Markdown — hindi na kailangan ng hiwalay na file. Ino-encode sa iyong browser; hindi ini-upload.

Mga karaniwang gamit

I-inline ang Image sa CSSI-embed ang isang maliit na icon o background bilang data URI sa stylesheet.
I-embed ang Image sa HTMLI-inline ang isang logo o icon direkta sa self-contained HTML.
I-convert ang SVG o Icon sa Base64Gawing data URI ang maliit na icon para sa inlining.
I-embed ang Image sa MarkdownI-inline ang isang maliit na image sa Markdown file gamit ang data URI.
Makakuha ng Image Data URIGumawa ng raw data: URI na maaari mong gamitin kahit saan.

Paano ito Gumagana

Ini-embed ng isang data URI ang larawan nang direkta sa iyong code bilang teksto, kaya nilo-load ito nang walang hiwalay na file request — kapaki-pakinabang para sa maliliit na icon at self-contained na HTML. Ine-encode ito ng isang ito sa iyong browser.

1
I-drop mo ang isang larawan
Ito ay binabasa ng lokal gamit ang FileReader API — hindi kailanman na-upload.
2
Ito ay Base64-encoded
Ang image bytes ay nagiging data: URI (data:image/...;base64,…) kaagad sa iyong browser.
3
Ikaw ay pumipili ng isang snippet
Kopyahin ang raw data URI, o ready-made CSS (background-image), HTML (<img>), o Markdown.
4
I-paste ito sa iyong code
Sumasama na ang larawan nang inline sa iyong CSS/HTML — walang dagdag na file na ihu-host.

Ang larawan ay naka-encode nang lubusan sa iyong device. Tandaan na ang Base64 ay ~33% na mas malaki kaysa sa original, kaya ang data URIs ay pinakamahusay para sa maliit na mga larawan.

Mga Kaugnay na Tool

🖼️

Image Steganography (Itago ang Teksto sa Larawan)

Itago ang isang lihim na mensahe ng teksto sa loob ng isang PNG gamit ang least-significant-bit steganography, na may opsyonal na AES-256-GCM na pag-encrypt ng password. Kunin ito mamaya gamit ang parehong tool. Lahat ay tumatakbo sa iyong browser.

SubukanLokal ang mga file

🔢

Base64 Encoder at Decoder

I-encode ang teksto o mga file sa Base64, o i-decode ang mga Base64 string pabalik sa plain text. Mabilis, pribado, at libre.

Subukan

🔗

URL Encoder at Decoder

I-encode at i-decode ang mga URL at query string. Sinusuportahan ang encodeURIComponent, decodeURIComponent, at query string parsing.