Base64 Görüntü Çözücü | Görüntüleri Çevrimiçi Çözme ve Önizleme

Base64 görüntü kod çözücü nedir?

Base64 görüntü kod çözücü, base64 ile kodlanmış bir metin dizesini yeniden görüntüye dönüştüren bir araçtır. Base64, görüntü dosyasının baytları gibi ikili verileri yalnızca 64 düz metin karakteri (harfler, rakamlar, dolgu için +, / ve =) kullanarak yazma yöntemidir. Tarayıcılar, e-postalar ve birçok API, görüntüleri ayrı bir dosya yerine düz metin içinde taşınabilmeleri için bu şekilde depolar. Kod çözücü bu işlemi tersine çevirir: dize yapıştırıldığında özgün görüntü görünür.

Veri URL'si biçimi

Web'de base64 görüntüsü genellikle veri URL'si olarak yazılır. Biçim şöyledir:

Örneğin:

Her bölümün bir görevi vardır:

• data: bunun normal bir web adresi değil, veri URL'si olduğunu belirtir.
• image/png, tarayıcıya bunun ne tür bir dosya olduğunu bildiren MIME türüdür.
• ;base64 virgülden sonraki verilerin base64 ile kodlandığını belirtir.
• Virgülden sonraki her şey kodlanmış görüntünün kendisidir.

Kod çözücü nasıl çalışır?

Kod çözme dört adımda gerçekleşir.

1. Araç, dizenin data: ile başlayıp başlamadığını denetler. data:text/plain gibi görüntü dışındaki bir ortam türünü belirten veri URL'si, görüntü olarak gösterilemeyeceği için hemen reddedilir.
2. Uzun base64 dizeleri bazen birden çok satıra bölündüğünden, tüm boşlukları, sekmeleri ve satır sonlarını kaldırır. RFC 2397 tarafından da izin verilen base64 yerine yüzde kodlaması kullanan bir veri yükü, değiştirilmeden aktarılır.
3. Base64 metnini yeniden ham baytlara dönüştürür.
4. Sonucun ilk birkaç baytına bakar. Yaygın tüm görüntü biçimleri, imza veya "sihirli sayı" adı verilen sabit bir bayt dizisiyle başlar. PNG dosyaları 89 50 4E 47, JPEG dosyaları FF D8 FF ile başlar ve diğer biçimler de benzer imzalara sahiptir. Kod çözücü bu imzaları eşleştirir ve görüntüyü tanımladıkları türle etiketler.

Etiket değil, baytlar belirleyicidir. Veri URL'si data:image/png dese ancak baytlar FF D8 FF ile başlasa kod çözücü URL'yi data:image/jpeg olarak yeniden oluşturur; böylece "Görüntü URL'sini kopyala" düğmesinin sunduğu dize kendi içeriğini hiçbir zaman yanlış tanımlamaz.

Dizede data: ön eki yoksa kod çözücü onu ham base64 verisi olarak ele alır, kodunu çözer ve imzayı aynı şekilde okur. Baytlar bilinen hiçbir görüntü imzasıyla eşleşmiyor ve SVG metnine de benzemiyorsa kod çözücü, dizenin görüntü gibi görünmediğini bildirir. Bir biçim tahmin etmez veya varsayılan bir türe dönmez.

SVG, ikili değil metin (XML) biçimi olduğu için farklı işlenir ve sabit bir bayt imzası yoktur. Kod çözücü, kodu çözülmüş metnin ilk 1024 baytında bir <svg etiketi, ardından bir SVG belgesi gelen <?xml version="1.0"?> gibi bir XML bildirimi veya ardından bir SVG belge türü bildirimi olup olmadığını denetler. Bazı düzenleyicilerin UTF-8 dosyalarına eklediği en baştaki bayt sırası işareti yok sayılır. SVG bir bayt imzasından tanımlanamadığından image/svg+xml bildiren bir veri URL'si, bildirdiği türü korur.

Base64 görüntü boyutu formülü

Base64, her 3 baytlık ikili veriyi 4 metin karakterine dönüştürür. Kodlanmış uzunluğun formülü şöyledir:

⌈ ⌉ sembolleri "bir sonraki tam sayıya yuvarla" anlamına gelir; çünkü base64 her zaman 4 karakterlik gruplarla çalışır ve artakalan grubu = işaretleriyle doldurur.

Büyük dosyalarda bu, boyutta yaklaşık %33 artışa karşılık gelir; çünkü 4 ÷ 3 ≈ 1,33. Başlangıçta fazla veri olmadığında bir sonraki 4 karakterlik gruba yuvarlama daha çok önem taşıdığından, küçük dosyalarda yüzde artışı daha büyük olabilir.

Çözümlü örnek

Yukarıdaki PNG örneği 85 baytlık görüntü verisine dönüştürülür. Formül kullanıldığında:

Base64 dizesi gerçekten de 116 karakter uzunluğundadır; bu da hesaplamayla uyuşur. Bu, özgün 85 bayta göre %36 artıştır (116 ÷ 85 ≈ 1,36); dosya çok küçük olduğu için %33 değerinin biraz üzerindedir.

Desteklenen görüntü biçimleri

Kod çözücü, biçimi belirlemek için kodu çözülmüş verilerin bayt imzasını okur. Şu türleri tanır:

Base64 görüntüsü nasıl kodu çözülür?

1. HTML'den, CSS'den, bir API yanıtından veya e-postadan data:image/... ön ekiyle ya da bu ön ek olmadan base64 dizesini kopyalayın.
2. Giriş kutusuna yapıştırın.
3. Görüntünün kodu, yazmayı bıraktıktan kısa süre sonra otomatik olarak çözülür veya kodu çözme düğmesine basılarak çözülür.
4. Kodu çözülmüş görüntü önizleme alanında görünür. Veri URL'si "Görüntü URL'sini kopyala" düğmesiyle kopyalanabilir; görüntünün kendisi de tarayıcıda normal bir görüntü öğesi olarak oluşturulduğundan önizlemede sağ tıklanıp kaydetme seçilerek kaydedilebilir.

Base64 görüntülerinin yaygın kullanım alanları

• HTML, CSS veya JavaScript'e yerleştirme: Görüntü verilerinin doğrudan koda konulması, ayrı bir dosya isteğini ortadan kaldırır.
• E-posta şablonları: Bazı e-posta istemcileri dışarıdan bağlantı verilen görüntüleri varsayılan olarak engeller; ancak gömülü bir base64 görüntüsü yine de görünür.
• Tek dosyalı HTML araçları: Görüntüleri de içeren bütün bir sayfa, kendi içinde eksiksiz tek bir dosya olarak dağıtılabilir.
• API yanıtları: Bir görüntü, kendi uç noktasına ihtiyaç duymak yerine JSON veri yükü içinde taşınabilir.
• CSS arka planları ve simgeleri: Küçük simgeler bazen bir veri URL'si olarak doğrudan stil sayfasına yazılır.

Base64 görüntülerinin ödünleşimleri

Base64 kodlaması kullanışlıdır, ancak bedelsiz değildir:

• Kodlanmış metin, özgün dosyadan yaklaşık üçte bir daha büyüktür.
• Tarayıcılar gömülü görüntüyü bağlantılı bir dosyayı önbelleğe aldıkları gibi önbelleğe alamaz; bu nedenle görüntü, onu çevreleyen sayfa veya stil sayfası her yüklendiğinde yeniden indirilir.
• Tarayıcı, görüntüyü gösterebilmek için önce base64 metninin kodunu çözmelidir; bu da az miktarda ek işlem gerektirir.
• Boyut artışı ve önbelleklemenin kaybolması nedeniyle base64 ile yerleştirme; simgeler ve basit logolar gibi küçük görüntüler için uygundur. Büyük fotoğraflar genellikle normal görüntü dosyaları olarak sunulduğunda daha iyi sonuç verir.

Sık sorulan sorular

Base64 görüntü kod çözücü nedir?

Bu, base64 ile kodlanmış bir metin dizesini PNG, JPEG, GIF, WebP, BMP veya SVG dosyası gibi görüntülenebilir bir görüntüye dönüştüren bir araçtır.

Base64 görüntüsünün kodunu nasıl çözerim?

data:image/... ön ekiyle veya bu ön ek olmadan base64 dizesini kod çözücüye yapıştırın. Kod çözücü dizeyi okuyup kodunu çözer ve ortaya çıkan görüntüyü gösterir.

Base64 dizesinin kodu veri URL'si ön eki olmadan çözülebilir mi?

Evet. Kod çözücü onu ham base64 verisi olarak ele alır, baytların kodunu çözer ve PNG, JPEG, GIF, WebP, BMP veya ICO gibi biçimleri imzalarından belirlemek için ilk birkaç baytı okur. SVG, kodu çözülmüş metinde <svg etiketi aranarak belirlenir. Bunların hiçbiri eşleşmezse kod çözücü bir biçim tahmin etmek yerine dizenin görüntü gibi görünmediğini bildirir.

Base64 görüntüm neden çözülemiyor?

Çoğu durumu üç neden açıklar. Dizede standart base64 alfabesi dışındaki karakterler bulunabilir; bu alfabe A–Z, a–z, 0–9, +, / ve = karakterlerinden oluşur. Bazı web belirteçlerinde kullanılan base64url çeşidi bunun yerine - ve _ karakterlerini yazar ve kabul edilmez. Dize yarıda kesilmiş olabilir; bu durumda uzunluğu dörtlünün katından bir fazla olur ki geçerli bir base64 dizesinde bu hiçbir zaman gerçekleşmez. Ya da baytlar desteklenen görüntü biçimlerinden birine ait olmayabilir. Tek başına eksik = dolgusu sorun değildir; boşluklar ve satır sonları da kod çözme işleminden önce kaldırılır.

Base64 kodlaması bir güvenlik veya şifreleme biçimi midir?

Hayır. Base64 yalnızca baytları metin olarak temsil etme yöntemidir; hiçbir şeyi gizlemez. Herkes ücretsiz bir araçla base64 dizesinin kodunu saniyeler içinde çözebilir. Bu nedenle özel görüntüleri veya diğer verileri korumak için asla kullanılmamalıdır.

Base64 dizesi özgün görüntüden ne kadar daha büyüktür?

Büyük dosyalarda yaklaşık üçte bir daha büyüktür; çünkü özgün verilerin her 3 baytı 4 metin karakterine dönüşür. 100 KB boyutundaki bir görüntü, kodlandıktan sonra yaklaşık 133 KB olur. Yuvarlama nedeniyle küçük görüntülerde yüzde artışı biraz daha yüksek olabilir.

Tarihçe

Base64, yalnızca düz metin işleyen posta sistemleri üzerinden ikili veri göndermek için 1970'lerde ve 1980'lerde geliştirilen kodlama şemalarından ortaya çıktı; e-posta için RFC 989 (1987) ve daha sonra RFC 1421 ile resmîleştirildi. Görüntülerin web sayfalarına yerleştirilmesi, data: URL şemasının RFC 2397 (1998) ile tanımlanmasıyla mümkün oldu. Geliştiricilerin, özellikle yavaş mobil bağlantılarda ayrı HTTP isteklerini azaltmanın yollarını aramasıyla, kullanım 2000'lerin ortalarında yaygınlaştı.

Kaynaklar

1. RFC 4648: Base16, Base32 ve Base64 Veri Kodlamaları
2. RFC 2397: "data" URL şeması
3. MDN Web Belgeleri: veri URL'leri
4. WHATWG MIME Koklama Standardı