UltKit

Billede til Base64-konverter

Gør en billedfil til en tekstlinje, som du kan indsætte i HTML, CSS, en JSON-forespørgsel eller en Markdown-fil. Data-URI-præfikset står allerede foran, så teksten virker, så snart du indsætter den.

Datakonverter

eller slip CSV, TSV, TXT …-filer her ·

Maks. 95 MB pr. fil· Op til 20 filer· Slettes efter 30 minutter

Output

Filer behandles på vores servere og slettes efter 30 minutter.

Sådan bruger du værktøjet

  1. 1

    Tilføj billederne

    Træk PNG-, JPG-, GIF-, WebP- eller SVG-filer ind i uploadfeltet, op til 20 ad gangen og højst 95 MB pr. fil.

  2. 2

    Behold eller fjern præfikset

    Data-URI-præfiks er slået til, så resultatet starter med data:image/png;base64, eller den tilsvarende type. Slå det fra under Avancerede indstillinger, hvis et API vil have den rene Base64-streng.

  3. 3

    Konvertér og kopiér

    Tryk på Konvertér til Base64 text og download en .txt-fil for hvert billede, klar til at blive indsat i din kode.

Upload billedet og tryk på Konvertér til Base64 text. Du får filen kodet som almindelige tegn, der starter med data:image/…;base64, så den kan sættes direkte ind i et img src eller en CSS url(). Billedet ændres ikke på nogen måde.

Hvor et billede som Base64 er nyttigt

Base64 er defineret i RFC 4648 (2006) og afbilder hver 3 bytes binære data på 4 tegn fra et alfabet på 64 tegn: A–Z, a–z, 0–9, + og /. Resultatet klarer enhver kanal, der er bygget til tekst. Data-URI-skemaet, som Larry Masinter nedskrev som RFC 2397 i 1998, lader så en browser behandle teksten som en fil.

Frontend-udviklere indlejrer små ikoner, indlæsningsanimationer og pladsholderbilleder, så en side vises uden ekstra forespørgsler. Backend-udviklere sender billeder inde i JSON, fordi mange API'er, blandt andet billedanalyse- og OCR-tjenester, tager imod et billede som et Base64-felt. Testere gemmer fixtures i kildekoden, og folk, der laver HTML-rapporter i én fil eller Markdown-noter, indlejrer skærmbilleder, så filen forbliver selvstændig, når den sendes på mail eller arkiveres.

Sådan ser Base64-resultatet ud

En gennemsigtig PNG på 1 × 1 (68 bytes) som data-URI i et img-tag
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Eksempelbillede på 1 × 1 pixel">

PNG-ikonfil

24 KB

typisk ikonsæt til værktøjslinjer, 96 × 96 px

+33 % størrelse, ingen ændring i kvalitet

Base64-tekst

32 KB

4 tegn pr. 3 bytes plus præfikset

ANY I

Alle billeder

Værktøjet accepterer almindelige billedformater, herunder JPG, PNG, WebP, HEIC, GIF, BMP og TIFF. Formatet registreres automatisk ud fra filen, så du ikke behøver at vide, hvilken type billede du har.

Any image-konverter

BASE64

Base64-kodet tekst

Base64 er en kodning, defineret i RFC 4648, der omdanner vilkårlige binære data til en streng af 64 sikre tekstegn. Den bruges til at indlejre billeder i HTML og CSS som data-URI'er, til at vedhæfte filer til e-mail og til at sende binære data i JSON eller XML. Kodningen kan fuldt ud føres tilbage, men gør data cirka 33 % større. Base64 er ikke kryptering og giver ingen sikkerhed; alle kan afkode det.

Komprimering
Uden tab
Gennemsigtighed
–
Animation
–
Introduceret
–
BASE64-konverter

Billeder bliver til Base64-tekst, når de skal rejse inde i noget, der kun kan bære tekst: en HTML- eller CSS-fil uden separat forespørgsel, et JSON-felt i et API-kald, en testfixture eller en rapport i én fil.

Hvornår et indlejret billede hjælper en side, og hvornår det skader

Indlejring sparer en forespørgsel, hvilket betød mest under HTTP/1.1, hvor browsere kun åbnede en håndfuld forbindelser pr. websted. Med multiplexing i HTTP/2 og HTTP/3 er ekstra små forespørgsler billige, så fordelen skrumper, mens ulemperne består: det kodede billede kan ikke caches separat, det hentes igen, hver gang HTML eller CSS ændres, og det forsinker behandlingen af den fil, det ligger i.

En fornuftig tommelfingerregel er kun at indlejre billeder på nogle få kilobytes, som optræder på alle sider, for eksempel et logo eller et ikonsprite, og levere alt andet som filer. Fotos hører næsten aldrig hjemme indlejret. Hvis du i virkeligheden har brug for en anden filtype frem for tekst, klarer billedkonverteren det.

Fordele ved Base64-billeder

  • Én selvstændig HTML-, CSS- eller JSON-fil
  • Ingen ekstra forespørgsel for små ikoner
  • Sikkert i JSON, XML og andre tekstformater
  • Tabsfrit og kan føres tilbage

Ulemper ved Base64-billeder

  • Cirka 33 % større end den binære fil
  • Caches ikke separat af browseren
  • Blokeres som billeder af mange e-mailklienter
  • Svært at gennemgå i kodeforskelle

Spørgsmål om billede til Base64

Hvad er forskellen på Base64 og en data-URI?

Base64 er kun de kodede tegn. En data-URI pakker dem ind i et skema og en type, data:image/png;base64, efterfulgt af tegnene, så en browser ved, hvordan de skal afkodes og vises. HTML og CSS kræver den fulde data-URI, mens de fleste JSON-API'er vil have selve Base64-delen.

Hvor meget større bliver et billede som Base64?

Base64 skriver 4 tegn for hver 3 bytes, så teksten bliver cirka en tredjedel større end filen plus det korte præfiks. En PNG på 30 KB bliver til cirka 40 KB tekst. Hvis HTML eller CSS leveres gzip-komprimeret, hentes noget af den ekstra størrelse ind igen under overførslen.

Kan jeg bruge et Base64-billede i en e-mailsignatur?

Det er upålideligt. Gmail viser ikke data-URI-billeder, og flere e-mailprogrammer på computeren fjerner dem også, så modtagerne ser et ødelagt ikon. Læg billedet på en webserver eller vedhæft det, og brug Base64 til websider og apps.

Bør et SVG-ikon kodes som Base64?

Det virker, men SVG er allerede tekst. Hvis du URL-koder koden i stedet for at Base64-kode den, får du som regel en kortere data-URI, som samtidig er læsbar. Til alt større end et lille ikon er en separat SVG-fil, som browseren kan cache, det bedste valg.

Kan jeg konvertere Base64-teksten tilbage til et billede?

Ja, kodningen er tabsfri og kan fuldt ud føres tilbage: afkodning giver nøjagtig de oprindelige bytes. Alle programmeringssprog har en afkoder, og hvis du indsætter en komplet data-URI i browserens adressefelt, vises billedet.

Ændrer kodningen billedkvaliteten?

Nej. Base64 ændrer, hvordan bytes skrives, ikke pixlerne. For at gøre strengen kortere skal du først gøre billedet mindre, for eksempel med komprimer billede til 20 KB, og derefter kode den mindre fil.