§

Saka hoto ko danna don zaɓa

PNG, JPEG, GIF, WebP, SVG, BMP — har zuwa MB 30. Hoto ɗaya a lokaci guda.

Ana karanta hoto kuma ana simbawa gaba ɗaya a kan na'urarka — ba ta fita daga mai binciken ka ba.

A Arewacin Najeriya da Nijar, ƙungiyoyin haɓaka yanar gizo sukan saka hotuna ƙanana a matsayin Data URI don gujewa ombin HTTP ƙarin a kan hanyoyin sadarwa ƙarancin faɗin benci. Hukumomin gwamnati da bankuna kamar Zenith Bank da Access Bank suna yawan buƙatar hotuna ƙanana — hatimi, alamomin tambari — a cikin buƙatun API a matsayin Base64 maimakon URL ɗin fayil. Manyan masu gidan yanar gizo na kasuwanci da ke amfani da Flutterwave ko Paystack a wani lokaci suna saka hotuna na kwafin kudin a cikin ziyarce-ziyarcen PDF na rasit da ake tura su ta imel. Saboda dukan aikin ɓoyewa yana faruwa a cikin mai binciken, hotuna masu mahimmanci — kamar hoton ID ko takardar inshora — ba sa barin na'urar ka kuma ba a buƙatar damuwa game da sirrinta.

// Kayan Aiki Masu Alaƙa

./base64-encoder
Base64 Mai Ɓoyewa
Ɓoye rubutu da fayiloli zuwa tsarin Base64.
→
./image-format-converter
Mai Juyar da Tsarin Hoto
Juyar da hotuna na PNG, JPEG, da WebP gida — babu loda, goyan bayan batch.
→
./image-compressor
Mai Matsa Hoto
Matsa hotuna na JPEG, PNG, da WebP gida — inganci ko girman da ake so, babu loda.
→
./
Duk Kayan Aiki
Duba cikakkun kayan aikin Ultim8Soft na online.
→

Yadda juyarwa daga hoto zuwa Base64 ke aiki

Dukan juyarwa tana gudana a cikin mai binciken ka ta amfani da File API da kuma karan aiki na btoa na cikin gida — ba a sauke maktaba ta codec kuma babu uwar garken da ke ganin hoto. Ga matakin duka, daga farko zuwa ƙarshe:

  1. Kana saka ko zaɓar hoto. Mai binciken yana karanta shi a matsayin Blob daga faifan gida, ba tare da kwafa baiti zuwa uwar garken ba.
  2. Ana karanta fayil a ƙananan sassa na MB 1 kuma baiti na kowane sashi ana ƙara su zuwa mfuatano na binary. Wannan yana hana hotuna masu girma daga cikar tarin siyan JavaScript.
  3. Ana wuce mfuatano na binary zuwa btoa, wanda ke juyar da kowane baiti uku zuwa haruffa huɗu na Base64 da aka ɗauka daga haruffan A–Z, a–z, 0–9, ƙari da /.
  4. Ana karanta nau'in MIME na fayil (image/png, image/jpeg, da sauransu) daga kayan Fayil kuma ana ƙarawa a gaban shi a matsayin ƙarin data:, yana samar da URI kamili na data:image/…;base64,….
  5. Shafin yana tattara fitarwa huɗu daga wannan URI — Data URI kamili, Base64 ƙanƙanta ba tare da ƙari ba, tagi na shirye don liƙa, da ɓangaren CSS background-image — kowane yana da maɓallinsa na kwafi.

Me ya sa a simba hoto a matsayin Data URI?

  • Sanya tambari ƙanana ko gumaka a matsayin Data URI yana kawar da ombin hanyar sadarwa daban, don shafi ko imel yana nuna farkon firam ɗin sa da sauri kaɗan.
  • Shafi ko faifan salon da hotunansa suna ciki yana da kai tsaye. Yana aiki ba tare da intanet ba, kuma za a iya motsa shi ba tare da jawo fayilin rasilimali tare da shi ba.
  • Yawancin abokan imel suna toshe hotuna na nesa a tsoho. Sanya tambari a matsayin Base64 kuma zai bayyana nan da nan an bude sakon, ba a buƙatar ɗauko na nesa.
  • Simbawa tana faruwa gaba ɗaya a cikin mai binciken ka, don haka hotuna masu mahimmanci ba sa taɓa uwar garken na ɓangare na uku. Wannan ya shafi hotuna na allo, hoton ID, da zane-zane na ciki.

Amfanin gama-gari na hotuna na Base64

Data URIs suna bayyana duk inda hoto ya yi ƙanƙanta wanda ombi daban ya fi tsada fiye da kumburi na ~33% na girman da Base64 ke ƙarawa. Mifumo uku na yau da kullun:

  • Gumakan CSS na cikin gida: sprite ko gumaka na KB 1–2 da aka saka a cikin faifan salon a matsayin background-image: url(data:…) don doka ta kasance da kai tsaye gaba ɗaya.
  • Sa hannun imel da jaridu: tambari da aka sanya a ciki a matsayin mai data URI src yana bayyana ko da abokin imel ya toshe hotuna na nesa.
  • Ɗorawa na ginin zana: masu haɗa kai kamar Webpack da Vite suna saka kayan aiki masu ƙarancin ƙima ta atomatik, kuma wannan kayan aiki yana ba ka damar ganin daidai yadda fitarwar take kama.

Hoto na Base64 yana kama yaya?

Ɗauki ƙananan PNG na 1×1 mai gaskiya. Baiti ɗin sa yana da baiti 67 kawai, amma idan an simba ya zama mfuatano iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, kuma Data URI kamili ita ce data:image/png;base64,iVBORw0KGgo…. Lura cewa sigar da aka simba ta fi asali girma da kusan kashi ɗaya bisa uku. Wannan shi ne musayar don sanya data ta binary ta kasance aminci a saka kai tsaye a cikin rubutu.

Shin hotona ana lodawa a wani wuri?

A'a. Juyarwa tana amfani da File API na mai binciken da kuma karan aiki na asali na btoa don simbawa hoto gaba ɗaya a kan na'urarka. Kana iya tabbatar da shi kai tsaye: buɗe kayan aikin mai haɓaka na mai binciken ka, canza zuwa panel na Hanyar Sadarwa, kuma simba hoto — buƙatun da za ka gani kawai sune loda shafi da kowane talla. Babu komai mai siffar hoto da ake aika zuwa uwar garken, kuma wannan shi ne ya sa ya kasance mai aminci don hotunan allo, takardu na ID, da zane-zane na ciki.

Me ya sa fitarwar Base64 ta fi hoton asali girma?

Base64 yana wakiltar kowane baiti uku na data ta binary da haruffa huɗu na ASCII, don haka rubutun da aka simba ya fi fayil ɗin tushe girma da kusan 33%. Ganin girman Data URI a wannan shafin yana nuna daidai urefu da ya ƙaru. Wannan shi ne dalilin da ya sa Data URIs sun yi ma'ana ne kawai don hotuna ƙanana — sanya cikin gida hoton MB 2 zai kumburzar da HTML ko CSS ɗinka da yawa fiye da yadda ombi daban zai yi. Dokar yatsa: sanya cikin gida hotuna masu ƙarancin KB 4 kuma haɗu da duk wani abu mai girma.

Wanne tsarukan hoto ana iya juyarwa?

Kowane tsari da mai binciken ka ke gane shi a matsayin hoto yana aiki, saboda kayan aikin yana karanta baiti ɗin ƙanƙanta maimakon sassaƙa hoton. Wannan ya haɗa da PNG, JPEG, GIF, WebP, SVG, da BMP. Ana karanta nau'in MIME kai tsaye daga fayil, don haka ƙarin data: koyaushe yana daidaita da tsarin ainihin — JPEG yana samar da data:image/jpeg kuma SVG yana samar da data:image/svg+xml. SVG ya cancanci lura na musamman: yana da rubutu tuni, don haka ga SVGs Data URI mai simbawa ta URL da yawa ta fi ƙanƙanta fiye da sigar Base64, kodayake wannan kayan aikin yana fitarwa da sigar Base64 don daidaito.

Saka hoto, kwafi Data URI ko ɓangaren da kake buƙata, ka liƙa shi cikin HTML, CSS, ko ƙirar imel ɗinka. Kowane baiti yana kasancewa a kan na'urarka. Babu loda, babu asusun, babu tafiyar zuwa uwar garken.