CodeKitHubKas ir šis rīks?
Base64 ir veids, kā attēlot binārus datus — piemēram, attēla neapstrādātus baitus — kā vienkāršu tekstu, izmantojot tikai burtus, ciparus un dažus simbolus. Tā kā tas ir vienkāršs teksts, Base64 kodētu attēlu var iegult tieši HTML, CSS vai JSON, nevis atsaukties uz to kā atsevišķu failu.
"Data URL" ietver šo Base64 tekstu ar nelielu prefiksu (data:image/png;base64,), kas pastāsta pārlūkam, kāds faila tips tas ir, tāpēc to var tieši ievietot src vai url() atribūtā un attēlot bez papildu pieprasījuma.
Kāpēc to izmantot?
- Iegūsti abus formātus vienlaikus — pilnu data URL HTML/CSS un neapstrādātu Base64 (bez prefiksa) iegulšanai JSON vai konfigurācijas failos.
- Bez servera pieprasījuma: novērš vienu HTTP pieprasījumu maziem ikoniem, avatariem vai iegultiem attēliem.
- Precīzi saglabā oriģinālos faila baitus — bez pārkodēšanas vai kvalitātes zuduma, atšķirībā no rīkiem, kas attēlu atkodē un pārsaglabā.
- Rāda izmēra atšķirību, lai zinātu, ko iegūsti apmaiņā pret ērtību.
- Privāti: fails tiek nolasīts lokāli ar pārlūka FileReader API un nekad neatstāj tavu ierīci.
Kā to lietot
- Noklikšķini uz augšupielādes lauka vai ievelc tur attēla failu.
- Kopē pilno data URL, ja ielīmē <img src> vai CSS background-image.
- Kopē neapstrādāto Base64 (bez data: prefiksa), ja iegulsti vērtību JSON, YAML vai citā konfigurācijas formātā, kas jau zina faila tipu.
- Pārbaudi izmēra piezīmi — Base64 teksts ir aptuveni par trešdaļu lielāks nekā oriģinālais binārais fails.
Piemērs
Ievade
12 KB PNG ikonas fails.Izvade
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB teksta) plus tā pati virkne bez data: prefiksa.~33% izmēra pieaugums ir raksturīgs Base64 kodēšanai (3 binārie baiti kļūst par 4 teksta rakstzīmēm) — tas nav rīka kļūda.
Kur katrs formāts tiek izmantots
| Formāts | Tipiskais lietojums |
|---|---|
| Pilns data URL | HTML <img src="...">, CSS background-image: url(...), iegulti e-pasta attēli |
| Neapstrādāts Base64 | JSON API slodzes, YAML/konfigurācijas faili, datubāzes BLOB lauki, pielāgoti bināri protokoli |
Base64 un attēla izmērs — kompromiss praksē
~33% pieskaitījums nozīmē, ka Base64 iegulšana vislabāk der maziem resursiem: 2 KB ikona kļūst par nekaitīgiem ~2.7 KB iegulta teksta, bet 500 KB fotoattēls kļūst par ~665 KB teksta, kas atrodas tavā HTML, kas palēnina parsēšanu un nevar tikt kešots atsevišķi no lapas.
Ja iegulsti daudzus attēlus vai lielākus, izsver viena ietaupīta pieprasījuma ieguvumu pret lapas svara izmaksām — un apsver iespēju vispirms saspiest.
Biežāk uzdotie jautājumi
Kāpēc Base64 virkne ir tik daudz lielāka nekā mans attēla fails?
Base64 kodē katrus 3 binārā datu baitus kā 4 teksta rakstzīmes, kas ir fiksēts ~33% izmēra pieaugums. 100 KB attēlam sagaidi apmēram 133 KB Base64 teksta. Tas ir normāli un neizbēgami — tā ir cena par bināru datu attēlošanu kā drošu, pārnesamu tekstu.
Kāda ir atšķirība starp data URL un neapstrādāto Base64 virkni?
Data URL ietver data:image/png;base64, prefiksu, kas pasaka pārlūkam vai renderētājam, kādu MIME tipu sekojošais teksts atkodē. Ielīmē pilno data URL HTML src vai CSS url(). Neapstrādātais Base64 (viss aiz komata) ir tas, kas vajadzīgs, kad sistēma jau atsevišķi zina faila tipu — piemēram, JSON lauks kā { "format": "png", "data": "<neapstrādāts base64>" }.
Kad vajadzētu iegult attēlu kā Base64, nevis saiti uz failu?
Base64 iegulšana ir noderīga maziem, bieži atkārtoti izmantotiem attēliem (ikonas, logotipi, mazi UI grafiskie elementi), kur viena HTTP pieprasījuma ietaupīšana atsver ~33% izmēra soda naudu, vai kontekstos, kur atsevišķs fails nav praktisks, piemēram, iegultos e-pastos vai viena faila HTML eksportos. Lieliem fotoattēliem vai jebkam, kas tiek izmantots vairākās lapās, parasta saistītā faila izmantošana ar pārlūka kešatmiņu gandrīz vienmēr ir labāka.
Vai konvertēšana uz Base64 maina vai saspiež manu attēlu?
Nē. Base64 ir bezzudumu teksta kodēšana precīzajiem oriģinālajiem baitiem — tas neaiztiek pikseļus, izšķirtspēju vai saspiešanu. Ja vēlies mazāku failu, vispirms saspied attēlu ar attēlu kompresoru, tad konvertē saspiesto rezultātu Base64.
Vai mans attēls tiek kaut kur augšupielādēts?
Nē. Fails tiek nolasīts tieši tavā pārlūkā, izmantojot FileReader API, un kodēts lokāli — tas nekad netiek sūtīts caur tīklu.