ຂ້ອຍຈະປ່ຽນຮູບພາບເປັນ Base64 data URI ສຳລັບ CSS ໄດ້ແນວໃດ?

ລາກວາງ ຫຼື ວາງຮູບພາບ (Ctrl+V), ຈາກນັ້ນເປີດແຖບ CSS ແລ້ວກົດ ສຳເນົາ. ທ່ານຈະໄດ້ກົດ background-image: url(...) ທີ່ມີ data URI ຝັງຢູ່ໃນນັ້ນ. ແຖບ HTML, Markdown, Raw Base64 ແລະ JSON ໃຊ້ວິທີດຽວກັນ.

ເປັນຫຍັງຜົນລັບ Base64 ຈຶ່ງໃຫຍ່ກວ່າຮູບຂອງຂ້ອຍປະມານໜຶ່ງສ່ວນສາມ?

Base64 ປ່ຽນທຸກໆ 3 ໄບຕ໌ເປັນຕົວອັກສອນ 4 ຕົວ, ດັ່ງນັ້ນຂໍ້ຄວາມຈຶ່ງໃຫຍ່ກວ່າໄຟລ໌ປະມານ 33%. ນັ້ນຄືເຫດຜົນທີ່ data URI ເໝາະກັບໄອຄອນ ແລະ ໂລໂກ້ນ້ອຍໆ, ບໍ່ແມ່ນຮູບຖ່າຍໃຫຍ່.

ຂ້ອຍຈະເຮັດໃຫ້ສະຕຣິງ Base64 ສັ້ນລົງໄດ້ແນວໃດ?

ເປີດ ຫຍໍ້ ກ່ອນ ແລ້ວຕັ້ງ ຄວາມກວ້າງສູງສຸດ ຫຼື ຮູບແບບ (WebP, JPEG ຫຼື PNG), ແລະ ຫຼຸດ ຄຸນນະພາບ ສຳລັບ WebP ຫຼື JPEG. ໄຟລ໌ SVG ແລະ GIF ບໍ່ສາມາດຫຍໍ້ແບບນີ້ໄດ້; SVG ຈະມີແຖບ SVG (ເຂົ້າລະຫັດ URL) ແທນ.

ຂ້ອຍສາມາດປ່ຽນສະຕຣິງ Base64 ກັບເປັນຮູບພາບໄດ້ບໍ?

ໄດ້. ປ່ຽນ ທິດທາງ ເປັນ Base64 ເປັນຮູບພາບ ແລ້ວວາງ data URI ຫຼື Base64 ລ້ວນໆ. ມັນຮູ້ຈັກ PNG, JPEG, GIF, WebP, SVG, BMP, ICO ແລະ AVIF, ຈາກນັ້ນສະເໜີໃຫ້ດາວໂຫຼດ. ຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງຈະສະແດງຂໍ້ຜິດພາດ.

ເປັນຫຍັງ ສຳເນົາ ຈຶ່ງລົ້ມເຫຼວ ຫຼື ຕົວຢ່າງເບິ່ງຄືຖືກຕັດຢູ່ໃນຮູບໃຫຍ່?

ຕົວຢ່າງສະແດງພຽງ 2000 ຕົວອັກສອນທຳອິດ, ແຕ່ ສຳເນົາ ແລະ ດາວໂຫຼດ ໃຫ້ຄ່າທັງໝົດ. ສະຕຣິງທີ່ໃຫຍ່ຫຼາຍອາດເກີນຂີດຈຳກັດ clipboard ຂອງບຣາວເຊີ, ດັ່ງນັ້ນໃຫ້ໃຊ້ ດາວໂຫຼດ ຫຼື ຫຍໍ້ຮູບກ່ອນ.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ໄຟລ໌ຂອງຂ້ອຍຖືກອັບໂຫຼດບໍ?

ບໍ່. ໄຟລ໌ຂອງທ່ານຖືກເປີດ ແລະ ປະມວນຜົນພາຍໃນບຣາວເຊີຂອງທ່ານ ແລະ ບໍ່ຖືກສົ່ງໄປ LibraTool. ບາງເຄື່ອງມືຈະດາວໂຫຼດເອັນຈິນປະມວນຜົນ ຫຼື ໂມເດວ AI ໄປບຣາວເຊີກ່ອນ; ການດາວໂຫຼດນັ້ນບໍ່ມີຂໍ້ມູນຂອງທ່ານ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ. ໄຟລ໌ໃຫຍ່ຫຼາຍອາດຊ້າ ຫຼື ໜ່ວຍຄວາມຈຳເຕັມເທິງໂທລະສັບ, ດັ່ງນັ້ນໃຫ້ໃຊ້ຄອມພິວເຕີສຳລັບໄຟລ໌ເຫຼົ່ານັ້ນ.

🖼️

ຮູບ ເປັນ Base64 ຟຣີ

ແປງຮູບ ເປັນ Base64 data URI ສຳລັບໃຊ້ inline ໃນ CSS, HTML ຫຼື Markdown. ຄັດລອກ snippet ທີ່ພ້ອມໃຊ້. ເຂົ້າລະຫັດໃນບຣາວເຊີ; ບໍ່ຖືກອັບໂຫຼດ.

ຂະໜາດໄຟລ໌ຂຶ້ນກັບອຸປະກອນຂອງທ່ານໄຟລ໌ເປັນສ່ວນຕົວບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ວາງໄຟລ໌ບ່ອນນີ້, ຫຼື ກົດເພື່ອເລືອກ

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · ປະມວນຜົນຢູ່ໃນອຸປະກອນຂອງທ່ານ

ຫຼືກົດ Ctrl+V ເພື່ອວາງຈາກຄລິບບອດ

ຊອກຫາໄຟລ໌

ຄຳແນະນຳ: ເຈົ້າຍັງສາມາດວາງຮູບຈາກ clipboard (Ctrl+V).

ໄຟລ໌ຂອງທ່ານບໍ່ເຄີຍອອກຈາກອຸປະກອນຂອງທ່ານ. ການປະມວນຜົນທັງໝົດເກີດຂຶ້ນຢູ່ໃນຕົວທ່ອງເວັບຂອງທ່ານ.

ແປງຮູບພາບເປັນ Base64 data URI ທີ່ທ່ານສາມາດວາງໂດຍກົງໃນ CSS, HTML, ຫຼື Markdown — ບໍ່ຕ້ອງໃຊ້ໄຟລ໌ແຍກ. Encode ໃນບຣາວເຊີຂອງທ່ານ; ບໍ່ໄດ້ອັບໂຫລດ.

ການນຳໃຊ້ທົ່ວໄປ

ຝັງຮູບພາບໃນ CSSEmbed ຂະຫນາດນ້ອຍ icon ຫຼື background ເປັນ data URI ໃນ stylesheet ຂອງທ່ານ.
Inline ຮູບເຂົ້າໄປ HTMLEmbed logo ຫຼື icon ໂດຍກົງລົງໃນ self-contained HTML.
ປ່ຽນ SVG ຫຼື Icon ເປັນ Base64ປ່ຽນ icon ນ້ອຍເປັນ data URI ສໍາລັບ inlining.
Inline ຮູບເຂົ້າໄປ MarkdownEmbed ຮູບນ້ອຍໃນ Markdown file ທີ່ມີ data URI.
ໄດ້ຮັບ Image Data URIຜະລິດລຸ້ນ raw data: URI ທີ່ທ່ານສາມາດນໍາໃຊ້ໃນທົ່ວ.

ມັນເຮັດວຽກແນວໃດ

data URI embeds ຮູບໂດຍກົງເຂົ້າໃນລະຫັດຂອງທ່ານເປັນຂໍ້ຄວາມ, ດັ່ງນັ້ນມັນໂຫລດໂດຍບໍ່ມີຟາຍ request ແຍກ — ສະດວກສໍາລັບ icons ນ້ອຍ ແລະ HTML. ນີ້ encode ມັນໃນບາວເຊີ.

1
ທ່ານຖໍາຮູບ
ມັນຖືກອ່ານ locally ທີ່ມີ FileReader API — ບໍ່ເຄີຍອັບໂຫລດ.
2
ມັນ Base64-encoded
ຮູບ bytes ກາຍເປັນ data: URI (data:image/...;base64,…) ພາຍໃນບາວເຊີ.
3
ທ່ານເລືອກ snippet
ບໍ້ raw data URI, ຫຼື CSS ສ້າງ (background-image), HTML (<img>), ຫຼື Markdown.
4
ວາງເຂົ້າໃນລະຫັດຂອງທ່ານ
ຮູບຈະເກັບກັນ CSS/HTML — ບໍ່ມີຟາຍເພີ່ມເຕີມສໍາລັບໂຮດ.

ຮູບໄດ້ຖືກ encode ທັງໝົດໃນອຸປະກອນຂອງທ່ານ. ໂປຣດ Base64 ~33% ໃຫຍ່ກວ່າເດີມ, ດັ່ງນັ້ນ data URIs ດີທີ່ສຸດສໍາລັບຮູບນ້ອຍ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🖼️

Steganography ຮູບ (ເຊື່ອງຂໍ້ຄວາມ)

ເຊື່ອງຂໍ້ຄວາມລັບໃນ PNG ດ້ວຍ least-significant-bit steganography ພ້ອມ AES-256-GCM password ທາງເລືອກ. ດຶງຄືນ ດ້ວຍ tool ດຽວກັນ. ທຸກຢ່າງໃນບຣາວເຊີ.

ລອງໃຊ້ໄຟລ໌ຢູ່ໃນທ້ອງຖິ່ນ

🔢

ເຂົ້າລະຫັດ & ຖອດລະຫັດ Base64

ເຂົ້າລະຫັດຂໍ້ຄວາມ ຫຼື ໄຟລ໌ ເປັນ Base64 ຫຼື ຖອດລະຫັດ Base64 ກັບຄືນເປັນຂໍ້ຄວາມ. ທັນທີ, ສ່ວນຕົວ ແລະ ຟຣີ.

ລອງໃຊ້

🔗

ຕົວເຂົ້າລະຫັດ ແລະຕົວຖອດລະຫັດ URL

ເຂົ້າລະຫັດ ແລະຖອດລະຫັດ URL ແລະສາຍຄຳຊອກຫາ. ຮອງຮັບ encodeURIComponent, decodeURIComponent, ແລະ query string parsing.