Okamžitě dekódujte a zobrazte řetězce obrázků kódované v base64. Podporuje formáty JPEG, PNG, GIF a další běžné formáty s chybovým zpracováním pro neplatné vstupy.
Přetáhněte obrázek sem nebo klikněte pro výběr
Podporuje JPG, PNG, GIF, SVG
Převodník obrázků na Base64 je všestranný online nástroj, který vám umožňuje snadno převádět obrázky do formátu Base64 a dekódovat Base64 řetězce zpět na zobrazené obrázky. Kódování Base64 je schéma kódování binárních dat do textového formátu, které reprezentuje binární data v ASCII řetězci, což umožňuje vložit data obrázků přímo do HTML, CSS, JavaScriptu, JSON a dalších textových formátů, kde nelze přímo zahrnout binární data.
Tento bezplatný nástroj nabízí dvě hlavní funkce:
Ať už jste webový vývojář, který vkládá obrázky do svého kódu, pracujete s datovými URI, nebo se zabýváte daty obrázků v API, náš převodník obrázků na Base64 poskytuje jednoduché a efektivní řešení s čistým rozhraním a užitečnými funkcemi, jako jsou možnosti kopírování a stahování pro váš převedený výstup.
Kódování Base64 převádí binární data do sady 64 ASCII znaků (A-Z, a-z, 0-9, + a /), přičemž = se používá pro vyplnění. Pro obrázky na webu jsou data base64 obvykle formátována jako datové URL s následující strukturou:
1data:[<media type>][;base64],<data>
2Například base64-kódovaný obrázek PNG by mohl vypadat takto:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Složky této formátu jsou:
data: - URL schémaimage/png - MIME typ dat;base64 - Kódovací metoda, - Oddělovač mezi hlavičkou a datyPři převodu obrázku na Base64 dochází k následujícím krokům:
Při dekódování base64 obrázkového řetězce dochází k následujícím krokům:
Pokud vstup neobsahuje předponu datového URL, dekodér se pokusí považovat jej za surová base64 data a odvodí typ obrázku z dekódované binární hlavičky nebo defaultně použije PNG.
Náš převodník obrázků na Base64 podporuje všechny běžné webové formáty obrázků:
| Formát | MIME typ | Typické případy použití | Efektivita velikosti |
|---|---|---|---|
| JPEG | image/jpeg | Fotografie, složité obrázky s mnoha barvami | Dobré kompresní vlastnosti pro fotografie |
| PNG | image/png | Obrázky vyžadující průhlednost, snímky obrazovky, grafika | Lepší pro grafiku s omezeným počtem barev |
| GIF | image/gif | Jednoduché animace, obrázky s omezenými barvami | Dobré pro animace, omezené barvy |
| WebP | image/webp | Moderní formát s lepší kompresí než JPEG/PNG | Vynikající komprese, rostoucí podpora |
| SVG | image/svg+xml | Vektorová grafika, škálovatelné ikony a ilustrace | Velmi malé pro vektorovou grafiku |
| BMP | image/bmp | Nezkomprimovaný formát obrázku | Špatné (velké velikosti souborů) |
| ICO | image/x-icon | Favicon soubory | Různé |
Převod obrázků na Base64 má nespočet aplikací ve webovém vývoji a mimo něj:
1 <!-- Vložení base64 obrázku přímo do HTML -->
2 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kódovaný obrázek">
3 Šablony e-mailů: Zajišťuje, že se obrázky zobrazují správně v e-mailových klientech, které ve výchozím nastavení blokují externí obrázky.
Jednofilové aplikace: Vytváří samostatné HTML aplikace, kde jsou všechny zdroje vloženy do jednoho souboru.
Odpovědi API: Zahrnuje data obrázků přímo v JSON odpovědích bez nutnosti samostatných koncových bodů obrázků.
Data URI v CSS: Vkládá malé ikony a pozadí přímo do CSS souborů.
1 .icon {
2 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
3 }
4 Manipulace s plátnem: Usnadňuje ukládání a přenos dat obrázků z plátna.
Offline aplikace: Ukládá obrázky jako textové řetězce v localStorage nebo IndexedDB.
Získání vložených obrázků: Extrakce a uložení obrázků z HTML, CSS nebo JS souborů.
Integrace API: Zpracování dat obrázků přijatých ve formátu Base64 z API.
Ladění: Zobrazování dat obrázků Base64 pro ověření jejich obsahu a formátu.
Extrahování dat: Obnova obrázků z databází nebo textových souborů, kde jsou uloženy jako Base64.
Konverze dat ze schránky: Zpracování dat obrázků Base64 zkopírovaných z různých zdrojů.
I když kódování Base64 nabízí pohodlí, přichází s důležitými kompromisy, které je třeba zvážit:
Pro optimální výkon se obecně doporučuje kódování Base64 pouze pro malé obrázky (pod 10 KB). Větší obrázky jsou obvykle lépe slouženy jako samostatné soubory, které mohou být správně mezipamětovány a optimalizovány.
| Velikost obrázku (původní) | Velikost kódovaného (přibližně) | Doporučení |
|---|---|---|
| Pod 5 KB | Pod 7 KB | Dobrá volba pro kódování Base64 |
| 5 KB - 10 KB | 7 KB - 14 KB | Zvažte Base64 pro kritické obrázky |
| 10 KB - 50 KB | 14 KB - 67 KB | Používejte Base64 selektivně, zhodnoťte dopad na výkon |
| Nad 50 KB | Nad 67 KB | Vyhněte se Base64, používejte externí soubory místo toho |
Existuje několik alternativ k kódování Base64 pro různé případy použití:
Vkládání SVG inline: Pro vektorovou grafiku často poskytuje inline SVG lepší výkon a flexibilitu než Base64-kódované SVG.
WebP a moderní formáty obrázků: Tyto poskytují lepší kompresi než Base64-kódované JPEG/PNG.
Obrázkové sprity: Kombinování více malých obrázků do jednoho souboru a použití CSS pozicování.
CDN (Content Delivery Networks): Pro produkční stránky je často efektivnější poskytovat optimalizované obrázky z CDN.
Kompresní data: Pro přenos velkého množství binárních dat jsou specializované kompresní algoritmy, jako je gzip nebo Brotli, efektivnější než Base64.
HTTP/2 a HTTP/3: Tyto protokoly snižují režii při více požadavcích, což dělá odkazy na externí obrázky efektivnějšími.
Zde jsou příklady práce s Base64-kódovanými obrázky v různých programovacích jazycích:
1// Převod obrázku na Base64
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 // Získat jako datovou URL (Base64 řetězec)
11 return canvas.toDataURL('image/png');
12}
13
14// Převod souboru na Base64
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// Zobrazit Base64 obrázek
24function displayBase64Image(base64String) {
25 const img = new Image();
26
27 // Zpracování řetězců bez předpony datového URL
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// Stáhnout Base64 obrázek
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# Převod obrázkového souboru na Base64
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# Převod Base64 na obrázek a uložení
12def base64_to_image(base64_string, output_path):
13 # Odstranit předponu datového URL, pokud je přítomna
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# Příklad použití
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Vytisknout začátek řetězce
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Převod obrázkového souboru na Base64 v PHP
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// Převod Base64 na obrázek a uložení
10function base64ToImage($base64String, $outputPath) {
11 // Extrakce Base64 zakódovaných binárních dat
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekódování a uložení
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Příklad použití
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Vytisknout začátek řetězce
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 // Převod obrázkového souboru na Base64
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 // Převod Base64 na obrázek a uložení
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Odstranit předponu datového URL, pokud je přítomna
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) + "..."); // Vytisknout začátek řetězce
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Převod obrázkového souboru na Base64
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 // Převod Base64 na obrázek a uložení
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Odstranit předponu datového URL, pokud je přítomna
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) + "..."); // Vytisknout začátek řetězce
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38Nástroj pro převod obrázků na Base64 funguje ve všech moderních prohlížečích s následujícími úvahami o kompatibilitě:
| Prohlížeč | Podpora Base64 | Podpora datových URL | Podpora API souborů |
|---|---|---|---|
| Chrome | Úplná | Úplná | Úplná |
| Firefox | Úplná | Úplná | Úplná |
| Safari | Úplná | Úplná | Úplná |
| Edge | Úplná | Úplná | Úplná |
| Opera | Úplná | Úplná | Úplná |
| IE 11 | Částečná | Omezená (max. délka URL) | Částečná |
Nástroj je plně responzivní a funguje na mobilních prohlížečích s těmito úvahami:
Velká velikost souboru: Pokud je váš Base64 výstup příliš velký, zvažte:
Kompatibilita formátu: Některé formáty obrázků nemusí být podporovány ve všech prohlížečích, když jsou kódovány jako Base64. Držte se JPEG, PNG a SVG pro maximální kompatibilitu.
Dopad na výkon: Pokud se po vložení Base64 obrázků výkon stránky zhorší, zvažte:
Neplatná data Base64: Pokud obdržíte chyby při dekódování:
Obrázek se nezobrazuje: Pokud se dekódovaný obrázek nezobrazí:
Q: Co je kódování Base64 a proč se používá pro obrázky?
A: Kódování Base64 je metoda převodu binárních dat do textového formátu ASCII. Používá se pro obrázky, aby se vložily přímo do HTML, CSS nebo JavaScriptu bez nutnosti samostatných HTTP požadavků, což může zlepšit výkon načítání stránky pro malé obrázky.
Q: Existuje limit velikosti pro obrázky, které mohu převést?
A: I když náš nástroj může zpracovat většinu rozumných velikostí obrázků, doporučujeme udržovat obrázky pod 5 MB pro optimální výkon. Kódování Base64 zvyšuje velikost souboru přibližně o 33 %, takže obrázek o velikosti 5 MB bude mít přibližně 6,7 MB Base64 textu.
Q: Zajišťuje kódování Base64 kompresi mých obrázků?
A: Ne, kódování Base64 ve skutečnosti zvyšuje velikost souboru přibližně o 33 %. Je to metoda převodu, nikoli kompresní algoritmus. Pro kompresi byste měli optimalizovat své obrázky před jejich kódováním.
Q: Jaké formáty obrázků mohu převést na Base64?
A: Náš nástroj podporuje všechny běžné webové formáty obrázků, včetně JPEG, PNG, GIF, WebP, SVG, BMP a ICO souborů.
Q: Jak mohu použít Base64 výstup ve svém kódu?
A: Můžete použít Base64 výstup přímo v HTML <img> značkách, CSS background-image vlastnostech nebo jako data v JavaScriptu. Pro HTML použijte formát: <img src="data:image/jpeg;base64,YOUR_BASE64_STRING">.
Q: Je lepší používat Base64 nebo běžné obrázkové soubory?
A: Pro malé obrázky (pod 10 KB) může Base64 snížit HTTP požadavky a zlepšit výkon. Pro větší obrázky jsou běžné obrázkové soubory obvykle lepší, protože mohou být mezipamětovány prohlížeči a nezvyšují velikost vašich HTML/CSS souborů.
Q: Mohu dekódovat jakýkoli Base64 řetězec na obrázek?
A: Pouze Base64 řetězce, které představují skutečná obrázková data, mohou být dekódovány na zobrazené obrázky. Nástroj se pokusí zjistit formát obrázku, ale pro nejlepší výsledky používejte řetězce, které obsahují předponu datového URL (např. data:image/png;base64,).
Q: Co se stane, pokud se pokusím dekódovat neplatná Base64 data?
A: Nástroj zobrazí chybovou zprávu, pokud je Base64 řetězec neplatný nebo nepředstavuje obrázková data.
Q: Mohu po dekódování obrázek upravit?
A: Náš nástroj se zaměřuje na převod a neobsahuje funkce pro úpravy. Po stažení dekódovaného obrázku jej můžete upravit pomocí jakéhokoli softwaru pro úpravu obrázků.
Náš nástroj pro převod obrázků na Base64 zpracovává všechna data přímo ve vašem prohlížeči. To znamená:
Optimalizujte před kódováním: Komprimujte a zmenšujte své obrázky před převodem na Base64, abyste minimalizovali kódovanou velikost.
Používejte vhodné formáty: Vyberte správný formát obrázku na základě obsahu:
Zvažte dopady na mezipaměť: Pamatujte, že Base64 kódované obrázky nemohou být mezipamětovány odděleně prohlížeči, na rozdíl od externích obrázkových souborů.
Testujte dopad na výkon: Změřte časy načítání stránky před a po implementaci Base64 obrázků, abyste zajistili, že skutečně zlepšujete výkon.
Používejte předpony datových URL: Vždy zahrňte odpovídající předponu datového URL (např. data:image/png;base64,) pro maximální kompatibilitu.
Kombinujte s jinými technikami: Zvažte použití Base64 spolu s dalšími optimalizačními technikami, jako je lazy loading a responzivní obrázky.
Kódování Base64 má své kořeny ve vývoji elektronických poštovních systémů v 70. letech. Bylo navrženo k vyřešení problému přenosu binárních dat prostřednictvím systémů, které byly navrženy pouze pro zpracování textu ASCII.
Kódovací schéma bylo formalizováno v roce 1987 publikací RFC 989, která definovala standard Privacy Enhanced Mail (PEM). Ten byl později aktualizován v RFC 1421 a dalších souvisejících standardech. Termín "base64" sám o sobě pochází z toho, že kódování používá 64 různých ASCII znaků k reprezentaci binárních dat.
V kontextu webového vývoje získalo kódování Base64 pro obrázky popularitu s nástupem datových URI, které byly poprvé navrženy v RFC 2397 v roce 1998. To umožnilo zahrnout binární data přímo do HTML, CSS a dalších webových dokumentů.
Použití Base64 kódovaných obrázků ve webovém vývoji se stalo rozšířeným v polovině 2000. let, když se vývojáři snažili snížit HTTP požadavky a zlepšit dobu načítání stránek. Technika byla zvlášť přijata během vzestupu mobilního webového vývoje, kde bylo minimalizování požadavků klíčové pro výkon na pomalejších mobilních připojeních.
Dnes zůstává kódování Base64 důležitým nástrojem ve webovém vývoji, i když jeho použití se stalo cílenějším, jak se vyvinuly osvědčené postupy. Moderní přístupy obvykle používají kódování Base64 selektivně pro malé, kritické obrázky, zatímco se spoléhají na efektivnější metody doručení, jako je HTTP/2 pro větší aktiva.
Vyzkoušejte náš převodník obrázků na Base64 nyní, abyste rychle kódovali své obrázky na Base64 nebo dekódovali Base64 řetězce zpět na zobrazené obrázky. S naším snadno použitelným rozhraním můžete výsledky jednoduše zkopírovat nebo stáhnout jedním kliknutím!
Objevte další nástroje, které by mohly být užitečné pro vaši pracovní postup.