Utilia
Kategorier ▾
Språk: nb ▾

Bilde til Base64-konverterer

Konverter et bilde til Base64 eller data-URI med ferdig CSS og HTML, eller dekode Base64 tilbake til et bilde med forhåndsvisning. Gratis, uten opplasting.

Bilde → Base64

Base64 → bilde

Slik konverterer du et bilde til Base64

  1. Under Bilde → Base64 slipper du et bilde i dropsonen, eller klikker på den for å velge ett (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF …).
  2. Velg Utdata: Data-URI (data:image/png;base64,…), Bare Base64, CSS background-image eller HTML -tagg, som også har med bredden og høyden til bildet.
  3. Klikk på Kopier, eller Last ned som .txt for lange resultater.

Linjen under dropsonen viser det faktiske formatet (lest fra bytene i filen, ikke fra navnet), dimensjonene, filstørrelsen og lengden på data-URI-en.

Slik konverterer du Base64 tilbake til et bilde

  1. Under Base64 → bilde limer du inn teksten i Base64-tekst eller data-URI. Du kan lime inn en ren Base64-streng, en fullstendig data-URI eller til og med en hel CSS-regel eller <img>-tagg: data-URI-en blir funnet inni den. Linjeskift og mellomrom ignoreres, og URL-sikker Base64 (med - og _) fungerer også.
  2. Klikk på Dekode bilde. Forhåndsvisning, type, dimensjoner og størrelse vises.
  3. Klikk på Last ned bilde for å lagre det med riktig filendelse.

Typen kontrolleres med filens «magiske bytes», signaturen som står først i alle bildeformater (for eksempel 89 50 4E 47 for PNG eller FF D8 FF for JPEG). Hvis en data-URI hevder å være image/jpeg, men inneholder en PNG, sier verktøyet fra og bruker den faktiske typen. Alt som ikke er et gjenkjent bilde, avvises, og grensen er 20 MB bildedata.

Slik fungerer Base64

Base64 gjør hver gruppe på 3 byte i en fil om til 4 skrivbare tegn fra A–Z, a–z, 0–9, + og /, med = som utfylling til slutt. Derfor er den kodede teksten omtrent 33 % større enn filen: et ikon på 30 KB blir omtrent 40 KB tekst. En data-URI legger til en kort header, data:<type>;base64,, slik at nettleseren vet hvordan den skal leses.

Når bør du bygge inn bilder som data-URI-er?

Data-URI-er er nyttige for:

  • små ikoner, logoer og bakgrunner i CSS, for å spare en forespørsel;
  • HTML-e-poster og HTML-dokumenter i én enkelt fil som må fungere uten eksterne filer;
  • JSON-API-er og konfigurasjonsfiler som bare kan bære tekst.

De passer dårlig for store foto. Teksten er en tredjedel større enn filen, den kan ikke bufres separat fra siden eller stilarket som inneholder den, og den forsinker visningen. Over omtrent 10 til 100 KB vinner som regel en vanlig bildefil med god bufring, og derfor viser verktøyet en påminnelse for bilder over 100 KB.

Alt kjører i nettleseren din: bilder og innlimt tekst lastes aldri opp.

Ofte stilte spørsmål

Er Base64 en måte å komprimere eller beskytte et bilde på?

Nei. Base64 gjør dataene omtrent 33 % større, og hvem som helst kan dekode dem. Det gjør bare binære data om til tekst som kan sendes dit binære data ikke kommer fram.

Hvorfor vises ikke data-URI-en min?

De vanligste årsakene er en manglende eller feil type i headeren, mellomrom eller anførselstegn som er limt inn midt i strengen, eller avkortet tekst. Lim den inn under Base64 → bilde: verktøyet melder fra om ugyldige tegn og kontrollerer den faktiske typen.

Kan jeg bruke en SVG som data-URI?

Ja. SVG kan Base64-kodes som alle andre bilder. For SVG er en URL-kodet data-URI (data:image/svg+xml,%3Csvg…) ofte kortere. Dette verktøyet dekoder begge formene.

Fungerer det med HEIC- eller AVIF-bilder?

Koding fungerer med alle bildefiler. Forhåndsvisningen vises bare hvis nettleseren din kan vise formatet, men Base64-teksten og nedlastingen er alltid riktige.

Finnes det en størrelsesgrense?

Ja, 20 MB bildedata, begge veier. Større strenger gjør nettlesere trege og er sjelden en god idé på en nettside.

Relaterte verktøy