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.
Buraya bir görüntü sürükleyip bırakın veya seçmek için tıklayın
JPG, PNG, GIF, SVG formatlarını destekler
Base64 Görüntü Dönüştürücü, görüntüleri kolayca Base64 metin formatına dönüştürmenizi ve Base64 dizelerini tekrar görüntülenebilir görüntülere çözmenizi sağlayan çok yönlü bir çevrimiçi araçtır. Base64 kodlama, ikili veriyi ASCII dize formatında temsil eden bir ikili-texte kodlama şemasını ifade eder ve bu da görüntü verilerini HTML, CSS, JavaScript, JSON ve ikili verilerin doğrudan dahil edilemeyeceği diğer metin tabanlı formatlara doğrudan gömmenizi mümkün kılar.
Bu ücretsiz araç, iki temel işlev sunar:
İster kodunuzda görüntüleri gömülü hale getiren bir web geliştiricisi olun, ister veri URI'leri ile çalışıyor olun, ister API'lerde görüntü verilerini işliyor olun, Base64 Görüntü Dönüştürücümüz, dönüştürülmüş çıktınız için kopyalama ve indirme seçenekleri gibi temiz bir arayüz ve yardımcı özellikler ile basit ve verimli bir çözüm sunar.
Base64 kodlama, ikili veriyi 64 ASCII karakter setine (A-Z, a-z, 0-9, + ve /) dönüştürür ve = padding için kullanılır. Web üzerindeki görüntüler için, base64 verisi genellikle aşağıdaki yapıda bir veri URL'si olarak biçimlendirilir:
1data:[<media type>][;base64],<data>
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 şunlardır:
data:
- URL şemasıimage/png
- Verinin MIME türü;base64
- Kodlama yöntemi,
- Başlık ile veri arasındaki ayırıcıBir görüntüyü Base64'e dönüştürürken, aşağıdaki adımlar gerçekleşir:
Bir base64 görüntü dizesini çözerken, aşağıdaki adımlar gerçekleşir:
Girdi bir veri URL'si ön eki içermiyorsa, çözücü bunu ham base64 verisi olarak işlemeye çalışır ve görüntü türünü çözülmüş ikili başlıktan çıkarır veya varsayılan olarak PNG'ye döner.
Base64 Görüntü Dönüştürücümüz, tüm yaygın web görüntü formatlarını destekler:
Format | MIME Türü | Tipik Kullanım Durumları | Boyut Verimliliği |
---|---|---|---|
JPEG | image/jpeg | Fotoğraflar, birçok renk içeren karmaşık görüntüler | Fotoğraflar için iyi sıkıştırma |
PNG | image/png | Şeffaflık gerektiren görüntüler, ekran görüntüleri, grafikler | Sınırlı renklerle grafikler için daha iyi |
GIF | image/gif | Basit animasyonlar, sınırlı renkli görüntüler | Animasyonlar için iyi, sınırlı renk |
WebP | image/webp | JPEG/PNG'den daha iyi sıkıştırma sunan modern format | Mükemmel sıkıştırma, artan destek |
SVG | image/svg+xml | Vektör grafikler, ölçeklenebilir simgeler ve illüstrasyonlar | Vektör grafikler için çok küçük |
BMP | image/bmp | Sıkıştırılmamış görüntü formatı | Kötü (büyük dosya boyutları) |
ICO | image/x-icon | Favicon dosyaları | Değişir |
Base64 görüntü dönüşümünün web geliştirme ve ötesinde birçok uygulaması vardır:
1 <!-- HTML'de doğrudan gömülü bir base64 görüntüsü -->
2 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 kodlu görüntü">
3
E-posta şablonları: Varsayılan olarak dış görüntüleri engelleyen e-posta istemcilerinde görüntülerin düzgün görünmesini 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ında ayrı görüntü uç noktaları gerektirmeden içerir.
CSS'de veri URI'leri: Küçük simgeleri ve arka plan görüntülerini doğrudan CSS dosyalarına gömer.
1 .icon {
2 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
3 }
4
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.
Gömülü görüntüleri almak: HTML, CSS veya JS dosyalarından görüntüleri çıkarın ve kaydedin.
API entegrasyonu: API'lerden alınan Base64 formatındaki görüntü verilerini işleyin.
Hata ayıklama: Base64 görüntü verilerini görselleştirerek içeriğini ve formatını doğrulayın.
Veri çıkarma: Görüntüleri veritabanlarından veya metin dosyalarından geri alın.
Pano verilerini dönüştürme: Çeşitli kaynaklardan kopyalanan Base64 görüntü verilerini işleyin.
Base64 kodlama, kolaylık sunarken dikkate alınması gereken önemli ticaretler ile birlikte gelir:
Optimal performans için, Base64 kodlamasının genellikle yalnızca küçük görüntüler (10KB altında) için önerildiği kabul edilir. Daha büyük görüntüler genellikle ayrı dosyalar olarak daha iyi hizmet alır ve uygun şekilde önbelleğe alınabilir.
Görüntü Boyutu (Orijinal) | Kodlanmış Boyut (Yaklaşık) | Öneri |
---|---|---|
5KB altında | 7KB altında | Base64 kodlama için iyi bir aday |
5KB - 10KB | 7KB - 14KB | Kritik görüntüler için Base64'ü düşünün |
10KB - 50KB | 14KB - 67KB | Base64'ü seçici olarak kullanın, performans etkisini değerlendirin |
50KB üzerinde | 67KB üzerinde | Base64'ten kaçının, bunun yerine dış dosyalar kullanın |
Farklı kullanım durumları için Base64 kodlamasına birkaç alternatif vardır:
SVG içe aktarma: Vektör grafikler için, inline SVG genellikle Base64 kodlu SVG'den daha iyi performans ve esneklik sağlar.
WebP ve modern görüntü formatları: Bunlar, Base64 kodlu 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ştirip CSS konumlandırması kullanarak.
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, Base64'ten daha verimli olan gzip veya Brotli gibi özel sıkıştırma algoritmaları kullanılır.
HTTP/2 ve HTTP/3: Bu protokoller, birden fazla isteğin aşırı yükünü azaltarak, dış görüntü referanslarını daha verimli hale getirir.
İşte çeşitli programlama dillerinde Base64 kodlu görüntülerle çalışmaya dair örnekler:
1// Bir görüntüyü Base64'e dönüştür
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ın (Base64 dizesi)
11 return canvas.toDataURL('image/png');
12}
13
14// Bir dosya girişini Base64'e dönüştür
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// Bir Base64 görüntüsünü görüntüle
24function displayBase64Image(base64String) {
25 const img = new Image();
26
27 // Veri URL'si ön eki içermeyen dizeleri işleme
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// Bir Base64 görüntüsünü indir
37function downloadBase64Image(base64String, fileName = 'image.png') {
38 const link = document.createElement('a');
39 link.href = base64String;
40 link.download = fileName;
41 link.click();
42}
43
1import base64
2from PIL import Image
3from io import BytesIO
4
5# Bir görüntü dosyasını Base64'e dönüştür
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'ü görüntüye dönüştür ve kaydet
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// Bir görüntü dosyasını Base64'e dönüştür
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'ü görüntüye dönüştür ve kaydet
10function base64ToImage($base64String, $outputPath) {
11 // Veri URL'si ön ekini kaldır
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ür
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'ü görüntüye dönüştür ve kaydet
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ür
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'ü görüntüye dönüştür ve kaydet
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
Base64 Görüntü Dönüştürücü aracı, tüm modern tarayıcılarda çalışır ve aşağıdaki uyumluluk dikkate alınmalıdır:
Tarayıcı | Base64 Desteği | Veri URL'si Desteği | Dosya API Desteği |
---|---|---|---|
Chrome | Tam | Tam | Tam |
Firefox | Tam | Tam | Tam |
Safari | Tam | Tam | Tam |
Edge | Tam | Tam | Tam |
Opera | Tam | Tam | Tam |
IE 11 | Kısmi | Sınırlı (maks URL uzunluğu) | Kısmi |
Araç tamamen duyarlıdır ve mobil tarayıcılarda çalışır, aşağıdaki dikkate alınması gerekenler vardır:
Büyük dosya boyutu: Eğer Base64 çıktınız çok büyükse, şunları düşünün:
Format uyumluluğu: Bazı görüntü formatları, Base64 olarak kodlandığında tüm tarayıcılarda desteklenmeyebilir. JPEG, PNG ve SVG kullanarak maksimum uyumluluğu sağlayın.
Performans etkisi: Eğer sayfa performansı Base64 görüntüleri ekledikten sonra düşerse, şunları düşünün:
Geçersiz Base64 verisi: Eğer çözümleme sırasında hatalar alıyorsanız:
Görüntü görünmüyor: Eğer çözülen görüntü görünmüyorsa:
S: Base64 kodlama nedir ve görüntüler için neden kullanılır?
C: Base64 kodlama, ikili veriyi ASCII metin formatına dönüştürme yöntemidir. Küçük görüntüleri doğrudan HTML, CSS veya JavaScript'e gömmek için kullanılır, bu da HTTP isteklerini azaltarak sayfa yükleme performansını artırabilir.
S: Dönüştürebileceğim görüntüler için bir boyut sınırı var mı?
C: Araç çoğu makul görüntü boyutunu işleyebilse de, 5MB altında görüntüleri tutmak optimal performans için önerilir. Base64 kodlama dosya boyutunu yaklaşık %33 artırır, bu nedenle 5MB'lık bir görüntü yaklaşık 6.7MB'lık bir Base64 metnine dönüşecektir.
S: Base64 kodlama görüntülerimi sıkıştırır mı?
C: Hayır, Base64 kodlama aslında dosya boyutunu yaklaşık %33 artırır. Bu bir dönüştürme yöntemidir, sıkıştırma algoritması değildir. Sıkıştırma için, kodlamadan önce görüntülerinizi optimize etmelisiniz.
S: Hangi görüntü formatlarını Base64'e dönüştürebilirim?
C: Araç, JPEG, PNG, GIF, WebP, SVG, BMP ve ICO dosyaları dahil olmak üzere tüm yaygın web görüntü formatlarını destekler.
S: Base64 çıktısını kodumda nasıl kullanabilirim?
C: Base64 çıktısını doğrudan HTML <img>
etiketlerinde, CSS background-image
özelliklerinde veya JavaScript'te veri olarak kullanabilirsiniz. HTML için format: <img src="data:image/jpeg;base64,YOUR_BASE64_STRING">
.
S: Base64 kullanmak mı yoksa normal görüntü dosyaları kullanmak mı daha iyidir?
C: Küçük görüntüler (10KB altında) için Base64, HTTP isteklerini azaltabilir ve performansı artırabilir. Daha büyük görüntüler için, normal görüntü dosyaları genellikle daha iyidir, çünkü tarayıcılar tarafından önbelleğe alınabilir ve HTML/CSS dosya boyutunu artırmaz.
S: Herhangi bir Base64 dizesini görüntüye dönüştürebilir miyim?
C: Yalnızca gerçek görüntü verilerini temsil eden Base64 dizeleri görüntülere dönüştürülebilir. Araç, görüntü formatını tespit etmeye çalışacaktır, ancak en iyi sonuçlar için veri URL'si ön eki (örneğin, data:image/png;base64,
) içeren dizeleri kullanın.
S: Geçersiz Base64 verisini çözmeye çalışırsam ne olur?
C: Araç, Base64 dizesi geçersiz veya görüntü verisi temsil etmiyorsa bir hata mesajı görüntüler.
S: Çözülen görüntüyü düzenleyebilir miyim?
C: Araç, dönüştürme üzerine odaklanır ve düzenleme özellikleri içermez. Çözülen görüntüyü indirdikten sonra, herhangi bir görüntü düzenleme yazılımıyla düzenleyebilirsiniz.
Base64 Görüntü Dönüştürücü aracımız, tüm verileri doğrudan tarayıcınızda işler. Bu, şunları ifade eder:
Kodlamadan önce optimize edin: Görüntülerinizi Base64'e dönüştürmeden önce sıkıştırın ve yeniden boyutlandırın, böylece kodlanmış boyutu en aza indirin.
Uygun formatları kullanın: İçeriğe bağlı olarak doğru görüntü formatını seçin:
Önbellek etkilerini düşünün: Unutmayın ki Base64 kodlu görüntüler, dış görüntü dosyaları gibi ayrı olarak önbelleğe alınamaz.
Performans etkisini test edin: Base64 görüntülerini uyguladıktan sonra sayfa yükleme sürelerini ölçün ve gerçekten performansı artırıp artırmadığınızı kontrol edin.
Veri URL'si ön eklerini kullanın: Maksimum uyumluluk için her zaman uygun veri URL'si ön ekini (örneğin, data:image/png;base64,
) ekleyin.
Diğer tekniklerle birleştirin: Base64'ü tembel yükleme ve duyarlı görüntüler gibi diğer optimizasyon teknikleri ile birlikte kullanmayı düşünün.
Base64 kodlama, 1970'lerde elektronik posta sistemlerinin geliştirilmesine dayanır. İkili verilerin yalnızca ASCII metin formatını işleyen sistemler üzerinden iletilmesi sorununu çözmek için tasarlandı.
Kodlama şeması, 1987'de RFC 989'un yayınlanmasıyla resmi hale geldi; bu, Gizlilik Geliştirilmiş Posta (PEM) standardını tanımlıyordu. Bu daha sonra RFC 1421 ve diğer ilgili standartlarda güncellendi. "Base64" terimi, kodlamanın ikili veriyi temsil etmek için 64 farklı ASCII karakteri kullandığı gerçeğinden gelmektedir.
Web geliştirme bağlamında, Base64 kodlaması için görüntü kullanımı, HTTP isteklerini azaltmak ve sayfa yükleme sürelerini iyileştirmek için geliştiricilerin arayışlarıyla 2000'lerin ortalarında popülerlik kazandı. Bu teknik, yavaş mobil bağlantılarda performansın kritik olduğu mobil web geliştirme döneminde özellikle benimsendi.
Bugün, Base64 kodlama hala web geliştirmede önemli bir araçtır, ancak kullanımı daha hedeflenmiş hale gelmiştir. Modern yaklaşımlar, Base64 kodlamasını genellikle yalnızca küçük, kritik görüntüler için kullanırken, daha büyük varlıklar için daha verimli teslimat yöntemleri kullanmaktadır.
Base64 Görüntü Dönüştürücümüzü şimdi deneyin ve görüntülerinizi hızlı bir şekilde Base64'e kodlayın veya Base64 dizelerini tekrar görüntülenebilir görüntülere çözün. Kullanımı kolay arayüzümüz ile sonuçları yalnızca bir tıklama ile kopyalayabilir veya indirebilirsiniz!
İş akışınız için faydalı olabilecek daha fazla aracı keşfedin