Görsel ↔ Base64 Dönüştürücü
Görselleri Base64 data URL’ye ve geri çevirin — CSS ve HTML parçacıklarıyla
Bu araç hakkında
Bir görseli sürükleyin, seçin ya da yapıştırın; Base64 hâlini ihtiyaç duyabileceğiniz her tatta alın: kullanıma hazır bir data URL, bir CSS background-image bildirimi, doğal boyutlarıyla eksiksiz bir <img> etiketi ve ham Base64 yükü. Ters yön de çalışır — bir data URL ya da çıplak bir Base64 bloğu yapıştırın; görsel çözülür, önizlenir ve dosya olarak indirilebilir.
Biçim, dosya uzantısından ya da bildirilen mime türünden değil sihirli baytlardan belirlenir; yani .jpg olarak yeniden adlandırılmış bir PNG (ya da yanlış etiketli bir data URL) yine de doğru dönüşür. Boyut paneli maliyet konusunda dürüsttür: Base64 veriyi yaklaşık üçte bir oranında şişirir ve tam kodlanmış boyut, özgün boyutun yanında gösterilir; böylece gömmenin buna değip değmediğine karar verebilirsiniz.
Çoğu görselden-Base64’e sitesinin aksine hiçbir şey karşıya yüklenmez — dosya tarayıcının FileReader API’siyle okunur ve sayfada kodlanır. Bu da onu iç panellerin ekran görüntüleri, yayımlanmamış ürün fotoğrafları ya da bir yabancının sunucusuna vermeyi tercih etmeyeceğiniz her şey için güvenli kılar.
Sıkça sorulan sorular
- Bir görseli dosya olarak bağlamak yerine ne zaman Base64 olarak gömmeliyim?
- Görsel küçükse (kabaca 10 KB’ın altı), nadiren değişiyorsa ve aksi hâlde fazladan bir HTTP isteğine mal olacaksa — ikonlar, e-postalardaki logolar ya da tek dosyalık HTML belgeleri gibi. Bundan büyüğünde ayrı dosya kazanır: bağımsız önbelleklenir, paralel yüklenir ve HTML’inizi ya da CSS’inizi %33 şişirmez.
- Base64 sürümü neden dosyamdan yaklaşık üçte bir daha büyük?
- Base64 her 3 baytlık ikili veriyi 4 ASCII karakteriyle temsil eder; bu yapısal olarak +%33 ek yüktür (artı en fazla iki dolgu karakteri). Sunucunuzdaki gzip ya da Brotli bunun bir kısmını geri kazandırır ama şişme kodlamanın doğasında vardır — ikili veriyi metne gömebilme yeteneğini boyutla takas eder.
- Bir stil dosyasında ya da HTML’de bulduğum bir data URL’yi çözebilir miyim?
- Evet — Base64 → görsel moduna geçin ve data: önekiyle birlikte tamamını yapıştırın. Yüzde kodlu SVG data URL’leri (;base64 içermeyen tür) de çözülür ve yükün içindeki satır sonlarıyla boşluklar kendiliğinden temizlenir. Sonuç sayfada önizlenir ve doğru uzantıyla indirilir.
- Bu yalnızca PNG ve JPEG için mi, yoksa SVG, GIF ve ICO da işe yarar mı?
- Algılayıcının tanıdığı her şey Base64’e dönüşür: PNG, JPEG, WebP, GIF, SVG, BMP, ICO ve AVIF. Özellikle SVG için şunu düşünün: XML kaynağı doğrudan satır içine alındığında çoğu zaman daha küçük ve daha okunaklıdır — SVG’yi Base64 ile kodlamak asıl olarak tırnaklama ya da kaçışlama sorun olduğunda anlamlıdır.