Attēls uz Base64 – Data URI, CSS un HTML

Attēla konvertētājs uz Base64

Konvertējiet attēlu uz Base64 vai data URI ar gatavu CSS un HTML kodu, vai atkodējiet Base64 atpakaļ attēlā ar priekšskatījumu. Bez augšupielādes.

Attēls → Base64

Ievelciet attēlu šeit vai noklikšķiniet, lai to izvēlētos Jūsu faili paliek jūsu ierīcē: tie netiek augšupielādēti.

Izvade Rezultāts

Base64 → attēls

Base64 teksts vai data URI

Kā konvertēt attēlu uz Base64

Sadaļā Attēls → Base64 ievelciet attēlu nolaišanas zonā vai noklikšķiniet uz tās, lai to izvēlētos (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
Izvēlieties Izvade: Data URI (data:image/png;base64,…), Tikai Base64, CSS background-image vai HTML tags, kas satur arī attēla platumu un augstumu.
Noklikšķiniet uz Kopēt vai uz Lejupielādēt kā .txt gariem rezultātiem.

Rindā zem nolaišanas zonas redzams faktiskais formāts (nolasīts no faila baitiem, nevis no nosaukuma), izmēri, faila izmērs un data URI garums.

Kā atkodēt Base64 atpakaļ attēlā

Sadaļā Base64 → attēls ielīmējiet tekstu laukā Base64 teksts vai data URI. Varat ielīmēt tīru Base64 virkni, pilnu data URI vai pat visu CSS noteikumu vai <img> tagu: data URI tajā tiek atrasts. Rindu pārtraukumi un atstarpes tiek ignorēti, un darbojas arī URL drošais Base64 (ar - un _).
Noklikšķiniet uz Atkodēt attēlu. Parādās priekšskatījums, tips, izmēri un faila izmērs.
Noklikšķiniet uz Lejupielādēt attēlu, lai to saglabātu ar pareizo faila paplašinājumu.

Tips tiek pārbaudīts pēc faila „maģiskajiem baitiem“ – paraksta, kas atrodas katra attēla formāta sākumā (piemēram, 89 50 4E 47 PNG vai FF D8 FF JPEG). Ja data URI apgalvo, ka ir image/jpeg, bet satur PNG, rīks jums to paziņo un izmanto patieso tipu. Viss, kas nav atpazīts attēls, tiek noraidīts, un ierobežojums ir 20 MB attēla datu.

Kā darbojas Base64

Base64 katrus 3 faila baitus pārvērš 4 drukājamās rakstzīmēs no A–Z, a–z, 0–9, + un /, bet beigās kā aizpildījumu izmanto =. Tāpēc kodētais teksts ir aptuveni par 33 % lielāks nekā fails: 30 KB liela ikona kļūst par aptuveni 40 KB teksta. Data URI pievieno īsu galveni data:<type>;base64,, lai pārlūkprogramma zinātu, kā to nolasīt.

Kad attēlus ievietot kā data URI

Data URI ir ērti:

maziem ikonu, logotipu un fona attēliem CSS, lai ietaupītu pieprasījumu;
HTML e-pastiem un viena faila HTML dokumentiem, kam jādarbojas bez ārējiem failiem;
JSON API un konfigurācijas failiem, kas var pārnēsāt tikai tekstu.

Lielām fotogrāfijām tie nav piemēroti. Teksts ir par trešdaļu lielāks nekā fails, to nevar kešot atsevišķi no lapas vai stilu lapas, kas to satur, un tas aizkavē attēlošanu. Virs aptuveni 10 līdz 100 KB parasti labāks ir parasts attēla fails ar labu kešošanu, tāpēc rīks attēliem virs 100 KB parāda atgādinājumu.

Viss darbojas jūsu pārlūkprogrammā: attēli un ielīmētais teksts netiek augšupielādēti.

Biežāk uzdotie jautājumi

Vai Base64 ir veids, kā saspiest vai aizsargāt attēlu?

Nē. Base64 padara datus aptuveni par 33 % lielākus, un ikviens tos var atkodēt. Tas tikai pārvērš bināros datus tekstā, ko var pārsūtīt vietās, kur binārie dati nederētu.

Kāpēc mans data URI netiek attēlots?

Visbiežākie iemesli ir trūkstošs vai nepareizs tips galvenē, virknes vidū ielīmētas atstarpes vai pēdiņas, vai saīsināts teksts. Ielīmējiet to sadaļā Base64 → attēls: rīks ziņo par nederīgām rakstzīmēm un pārbauda patieso tipu.

Vai SVG var izmantot kā data URI?

Jā. SVG var kodēt Base64 kā jebkuru attēlu. SVG gadījumā ar URL kodēts data URI (data:image/svg+xml,%3Csvg…) bieži ir īsāks; šis rīks atkodē abas formas.

Vai tas darbojas ar HEIC vai AVIF attēliem?

Kodēšana darbojas ar jebkuru attēla failu. Priekšskatījums parādās tikai tad, ja jūsu pārlūkprogramma spēj attēlot formātu, taču Base64 teksts un lejupielāde vienmēr ir pareizi.

Vai ir izmēra ierobežojums?

Jā, 20 MB attēla datu abos virzienos. Lielākas virknes padara pārlūkprogrammas lēnas, un tīmekļa lapā tās reti ir laba ideja.