Base64 Görsel Çevirici
Bir görseli Base64 data URI'ye çevirin, ya da Base64 metnini indirilebilir bir görsele geri dönüştürün — her şey yerel olarak çalışır, hiçbir şey yüklenmez.
247 görüntülenme
Bu, görsel olarak çözülemedi — Base64 metnini kontrol edin.
Nasıl Çalışır
Bu araç iki yönde çalışır. Görsel → Base64 modunda, tarayıcının yerleşik dosya seçiciyle bir dosya seçin; araç dosyayı FileReader.readAsDataURL() API'siyle okur ve data:image/png;base64,iVBORw0KG... gibi tam bir data URI üretir; bu bir kutuda gösterilirken, önek olmadan yalnızca ham Base64 verisi ikinci bir kutuda gösterilir — böylece kullanım amacınıza göre hangi biçime ihtiyacınız varsa onu, her biri için tek tıkla kopyala butonuyla birlikte alabilirsiniz. Base64 → Görsel modunda, metin kutusuna tam bir data URI ya da yalnızca ham Base64 metnini yapıştırın; önek olmadan salt Base64 yapıştırırsanız araç otomatik olarak data:image/png;base64, başlığını ekler, böylece tarayıcı yine de görseli oluşturabilir; ardından canlı bir <img> önizlemesi ve çözülen baytları gerçek bir görsel dosyası olarak geri kaydeden bir indirme butonu gösterilir.
Base64 kodlaması, ikili veriyi yalnızca 64 yazdırılabilir ASCII karakteri (A–Z, a–z, 0–9, + ve /) kullanarak temsil eder; bu da doğası gereği ikili olan bir görselin HTML, CSS, JSON veya bir URL gibi yalnızca metin kabul eden biçimlerin içine gömülebilmesini sağlayan şeydir. Mekanizma sabit ve matematikseldir: orijinal dosyanın her 3 baytı (24 bit), giriş uzunluğu 3'ün katı değilse = ile doldurularak tam olarak 4 Base64 karakterine (4 × 6 bit) dönüşür. Bu 3 bayt girer, 4 karakter çıkar oranı, Base64 çıktısının orijinal ikili veriden neden her zaman kabaca %33 daha büyük olduğunun da sebebidir — 4'ün 3'e bölümü yaklaşık 1,333'tür; bu bir yaklaşım ya da kalite ayarı değil, sabit matematiksel bir ek yüktür.
Bilinmesi Gerekenler
Bir görseli doğrudan HTML veya CSS'inizin içine data URI olarak gömmenin gerçek bir avantajı vardır: ayrı bir HTTP isteğini ortadan kaldırır; bu, ikonlar, küçük sprite'lar veya harici görsellerin engellenebileceği bir e-posta şablonuna gömülü minik bir logo gibi çok küçük, sık tekrar kullanılan varlıklar için önemlidir. Daha büyük her şey için ödünleşim tersine döner: bir data URI, bağlantılı bir .png veya .jpg dosyasının aksine tarayıcı tarafından ayrı olarak önbelleğe alınamaz, içinde bulunduğu HTML/CSS dosyasının boyutunu (aynı ~%33 oranında) şişirir ve kodlanmış blok tamamen indirilene kadar o dosyanın işlenmesini engeller. Genel kural olarak, data URI'ler birkaç kilobaytın altındaki varlıklar için uygundur; fotoğraflar, hero görselleri veya bir kullanıcının sayfa yüklemeleri arasında önbellekte kalmasını isteyebileceği her şey için uygun değildir.
MIME tipi öneki — data:image/png;base64,... içindeki image/png, image/jpeg veya image/webp kısmı — süsleme değildir. Tarayıcıya (veya dizgiyi okuyan herhangi bir programa) sonraki baytları hangi çözücüye teslim edeceğini söyleyen kısım budur; bu önek olmadan veya yanlış bir önekle, başka türlü geçerli bir Base64 verisi hiç görüntülenemeyebilir veya tamamen yanlış bir dosya türü olarak işlenebilir. Bu araç, önek belirtmeden salt Base64 yapıştırdığınızda tam olarak bu yüzden otomatik olarak bir PNG öneki ekler — makul bir varsayılan olsa da, orijinal dosyanın gerçekte JPEG veya WebP olduğunu biliyorsanız öneki buna göre değiştirmelisiniz.
Sıkça Sorulan Sorular
Base64 çıktısı neden her zaman orijinal görselden daha büyük?
Base64, ikili girdinin her 3 baytını 4 metin karakteri olarak kodlar, bu yüzden çıktı her zaman girdinin yaklaşık 4/3'ü büyüklüğündedir — kabaca %33 daha büyük. Bu, kodlamanın sabit matematiksel bir özelliğidir (yazdırılabilir karakter başına 8 yerine 6 bit bilgi) — düşük kaliteli bir ayardan veya verimsiz bir araçtan kaynaklanmaz.
Görselim çevrilirken bir sunucuya yükleniyor mu?
Hayır. Her iki yön de tamamen tarayıcınızda çalışır: FileReader.readAsDataURL() dosyayı yerel olarak okur, görsele geri çözme işlemi de yerel olarak gerçekleşir. Hiçbir şey herhangi bir yere iletilmez.
Normal bir görsel dosyası yerine ne zaman gerçekten Base64 data URI kullanmalıyım?
Bir HTTP isteği tasarrufunun ~%33'lük boyut artışına değdiği küçük, sık tekrar kullanılan varlıklar için mantıklıdır — ikonlar, minik arayüz sprite'ları, bir HTML e-postasındaki logo gibi. Fotoğraflar veya tarayıcının sayfalar arasında ayrı ayrı önbelleğe almasını istediğiniz herhangi bir görsel için uygun değildir, çünkü gömülü bir data URI, içeren HTML veya CSS dosyası her yüklendiğinde yeniden indirilir.
Bir Base64 dizgisi yapıştırdım ama önizlemede hiçbir şey görünmüyor — neden?
İki yaygın sebep vardır: dizginin MIME tipi öneki eksik (ya da yanlış) — bu araç önek yoksa otomatik olarak data:image/png;base64, ekler, ama bu yalnızca alttaki baytlar gerçekten PNG verisiyse işe yarar — ya da Base64 metninin kendisi kesilmiş veya bozulmuştur (örneğin belirli kaynaklardan kopyalarken araya boşluk/satır sonu eklenmesi yüzünden). Önekin gerçek biçimle eşleştiğinden ve dizginin tamamını kopyaladığınızdan emin olun.
"Tam data URI" ve "yalnızca Base64" çıktı kutuları arasındaki fark nedir?
Tam data URI (data:image/...;base64, ile başlayan) doğrudan bir HTML src özniteliğine veya bir CSS url()'ine yapıştırdığınızda tarayıcının onu hemen işlemesini sağlayan biçimdir. Yalnızca Base64 kutusu bu öneki çıkarır; bu, bir programın, API'nin veya yapılandırma dosyasının yalnızca ham kodlanmış veriyi beklediği ve tip bilgisini kendisinin ayrıca ekleyeceği durumlarda istediğiniz biçimdir.
Benzer Araçlar
Sorun Bildir
Base64 Görsel Çevirici
Yorumlar
Henüz yorum yok — ilk yorumu siz yazın!