Base64 Görüntü Çözücü ve Görüntüleyici | Base64'ü Görüntülere Dönüştür

Base64 ile kodlanmış görüntü dizelerini anında çözün ve önizleyin. JPEG, PNG, GIF ve diğer yaygın formatları destekler, geçersiz girişler için hata ayıklama sağlar.

Base64 Görüntü Kodlayıcı ve Görüntüleyici

Base64 kodlu bir görüntü dizesini yapıştırın ve görüntüyü görüntülemek için çözün.

Görüntü Önizlemesi

Görüntü göstermek için hiçbir görüntü yok. Otomatik olarak çözülmesi için bir base64 dizesi yapıştırın.

JPEG, PNG, GIF ve diğer yaygın görüntü formatlarını destekler.

Talimatlar

1. Yukarıdaki metin alanına base64 kodlu bir görüntü dizesi yapıştırın.

2. Görüntü, yazarken otomatik olarak çözülecek veya 'Görüntüyü Çöz' butonuna tıklayın.

3. Çözülmüş görüntü aşağıdaki önizleme alanında görünecektir.

Not: En iyi sonuçlar için dize 'data:image/' ile başlamalıdır, ancak araç bu öneki olmayan dizeleri de çözmeye çalışacaktır.

📚

Dokümantasyon

Base64 Görüntü Çözümleyici ve Görüntüleyici

Giriş

Base64, ikili veriyi ASCII dize formatında temsil eden bir ikili metin kodlama şemasidir. Genellikle, ikili verilerin doğrudan dahil edilemeyeceği HTML, CSS, JavaScript, JSON ve diğer metin tabanlı formatlarda görüntü verilerini gömmek için kullanılır. Bu araç, base64 ile kodlanmış görüntü dizelerini çözümlemenizi ve sonuçta oluşan görüntüleri doğrudan tarayıcınızda görmenizi sağlar.

Base64 kodlaması, orijinal ikili veriye kıyasla veri boyutunu yaklaşık %33 artırır, ancak görüntülerin ayrı dosya indirmeleri gerektirmeden doğrudan metin tabanlı belgelerde dahil edilmesini sağlar. Bu, gömme kolaylığının boyut artışını aştığı küçük görüntüler (ikonlar, logolar veya basit grafikler gibi) için özellikle yararlıdır.

Base64 Görüntü Çözümleyici aracımız, base64 ile kodlanmış bir görüntü dizesini yapıştırabileceğiniz ve anında çözümlenmiş görüntüyü görebileceğiniz basit bir arayüz sunar. JPEG, PNG, GIF, WebP ve SVG dahil olmak üzere tüm yaygın görüntü formatlarını destekler ve hem veri URL formatını (data:image/... ön eki ile) hem de ham base64 dizelerini işleyebilir.

Teknik Detaylar

Base64 Kodlama Formatı

Base64 kodlaması, ikili veriyi 64 ASCII karakterine (A-Z, a-z, 0-9, + ve /) dönüştürür ve = padding için kullanılır. Web'deki görüntüler için base64 verisi genellikle aşağıdaki yapıda bir veri URL'si olarak biçimlendirilir:

1data:[<medya türü>][;base64],<veri>
2

Örneğin, base64 ile kodlanmış bir PNG görüntüsü şöyle görünebilir:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

Bu formatın bileşenleri:

data: - URL şeması
image/png - Verinin MIME türü
;base64 - Kodlama yöntemi
, - Başlık ile veri arasında bir ayırıcı
Gerçek base64 ile kodlanmış veri

Çözümleme Süreci

Base64 görüntü dizesi çözümlenirken aşağıdaki adımlar gerçekleşir:

Dizenin veri URL'si ön eki içerip içermediği belirlenir.
Eğer bir ön ek varsa, görüntü formatını belirlemek için MIME türü çıkarılır.
Base64 veri kısmı izole edilir ve ikili veriye dönüştürülür.
İkili veri, görüntü olarak görüntülenebilecek bir Blob veya nesne URL'sine dönüştürülür.

Giriş, veri URL'si ön eki içermiyorsa, çözümleyici bunu ham base64 verisi olarak işlemeye çalışır ve görüntü türünü çözümlenen ikili başlıktan çıkarır veya varsayılan olarak PNG olarak ayarlar.

Desteklenen Görüntü Formatları

Bu araç, tüm yaygın web görüntü formatlarını destekler:

Format	MIME Türü	Tipik Kullanım Alanları
JPEG	image/jpeg	Fotoğraflar, birçok renge sahip karmaşık görüntüler
PNG	image/png	Şeffaflık gerektiren görüntüler, ekran görüntüleri, grafikler
GIF	image/gif	Basit animasyonlar, sınırlı renkli görüntüler
WebP	image/webp	JPEG/PNG'den daha iyi sıkıştırma sağlayan modern format
SVG	image/svg+xml	Vektör grafikler, ölçeklenebilir simgeler ve illüstrasyonlar

Kullanım Durumları

Base64 ile kodlanmış görüntülerin web geliştirme ve diğer alanlarda birçok pratik uygulaması vardır:

HTML/CSS/JS'de görüntüleri gömme: Küçük görüntüleri kodunuza doğrudan dahil ederek HTTP isteklerini azaltır, bu da sayfa yükleme sürelerini iyileştirebilir.
E-posta şablonları: Varsayılan olarak harici görüntüleri engelleyen e-posta istemcilerinde görüntülerin düzgün bir şekilde görüntülenmesini sağlar.
Tek dosya uygulamaları: Tüm kaynakların tek bir dosya içinde gömülü olduğu kendine yeterli HTML uygulamaları oluşturur.
API yanıtları: Görüntü verilerini doğrudan JSON yanıtlarına dahil eder, ayrı görüntü uç noktaları gerektirmeden.
CSS'de veri URI'leri: Küçük simgeleri ve arka plan görüntülerini doğrudan CSS dosyalarına gömer.
Kanvas manipülasyonları: Kanvas görüntü verilerini kaydetmeyi ve aktarmayı kolaylaştırır.
Çevrimdışı uygulamalar: Görüntüleri localStorage veya IndexedDB'de metin dizeleri olarak saklar.

Performans Dikkatleri

Base64 kodlaması kolaylık sağlasa da, bazı dezavantajları vardır:

Artan dosya boyutu: Base64 kodlaması veri boyutunu yaklaşık %33 artırır.
Tarayıcı önbelleklemesi yok: Gömülü görüntüler, harici görüntü dosyaları gibi ayrı ayrı önbelleğe alınamaz.
Çözümleme yükü: Tarayıcılar, görüntülemeye başlamadan önce base64 dizisini çözümlemek zorundadır.
Bakım zorlukları: Gömülü görüntüler, referans alınan dosyalardan daha zor güncellenir.

Optimal performans için, base64 kodlaması genellikle yalnızca küçük görüntüler (10KB'den az) için önerilir. Daha büyük görüntüler, ayrı dosyalar olarak daha iyi hizmet alır ve düzgün bir şekilde önbelleğe alınabilir ve optimize edilebilir.

Alternatifler

Farklı kullanım durumları için base64 kodlamasına birkaç alternatif bulunmaktadır:

SVG içe gömme: Vektör grafikler için, inline SVG genellikle base64 ile kodlanmış SVG'den daha iyi performans ve esneklik sağlar.
WebP ve modern görüntü formatları: Bu formatlar, base64 ile kodlanmış JPEG/PNG'den daha iyi sıkıştırma sağlar.
Görüntü sprite'ları: Birden fazla küçük görüntüyü tek bir dosyada birleştirir ve CSS konumlandırması kullanır.
CDN'ler (İçerik Dağıtım Ağları): Üretim siteleri için, optimize edilmiş görüntüleri bir CDN'den sunmak genellikle daha verimlidir.
Veri sıkıştırması: Büyük miktarda ikili veriyi aktarmak için, gzip veya Brotli gibi özel sıkıştırma algoritmaları base64'ten daha verimlidir.

Kod Örnekleri

İşte çeşitli programlama dillerinde base64 ile kodlanmış görüntülerle çalışmanın örnekleri:

1// JavaScript'te bir görüntüyü base64'e dönüştürme (tarayıcı)
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  // Veri URL'si olarak al (base64 dizesi)
11  return canvas.toDataURL('image/png');
12}
13
14// Base64 görüntüyü görüntüleme
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // Veri URL'si ön eki olmayan dizeleri işleme
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

1import base64
2from PIL import Image
3from io import BytesIO
4
5# Bir görüntü dosyasını base64'e dönüştürme
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# Base64'i görüntüye dönüştürme ve kaydetme
12def base64_to_image(base64_string, output_path):
13    # Veri URL'si ön ekini kaldır
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# Örnek kullanım
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Dizenin başlangıcını yazdır
24
25base64_to_image(base64_str, "output.jpg")
26

1<?php
2// PHP'de bir görüntü dosyasını base64'e dönüştürme
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// Base64'i görüntüye dönüştürme ve kaydetme
10function base64ToImage($base64String, $outputPath) {
11    // Base64 kodlanmış ikili veriyi çıkar
12    $imageData = explode(',', $base64String);
13    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14    
15    // Çöz ve kaydet
16    $data = base64_decode($imageData);
17    file_put_contents($outputPath, $data);
18}
19
20// Örnek kullanım
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Dizenin başlangıcını yazdır
23
24base64ToImage($base64Image, 'output.jpg');
25?>
26

1import 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    // Bir görüntü dosyasını base64'e dönüştürme
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    // Base64'i görüntüye dönüştürme ve kaydetme
20    public static void base64ToImage(String base64String, String outputPath) throws IOException {
21        // Veri URL'si ön ekini kaldır
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) + "..."); // Dizenin başlangıcını yazdır
36        
37        base64ToImage(base64Image, "output.jpg");
38    }
39}
40

1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7    // Bir görüntü dosyasını base64'e dönüştürme
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    // Base64'i görüntüye dönüştürme ve kaydetme
18    public static void Base64ToImage(string base64String, string outputPath)
19    {
20        // Veri URL'si ön ekini kaldır
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) + "..."); // Dizenin başlangıcını yazdır
34        
35        Base64ToImage(base64Image, "output.jpg");
36    }
37}
38

1require 'base64'
2
3# Bir görüntü dosyasını base64'e dönüştürme
4def image_to_base64(image_path)
5  extension = File.extname(image_path).delete('.')
6  base64_data = Base64.strict_encode64(File.read(image_path))
7  "data:image/#{extension};base64,#{base64_data}"
8end
9
10# Base64'i görüntüye dönüştürme ve kaydetme
11def base64_to_image(base64_string, output_path)
12  # Veri URL'si ön ekini kaldır
13  if base64_string.include?(',')
14    base64_string = base64_string.split(',')[1]
15  end
16  
17  File.open(output_path, 'wb') do |file|
18    file.write(Base64.decode64(base64_string))
19  end
20end
21
22# Örnek kullanım
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Dizenin başlangıcını yazdır
25
26base64_to_image(base64_image, 'output.jpg')
27

1' Excel VBA fonksiyonu bir dosyayı base64'e kodlamak için
2Function FileToBase64(filePath As String) As String
3    Dim fileNum As Integer
4    Dim fileData() As Byte
5    Dim objXML As Object
6    Dim objNode As Object
7    
8    fileNum = FreeFile
9    Open filePath For Binary Access Read As fileNum
10    ReDim fileData(LOF(fileNum) - 1)
11    Get fileNum, , fileData
12    Close fileNum
13    
14    Set objXML = CreateObject("MSXML2.DOMDocument")
15    Set objNode = objXML.createElement("b64")
16    
17    objNode.DataType = "bin.base64"
18    objNode.nodeTypedValue = fileData
19    
20    FileToBase64 = objNode.Text
21    
22    Set objNode = Nothing
23    Set objXML = Nothing
24End Function
25
26' Excel'de kullanım:
27' =FileToBase64("C:\path\to\image.jpg")
28

HTML Uygulaması

İşte base64 görüntüyü doğrudan HTML'de gömme yolu:

1<!-- Base64 görüntüyü doğrudan HTML'de gömme -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 ile kodlanmış görüntü">
3
4<!-- CSS ile base64 arka plan görüntüsü kullanma -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

Tarihçe

Base64 kodlaması, 1970'lerde elektronik posta sistemlerinin geliştirilmesiyle köklerini bulur. Sadece ASCII metni işlemek üzere tasarlanmış sistemler aracılığıyla ikili verilerin iletilmesi sorununu çözmek için geliştirilmiştir.

Kodlama şeması, 1987 yılında RFC 989'un yayımlanmasıyla resmileşmiştir; bu belge, Gizlilik Geliştirilmiş Posta (PEM) standardını tanımlamıştır. Bu daha sonra RFC 1421 ve diğer ilgili standartlarla güncellenmiştir. "base64" terimi, kodlamanın ikili veriyi temsil etmek için 64 farklı ASCII karakteri kullanmasından gelmektedir.

Web geliştirme bağlamında, base64 kodlaması için görüntüler, 1998'de RFC 2397'de veri URL'lerinin önerilmesiyle popülerlik kazandı. Bu, ikili verilerin doğrudan HTML, CSS ve diğer web belgelerine dahil edilmesini sağladı.

Base64 ile kodlanmış görüntülerin web geliştirmedeki kullanımı, HTTP isteklerini azaltma ve sayfa yükleme sürelerini iyileştirme çabalarıyla 2000'lerin ortalarında daha yaygın hale geldi. Bu teknik, mobil web geliştirme döneminde, daha yavaş mobil bağlantılarda istekleri minimize etmenin kritik olduğu durumlarda özellikle benimsendi.

Bugün, base64 kodlaması web geliştirmede önemli bir araç olmaya devam etmektedir, ancak kullanımı daha hedefli hale gelmiştir, çünkü en iyi uygulamalar evrim geçirmiştir. Modern yaklaşımlar genellikle base64 kodlamasını yalnızca küçük, kritik görüntüler için seçici olarak kullanırken, daha büyük varlıklar için HTTP/2 gibi daha verimli dağıtım yöntemlerini kullanmaktadır.

Referanslar

💬

Geri Bildirim

💬

Bu araç hakkında geri bildirim vermeye başlamak için geri bildirim toast'una tıklayın

🔗

İlgili Araçlar

Çalışma akışınız için faydalı olabilecek daha fazla aracı keşfedin