§

Rasm tashlang yoki tanlash uchun bosing

PNG, JPEG, GIF, WebP, SVG, BMP — 30 MB gacha. Bir vaqtda bitta rasm.

Rasm to'liq qurilmangizda o'qiladi va kodlanadi — brauzeringizdan hech qachon chiqmaydi.

O'zbekistondagi veb-jamoalar va dasturchilar Base64 bilan kodlangan data URI'larni turli yo'nalishlarda faol qo'llaydi. My.gov.uz portalining backend'i va UZINFOCOM boshqaruvidagi davlat axborot tizimlari hujjat qo'shimchalarini ko'pincha inline Base64 ko'rinishida saqlaydi. IT Park Tashkentdagi startaplar va moliya texnologiyalari jamoalari elektron to'lov kvitansiyalaridagi logotipllarni inline joylashtiradi — shunda pochta ilovasi uzoq rasmlarni bloklasa ham ko'rinadi. TUIT talabalari React yoki Vue loyihalarida Vite bundlerining ma'lumot URI chegarasi bilan ishlashda bu vositaga murojaat qiladi. Raqamli xavfsizlik talablari bo'yicha ishlaydigan tashkilotlar esa identifikatsiya tasviri va ekran suratlarini tashqi serverlarga jo'natmasdan ko'rib chiqishda brauzer asosidagi bu yechimni afzal ko'radi.

Rasmdan Base64'ga konvertatsiya qanday ishlaydi

Butun konvertatsiya File API va o'rnatilgan btoa funksiyasidan foydalangan holda brauzeringizda ishlaydi — hech qanday kodek kutubxonasi yuklanmaydi va hech qanday server rasmni ko'rmaydi. Mana pipeline, boshidan oxirigacha:

  1. Rasmni tashlab yoki tanlab olasiz. Brauzer uni mahalliy diskingizdan Blob sifatida o'qiydi, baytlarni hech qachon serverga nusxalamaydi.
  2. Fayl 1 MB bo'laklarda o'qiladi va har bir bo'lakning baytlari ikkilik satriga qo'shiladi. Bo'laklash katta rasmlarning JavaScript chaqiruv stekini to'ldirib yuborishini oldini oladi.
  3. Ikkilik satr btoa'ga uzatiladi, u har uch baytni A–Z, a–z, 0–9, plyus / alifbesidan to'rtta Base64 belgisiga moslashtiradi.
  4. Faylning MIME turi (image/png, image/jpeg va hokazo) File ob'ektidan o'qiladi va data: prefiksi sifatida qo'shiladi, to'liq data:image/…;base64,… URI hosil qiladi.
  5. Sahifa bu URI'dan to'rtta chiqish yig'adi — to'liq data URI, prefikssiz xom Base64, joylashtirishga tayyor teg va CSS background-image fragmenti — har biri o'zining nusxalash tugmasi bilan.

Nima uchun rasmni data URI sifatida kodlash kerak?

  • Kichik logotipl yoki ikonani data URI sifatida inline joylashtirish alohida tarmoq borishini bartaraf etadi, shuning uchun sahifa yoki elektron pochta birinchi kadrni biroz tezroq render qiladi.
  • Rasmlarni inline joylashtirgan sahifa yoki stil varag'i mustaqil hisoblanadi. U oflayn ishlaydi va yonida vositalar papkasini sudrab o'tmasdan ko'chirib o'tish mumkin.
  • Ko'p pochta mijozlari odatiy holda masofaviy rasmlarni bloklaydi. Logotiplni Base64 inline sifatida joylashtiring va u xabar ochilgan zahoti ko'rinadi, masofaviy yuklab olish talab qilinmaydi.
  • Kodlash to'liq brauzeringizda amalga oshiriladi, shuning uchun maxfiy rasmlar hech qachon uchinchi tomon serveriga etib bormaydi. Bu ekran suratlari, shaxsiy hujjat suratlari va ichki diagrammalarga tegishli.

Base64 tasvirlarining keng tarqalgan foydalanishlari

Data URI'lar tasvirning Base64 qo'shgan ~33% hajm oshishidan alohida so'rovning narxidan arzonroq bo'lgan har qanday joyda namoyon bo'ladi. Uch naqsh doimiy ravishda uchraydi:

  • CSS inline ikonalari: stil varag'iga background-image: url(data:…) sifatida tushirilgan 1–2 KB sprite yoki ikona, qoida to'liq mustaqil bo'ladi.
  • Elektron pochta imzolari va axborot byulletenlari: data URI src bilan sifatida joylashtirilgan logotipl mijoz masofaviy rasmlarni bloklasa ham render bo'ladi.
  • Build vositasi orqali inline joylashtirish: Webpack va Vite kabi bundlerlar bayt chegarasidan past bo'lgan vositalarni avtomatik ravishda inline joylashtiradi va bu vosita aynan shu chiqish qanday ko'rinishini oldindan ko'rish imkonini beradi.

Base64 tasviri qanday ko'rinadi?

Kichik 1×1 shaffof PNG oling. Uning xom baytlari atigi 67 bayt, lekin kodlanganda iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= qatoriga aylanadi va to'liq data URI data:image/png;base64,iVBORw0KGgo… bo'ladi. Kodlangan shaklning aslidan taxminan uchdan bir katta ekanligiga e'tibor bering. Bu ikkilik ma'lumotlarni to'g'ridan-to'g'ri matn ichiga xavfsiz joylashtirish uchun to'lanadigan narx.

Rasmim biron joyga yuklanadimi?

Yo'q. Konvertatsiya rasmni to'liq qurilmangizda kodlash uchun brauzerning File API va mahalliy btoa funksiyasidan foydalanadi. Buni o'zingiz tasdiqlashingiz mumkin: brauzeringizning ishlab chiqaruvchi vositalarini oching, Tarmoq panelga o'ting va rasmni aylantiring — ko'radigan so'rovlar faqat sahifa yuklanishi va reklamalar bo'ladi. Rasm shaklidagi hech narsa serverga jo'natilmaydi, bu esa ekran suratlari, shaxsiy hujjatlar va ichki diagrammalar uchun xavfsiz qiladi.

Nima uchun Base64 chiqishi asl rasmimdan kattaroq?

Base64 har uch bayt ikkilik ma'lumotni to'rtta ASCII belgisi bilan ifodalaydi, shuning uchun kodlangan matn manba fayldan taxminan 33% kattaroq. Bu sahifadagi data URI hajmi ko'rsatkichi aniq shishirilgan uzunlikni ko'rsatadi. Bu qo'shimcha narx tufayli data URI'lar faqat kichik rasmlar uchun mantiqli — 2 MB rasmni inline joylashtirish HTML yoki CSS'ingizni alohida so'rovdan ancha ko'proq kengaytiradi. Umumiy qoida: taxminan 4 KB dan past rasmlarni inline joylashtiring, kattaroqlari uchun havoladan foydalaning.

Qaysi rasm formatlarini aylantira olaman?

Brauzeringiz rasm sifatida tanigan har qanday format ishlaydi, chunki vosita rasmni dekodlamay xom baytlarni o'qiydi. Bu PNG, JPEG, GIF, WebP, SVG va BMP ni o'z ichiga oladi. MIME turi to'g'ridan-to'g'ri fayldan o'qiladi, shuning uchun data: prefiksi har doim haqiqiy formatga mos keladi — JPEG data:image/jpeg, SVG esa data:image/svg+xml beradi. SVG alohida eslatmaga loyiq: u allaqachon matn, shuning uchun SVG'lar uchun URL bilan kodlangan data URI ko'pincha Base64 versiyasidan kichikroq bo'ladi, lekin bu vosita izchillik uchun Base64 shaklini chiqaradi.

Rasm tashlang, kerakli data URI yoki fragmentni nusxalang va HTML, CSS yoki elektron pochta shabloniga joylashtiring. Har bir bayt qurilmangizda qoladi. Yuklash yo'q, hisob yo'q, server borishdan qaytishsiz.