Resimden Base64’e dönüştürücü ne işe yarar
Bu araç herhangi bir resmi (PNG, JPG, GIF, SVG, WebP) doğrudan HTML, CSS, JSON veya e-posta şablonuna yapıştırabileceğiniz bir Base64 data URI dizesine çevirir. Ayrı bir .png dosyasına bağlantı vermek yerine, resmin tamamı kod içinde metin olarak yaşar. Böylece barındırılacak bir dosya ve beklenecek bir ağ isteği daha az olur. Küçük simgeler, satır içi logolar, CSS arka plan resimleri, favicon’lar ve dosya yönetmek istemediğiniz hızlı demolar için çok kullanışlıdır. Ön yüz geliştiricileri, e-posta kodlayanlar ve statik bir sayfaya logo gömecek herkes bundan en çok faydayı görür.
Nasıl kullanılır
- Bir resmi bırakma kutusuna sürükleyin ya da kutuya tıklayıp cihazınızdan bir dosya seçin.
- Araç dosyayı okur, boyutlarını ve büyüklüğünü gösterir, ardından data URI’yi otomatik üretir. Uğraşılacak ek bir ayar yoktur.
- Sonucu “Base64 data URI” kutusunda görün. Dize zaten
data:image/...;base64,önekini içerdiği için kullanıma hazırdır. - Tam dizeyi almak için Kopyala’ya basın, sonra
<img src="">içine, CSSurl()değerine ya da ihtiyaç duyduğunuz yere yapıştırın.
Neden burada dönüştürmeli
Dönüştürme, yerleşik FileReader kullanılarak tamamen tarayıcınızda gerçekleşir, dolayısıyla resminiz hiçbir yere yüklenmez. Bu, özel görselleri özel tutar ve sonucu dosya yüklenir yüklenmez anında gösterir. Ücretsizdir, hesap gerektirmez ve telefonda, tablette ya da dizüstünde aynı şekilde çalışır. Çıktı özgün biçimi koruduğu için saydam bir PNG saydam kalır, bir SVG de SVG olarak kalır. Daha fazla görsel aracı için resim araçları bölümüne göz atabilirsiniz.
İpuçları
Base64 dizeleri özgün dosyadan yaklaşık yüzde 33 daha büyük olur, bu yüzden en iyi küçük resimlerde sonuç verir. Büyük fotoğraflar için normal bir barındırma bağlantısı genelde daha hafiftir. Bir klasör dolusu simgeyi tek seferde mi çevirmek istiyorsunuz? Aynı ekibin masaüstü uygulaması BulkPro toplu işleri rahatça halleder.
Sıkça sorulan sorular
- Bir resmi nasıl Base64 data URI'ye çeviririm?
- Resmi kutuya sürükleyin ya da yükleyin. Araç, "data:image/png;base64," önekiyle birlikte tam data URI dizesini anında çıktı kutusunda üretir. Kopyala düğmesine basıp HTML veya CSS dosyanıza yapıştırın.
- Çıktı, HTML ve CSS için gereken öneki içeriyor mu?
- Evet. Dize, doğru "data:image/...;base64," önekiyle başlar. Bu sayede dizeyi bir img src değerine ya da CSS url() içine hiçbir değişiklik yapmadan doğrudan yapıştırabilirsiniz.
- Hangi resim biçimlerini Base64'e çevirebilirim?
- PNG, JPG, GIF, WebP ve SVG dahil standart tarayıcı resimlerinin tamamı çalışır. Çıktı özgün biçimi koruduğu için saydamlık ve vektörler bozulmaz.
- Özel resimleri burada çevirmek güvenli mi?
- Evet. Dönüştürme tarayıcınızda yerel olarak çalışır, hiçbir yükleme yapılmaz, dolayısıyla resminiz cihazınızdan çıkmaz. Sunucuda hiçbir şey saklanmaz.