Dekoodaa ja esikatsele base64-koodattuja kuvajonoja välittömästi. Tukee JPEG-, PNG-, GIF- ja muita yleisiä muotoja virheenkäsittelyllä virheellisten syötteiden osalta.
Vedä ja pudota kuva tähän tai napsauta valitaksesi
Tukee JPG, PNG, GIF, SVG
Base64 Kuvan Muunnin on monipuolinen online-työkalu, joka mahdollistaa kuvien helpon muuntamisen Base64-tekstimuotoon ja Base64-merkkijonojen purkamisen takaisin näkyviksi kuviksi. Base64-koodaus on binääridataa tekstimuotoon muuntava menetelmä, joka esittää binääridataa ASCII-merkkijonona, mikä tekee mahdolliseksi upottaa kuvadataa suoraan HTML:ään, CSS:ään, JavaScriptiin, JSON:iin ja muihin tekstipohjaisiin muotoihin, joihin binääridataa ei voida suoraan sisällyttää.
Tämä ilmainen työkalu tarjoaa kaksi päätoimintoa:
Olitpa sitten verkkokehittäjä, joka upottaa kuvia koodiin, työskentelet dat URI:en kanssa tai käsittelet kuvadataa API:issa, Base64 Kuvan Muunnin tarjoaa yksinkertaisen ja tehokkaan ratkaisun puhtaalla käyttöliittymällä ja hyödyllisillä ominaisuuksilla, kuten kopiointi- ja latausvaihtoehdoilla muunnetulle tulokselle.
Base64-koodaus muuntaa binääridatan 64 ASCII-merkin (A-Z, a-z, 0-9, + ja /) joukoksi, jossa = käytetään täydennykseen. Verkkokuville Base64-data on tyypillisesti muotoiltu dat URL:nä seuraavassa rakenteessa:
1data:[<media type>][;base64],<data>
2Esimerkiksi Base64-koodattu PNG-kuva saattaa näyttää tältä:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Tämän muodon komponentit ovat:
data: - URL-skeemaimage/png - Datan MIME-tyyppi;base64 - Koodausmenetelmä, - Erotin otsikon ja datan välilläKun kuva muunnetaan Base64:ksi, seuraavat vaiheet tapahtuvat:
Kun Base64-kuvamerkkijono puretaan, seuraavat vaiheet tapahtuvat:
Jos syöte ei sisällä dat URL -otsikkoprefiksiä, purkaja yrittää käsitellä sitä raakana Base64-datana ja päätellä kuvatyypin puretusta binääripäästä tai oletuksena PNG:ksi.
Base64 Kuvan Muunnin tukee kaikkia yleisiä verkkokuvamuotoja:
| Muoto | MIME-tyyppi | Tyypilliset Käyttötapaukset | Koko Tehokkuus |
|---|---|---|---|
| JPEG | image/jpeg | Valokuvat, monimutkaiset kuvat, joissa on paljon värejä | Hyvä pakkaus valokuville |
| PNG | image/png | Kuvia, jotka vaativat läpinäkyvyyttä, kuvakaappauksia, grafiikkaa | Parempi grafiikoille, joissa on rajallisesti värejä |
| GIF | image/gif | Yksinkertaiset animaatiot, rajalliset väri-ikkunat | Hyvä animaatioille, rajalliset värit |
| WebP | image/webp | Moderni muoto, jolla on parempi pakkaus kuin JPEG/PNG | Erinomainen pakkaus, kasvava tuki |
| SVG | image/svg+xml | Vektorigrafiikka, skaalautuvat ikonit ja kuvitukset | Erittäin pieni vektorigrafiikoille |
| BMP | image/bmp | Purkamaton kuvamuoto | Huono (suuret tiedostokoot) |
| ICO | image/x-icon | Favicon-tiedostot | Vaihteleva |
Base64-kuvan muuntamisella on lukuisia sovelluksia verkkokehityksessä ja sen ulkopuolella:
1 <!-- Base64-kuvan upottaminen suoraan HTML:ään -->
2 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64-koodattu kuva">
3 Sähköpostimallit: Varmistaa, että kuvat näkyvät oikein sähköpostiasiakkaissa, jotka estävät ulkoiset kuvat oletuksena.
Yhden tiedoston sovellukset: Luo itse sisältäviä HTML-sovelluksia, joissa kaikki resurssit on upotettu yhteen tiedostoon.
API-vastaukset: Sisällyttää kuvadataa suoraan JSON-vastauksiin ilman erillisten kuvapisteiden tarvetta.
Data URI:t CSS:ssä: Upottaa pieniä ikoneita ja taustakuvia suoraan CSS-tiedostoihin.
1 .icon {
2 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
3 }
4 Canvas-manipulaatiot: Helpottaa canvas-kuvadataa tallentamista ja siirtämistä.
Offline-sovellukset: Tallentaa kuvia tekstimerkkijonoina localStorageen tai IndexedDB:hen.
Upotettujen kuvien noutaminen: Eristä ja tallenna kuvia HTML:stä, CSS:stä tai JS:stä.
API-integraatio: Käsittele Base64-muodossa saatuja kuvadataa API:ista.
Vianetsintä: Visualisoi Base64-kuvadata varmistaaksesi sen sisällön ja muodon.
Datan erottaminen: Palauta kuvia tietokannoista tai tekstifileistä, joissa ne on tallennettu Base64-muodossa.
Leikepöydän datan muuntaminen: Käsittele Base64-kuvadataa, joka on kopioitu eri lähteistä.
Vaikka Base64-koodaus tarjoaa mukavuutta, siihen liittyy tärkeitä kauppasopimuksia, jotka on otettava huomioon:
Optimaalisen suorituskyvyn vuoksi Base64-koodaus suositellaan yleensä vain pienille kuville (alle 10 kt). Suuremmat kuvat on yleensä parempi palvella erillisinä tiedostoina, joita voidaan asianmukaisesti välimuistittaa ja optimoida.
| Kuvan Koko (Alkuperäinen) | Koodattu Koko (Noin) | Suositus |
|---|---|---|
| Alle 5 kt | Alle 7 kt | Hyvä ehdokas Base64-koodaukseen |
| 5 kt - 10 kt | 7 kt - 14 kt | Harkitse Base64:ää kriittisille kuville |
| 10 kt - 50 kt | 14 kt - 67 kt | Käytä Base64:ää valikoivasti, arvioi suorituskykyvaikutus |
| Yli 50 kt | Yli 67 kt | Vältä Base64:ää, käytä ulkoisia tiedostoja sen sijaan |
Useita vaihtoehtoja Base64-koodaukselle on olemassa eri käyttötapauksille:
SVG-inline-upotus: Vektorigrafiikassa inline SVG tarjoaa usein paremman suorituskyvyn ja joustavuuden kuin Base64-koodattu SVG.
WebP ja modernit kuvamuodot: Nämä tarjoavat paremman pakkauskyvyn kuin Base64-koodatut JPEG/PNG.
Kuvapaketit: Yhdistää useita pieniä kuvia yhteen tiedostoon ja käyttää CSS-asettelua.
CDN:t (Content Delivery Networks): Tuotantosivustoille optimoitujen kuvien tarjoaminen CDN:stä on usein tehokkaampaa.
Datan pakkaus: Suurten binääridatan siirtämiseen erikoistuneet pakkausalgoritmit, kuten gzip tai Brotli, ovat tehokkaampia kuin Base64.
HTTP/2 ja HTTP/3: Nämä protokollat vähentävät useiden pyyntöjen ylikuormitusta, jolloin ulkoisten kuvaviittausten tehokkuus paranee.
Tässä on esimerkkejä Base64-koodattujen kuvien käsittelystä eri ohjelmointikielillä:
1// Muunna kuva Base64:ksi
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // Hanki dat URL:nä (Base64-merkkijonona)
11 return canvas.toDataURL('image/png');
12}
13
14// Muunna tiedostosyöte Base64:ksi
15function fileToBase64(fileInput, callback) {
16 const reader = new FileReader();
17 reader.onload = function(e) {
18 callback(e.target.result);
19 };
20 reader.readAsDataURL(fileInput.files[0]);
21}
22
23// Näytä Base64-kuva
24function displayBase64Image(base64String) {
25 const img = new Image();
26
27 // Käsittele merkkijonoja ilman dat URL -otsikkoprefiksiä
28 if (!base64String.startsWith('data:')) {
29 base64String = `data:image/png;base64,${base64String}`;
30 }
31
32 img.src = base64String;
33 document.body.appendChild(img);
34}
35
36// Lataa Base64-kuva
37function downloadBase64Image(base64String, fileName = 'image.png') {
38 const link = document.createElement('a');
39 link.href = base64String;
40 link.download = fileName;
41 link.click();
42}
431import base64
2from PIL import Image
3from io import BytesIO
4
5# Muunna kuvafaili Base64:ksi
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# Muunna Base64 kuva ja tallenna
12def base64_to_image(base64_string, output_path):
13 # Poista dat URL -otsikkoprefiksi, jos se on olemassa
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# Esimerkin käyttö
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Tulosta merkkijonon alku
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Muunna kuvafaili Base64:ksi PHP:ssä
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// Muunna Base64 kuva ja tallenna
10function base64ToImage($base64String, $outputPath) {
11 // Eristä Base64-koodattu binääridata
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Puretaan ja tallennetaan
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Esimerkin käyttö
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Tulosta merkkijonon alku
23
24base64ToImage($base64Image, 'output.jpg');
25?>
261import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // Muunna kuvafaili Base64:ksi
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // Muunna Base64 kuva ja tallenna
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Poista dat URL -otsikkoprefiksi, jos se on olemassa
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // Tulosta merkkijonon alku
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Muunna kuvafaili Base64:ksi
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // Muunna Base64 kuva ja tallenna
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Poista dat URL -otsikkoprefiksi, jos se on olemassa
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Tulosta merkkijonon alku
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38Base64 Kuvan Muunnin -työkalu toimii kaikissa moderneissa selaimissa, seuraavilla yhteensopivuusnäkökohtilla:
| Selaimen Nimi | Base64 Tuki | Data URL Tuki | Tiedosto API Tuki |
|---|---|---|---|
| Chrome | Täysi | Täysi | Täysi |
| Firefox | Täysi | Täysi | Täysi |
| Safari | Täysi | Täysi | Täysi |
| Edge | Täysi | Täysi | Täysi |
| Opera | Täysi | Täysi | Täysi |
| IE 11 | Osittainen | Rajoitettu (maksimi URL-pituus) | Osittainen |
Työkalu on täysin responsiivinen ja toimii mobiiliselaimissa, seuraavilla huomioilla:
Suuri tiedostokoko: Jos Base64-tuloksesi on liian suuri, harkitse:
Muoto-yhteensopivuus: Jotkin kuvamuodot eivät ehkä ole tuettuja kaikissa selaimissa Base64:ksi koodattaessa. Pysy JPEG:ssä, PNG:ssä ja SVG:ssä maksimaalisen yhteensopivuuden vuoksi.
Suorituskykyvaikutus: Jos sivun suorituskyky heikkenee Base64-kuvien upotuksen jälkeen, harkitse:
Virheellinen Base64-data: Jos saat virheitä purkamisessa:
Kuva ei näy: Jos purettu kuva ei näy:
Q: Mikä on Base64-koodaus ja miksi sitä käytetään kuvissa?
A: Base64-koodaus on menetelmä, joka muuntaa binääridatan ASCII-tekstimuotoon. Sitä käytetään kuvissa upottamaan ne suoraan HTML:ään, CSS:ään tai JavaScriptiin ilman erillisiä HTTP-pyyntöjä, mikä voi parantaa suorituskykyä pienille kuville.
Q: Onko kuvien muuntamiselle rajoituksia?
A: Vaikka työkalumme voi käsitellä suurinta osaa kohtuullisista kuvakokoluokista, suosittelemme pitämään kuvat alle 5 Mt optimaalisen suorituskyvyn vuoksi. Base64-koodaus lisää tiedostokokoa noin 33 %, joten 5 Mt:n kuva tuottaa noin 6,7 Mt Base64-tekstiä.
Q: Pakkautuuko Base64-koodaus kuviani?
A: Ei, Base64-koodaus itse asiassa lisää tiedostokokoa noin 33 %. Se on muunnosmenetelmä, ei pakkausalgoritmi. Pakkaamiseksi sinun tulisi optimoida kuvasi ennen niiden koodaamista.
Q: Mitkä kuvamuodot voin muuntaa Base64:ksi?
A: Työkalumme tukee kaikkia yleisiä verkkokuvamuotoja, mukaan lukien JPEG, PNG, GIF, WebP, SVG, BMP ja ICO-tiedostoja.
Q: Kuinka voin käyttää Base64-tulosta koodissani?
A: Voit käyttää Base64-tulosta suoraan HTML <img> -tageissa, CSS background-image -ominaisuuksissa tai datana JavaScriptissä. HTML:ssä käytä muotoa: <img src="data:image/jpeg;base64,YOUR_BASE64_STRING">.
Q: Onko parempi käyttää Base64:ää vai tavallisia kuvafailoja?
A: Pienille kuville (alle 10 kt) Base64 voi vähentää HTTP-pyyntöjä ja parantaa suorituskykyä. Suuremmille kuville tavalliset kuvafailot ovat yleensä parempia, koska niitä voidaan välimuistittaa selaimilla ja ne eivät lisää HTML/CSS-tiedoston kokoa.
Q: Voinko purkaa minkä tahansa Base64-merkkijonon kuvaksi?
A: Vain Base64-merkkijonot, jotka esittävät todellista kuvadataa, voidaan purkaa näkyviksi kuviksi. Työkalu yrittää havaita kuvamuodon, mutta parhaan tuloksen saamiseksi käytä merkkijonoja, jotka sisältävät dat URL -otsikkoprefiksin (esim. data:image/png;base64,).
Q: Mitä tapahtuu, jos yritän purkaa virheellistä Base64-dataa?
A: Työkalu näyttää virheilmoituksen, jos Base64-merkkijono on virheellinen tai ei esitä kuvadataa.
Q: Voinko muokata kuvaa purkamisen jälkeen?
A: Työkalumme keskittyy muuntamiseen eikä sisällä muokkausominaisuuksia. Kun olet ladannut puretun kuvan, voit muokata sitä millä tahansa kuvankäsittelyohjelmalla.
Base64 Kuvan Muunnin -työkalu käsittelee kaikki tiedot suoraan selaimessasi. Tämä tarkoittaa:
Optimoi ennen koodausta: Pakkaa ja pienennä kuvasi ennen Base64:ksi muuntamista, jotta koodatun koon minimointi onnistuu.
Käytä sopivia muotoja: Valitse oikea kuvamuoto sisällön perusteella:
Harkitse välimuistiin liittyviä vaikutuksia: Muista, että Base64-koodatut kuvat eivät voi välimuistittaa erikseen selaimilla, toisin kuin ulkoiset kuvafailot.
Testaa suorituskykyvaikutuksia: Mittaa sivun latausaikoja ennen ja jälkeen Base64-kuvien käyttöönoton varmistaaksesi, että todella parannat suorituskykyä.
Käytä dat URL -otsikkoprefiksejä: Sisällytä aina sopiva dat URL -otsikkoprefiksi (esim. data:image/png;base64,) maksimaalisen yhteensopivuuden vuoksi.
Yhdistä muiden tekniikoiden kanssa: Harkitse Base64:n käyttöä yhdessä muiden optimointitekniikoiden, kuten laiska lataus ja responsiiviset kuvat, kanssa.
Base64-koodaus juontaa juurensa sähköpostijärjestelmien kehittämiseen 1970-luvulla. Se suunniteltiin ratkaisemaan binääridatan siirtämiseen liittyvät ongelmat järjestelmissä, jotka oli suunniteltu käsittelemään vain ASCII-tekstiä.
Koodausmenetelmä virallistettiin vuonna 1987, kun julkaistiin RFC 989, joka määritteli Privacy Enhanced Mail (PEM) -standardin. Tätä päivitettiin myöhemmin RFC 1421:ssä ja muissa siihen liittyvissä standardeissa. Termi "base64" itsessään tulee siitä, että koodaus käyttää 64 eri ASCII-merkkiä binääridatan esittämiseen.
Verkkokehityksen kontekstissa Base64-koodattujen kuvien käyttö sai suosiota dat URI:iden myötä, jotka ehdotettiin ensimmäisen kerran RFC 2397:ssä vuonna 1998. Tämä mahdollisti binääridatan sisällyttämisen suoraan HTML:ään, CSS:ään ja muihin verkkodokumentteihin.
Base64-koodauksen käyttö verkkokehityksessä yleistyi 2000-luvun puolivälissä, kun kehittäjät etsivät tapoja vähentää HTTP-pyyntöjä ja parantaa sivun latausaikoja. Tekniikkaa omaksuttiin erityisesti mobiiliverkkokehityksen myötä, jossa pyyntöjen minimointi oli ratkaisevaa suorituskyvyssä hitaammilla mobiiliyhteyksillä.
Nykyään Base64-koodaus on edelleen tärkeä työkalu verkkokehityksessä, vaikka sen käyttö on tullut kohdennetummaksi parhaiden käytäntöjen kehittyessä. Nykyaikaiset lähestymistavat käyttävät Base64-koodausta valikoivasti pienille, kriittisille kuville samalla kun hyödynnetään tehokkaampia toimitusmenetelmiä, kuten HTTP/2 suuremmille resursseille.
Kokeile Base64 Kuvan Muunninta nyt muuntaaksesi kuvat nopeasti Base64:ksi tai purkaaksesi Base64-merkkijonot takaisin näkyviksi kuviksi. Helppokäyttöisellä käyttöliittymällä voit kopioida tulokset tai ladata ne yhdellä napsautuksella!
Löydä lisää työkaluja, jotka saattavat olla hyödyllisiä työnkulullesi