Kaip paversti paveikslėlį Base64 data URI skirtu CSS?

Nutempkite arba įklijuokite paveikslėlį (Ctrl+V), atidarykite CSS skirtuką ir spustelėkite Kopijuoti. Gausite background-image: url(...) taisyklę su įterptu data URI. HTML, Markdown, Neapdoroto Base64 ir JSON skirtukai veikia taip pat.

Kodėl Base64 rezultatas maždaug trečdaliu didesnis nei mano paveikslėlis?

Base64 kiekvienus 3 baitus paverčia 4 teksto simboliais, todėl tekstas maždaug 33 % didesnis už failą. Todėl data URI tinka mažoms piktogramoms ir logotipams, o ne dideles nuotraukoms.

Kaip galiu sutrumpinti Base64 eilutę?

Pirmiausia atidarykite Sumažinti ir nustatykite Maksimalų plotį arba Formatą (WebP, JPEG ar PNG), o WebP ar JPEG atveju sumažinkite Kokybę. SVG ir GIF failų taip sumažinti negalima; SVG vietoj to turi SVG (URL-encoded) skirtuką.

Ar galiu Base64 eilutę paversti atgal į paveikslėlį?

Taip. Perjunkite Kryptį į Base64 į paveikslėlį ir įklijuokite data URI arba gryną Base64. Atpažįstami PNG, JPEG, GIF, WebP, SVG, BMP, ICO ir AVIF formatai, tada siūloma atsisiųsti. Neteisinga įvestis rodo klaidą.

Kodėl nepavyksta Kopijuoti arba peržiūra atrodo nukirpta, kai paveikslėlis didelis?

Peržiūroje rodomi tik pirmieji 2000 simbolių, tačiau Kopijuoti ir Atsisiųsti pateikia visą reikšmę. Labai ilgos eilutės gali viršyti naršyklės iškarpinės ribą, todėl naudokite Atsisiųsti arba pirmiausia sumažinkite paveikslėlį.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar mano failai keliami į serverį?

Ne. Failai atidaromi ir apdorojami jūsų naršyklėje ir nesiunčiami į LibraTool. Kai kurie įrankiai pirmiausia atsisiunčia į naršyklę apdorojimo variklį ar DI modelį; šiame atsisiuntime nėra jūsų duomenų.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia. Labai dideli failai telefone gali veikti lėtai arba pritrūkti atminties, todėl jiems naudokite kompiuterį.

🖼️

Vaizdas į Base64 nemokamai

Konvertuokite vaizdą į Base64 duomenų URI naudojimui CSS, HTML ar Markdown. Kopijuokite paruoštus kodo fragmentus. Užkoduota jūsų naršyklėje; niekada neįkeliama.

Failo dydis priklauso nuo jūsų įrenginioFailai lieka privatūsPrisijungimo nereikiaNemokamai amžinai

Veikia neprisijungus, kai įkeliama

Nuvilkite failą čia arba spustelėkite, kad pasirinktumėte

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · apdorojama jūsų įrenginyje

arba paspauskite Ctrl+V, kad įklijuotumėte iš iškarpinės

Naršyti failus

Patarimas: taip pat galite įklijuoti paveikslėlį iš iškarpinės (Ctrl+V).

Jūsų failai niekada nepalieka jūsų įrenginio. Visas apdorojimas vyksta vietiškai jūsų naršyklėje.

Konvertuokite paveikslėlį į Base64 duomenų URI, kurį galite įklijuoti tiesiai į CSS, HTML ar Markdown — nereikia atskiro failo. Koduojama naršyklėje; niekada neįkeliama.

Dažniausi naudojimo būdai

Įterpti vaizdą į CSSĮterpti mažą ikoną arba foną kaip duomenų URI į savo stilų lapą.
Įterpti vaizdą į HTMLĮterpti logotipą arba ikoną tiesiogiai į savarankišką HTML.
Konvertuoti SVG arba ikoną į Base64Konvertuoti mažą ikoną į duomenų URI įterpti.
Įterpti vaizdą į MarkdownĮterpti mažą vaizdą į Markdown failą su duomenų URI.
Gauti vaizdo duomenų URISukurti žalinį duomenų: URI, kurį galite naudoti bet kur.

Kaip tai veikia

Duomenų URI įterpia vaizdą tiesiai į jūsų kodą kaip tekstą, todėl jis įkeliamas be atskiros failo užklausos — patogu mažoms piktogramoms ir savarankiškam HTML. Šis įrankis jį užkoduoja jūsų naršyklėje.

1
Įmetate vaizdą
Jis skaitomas lokaliai naudojant FileReader API — niekada nėra įkeliamas.
2
Jis koduojamas Base64
Vaizdo baitai tiesiai jūsų naršyklėje tampa data: URI (data:image/...;base64,…).
3
Jūs pasirenkate fragmentą
Kopijuokite neapdorotą duomenų URI arba paruoštus CSS (background-image), HTML (<img>) arba Markdown.
4
Įklijuokite jį į savo kodą
Vaizdas dabar keliauja kartu su jūsų CSS/HTML — nereikia papildomo failo talpinti.

Vaizdas koduojamas visiškai jūsų įrenginyje. Atkreipkite dėmesį, kad Base64 yra apie 33% didesnis nei originalas, todėl duomenų URI geriausiai tinka mažiems vaizdams.

Susiję įrankiai

🖼️

Vaizdų steganografija (teksto slėpimas vaizde)

Paslėpkite slaptą tekstinę žinutę PNG vaizde naudodami mažiausiai reikšmingo bito steganografiją su pasirenkamu AES-256-GCM slaptažodžio šifravimu. Vėliau ištraukite ją tuo pačiu įrankiu. Viskas veikia jūsų naršyklėje.

IšbandykiteFailai lieka vietiškai

🔢

Base64 koduotuvas ir dekoduotuvas

Koduokite tekstą arba failus į Base64 arba dekoduokite Base64 eilutes atgal į paprastą tekstą. Momentaliai, privačiai ir nemokamai.

Išbandykite

🔗

URL koduotuvas ir dekoduotuvas

Koduokite ir dekoduokite URL adresus ir užklausų eilutes. Palaiko encodeURIComponent, decodeURIComponent ir užklausų eilučių analizę.