Görselden Base64'e
PNG, JPG, WebP veya GIF görselleri Base64 veri URI'sine, düz Base64 dizesine, HTML img etiketine veya CSS arka planına dönüştürün. Küçük simgeleri doğrudan
görsel dosyanızı buraya bırakın
veya dosya seçmek için tıklayın
Bir PNG, JPG, WebP, GIF veya SVG dosyasını Base64'e çevirin ve gerçekten ihtiyacınız olan biçimde alın: eksiksiz bir veri URI'si, çıplak bir Base64 dizesi, yapıştırmaya hazır bir HTML <img> etiketi ya da bir CSS arka plan bildirimi.
Küçük grafikleri doğrudan koda gömmek bir ağ isteğini ortadan kaldırır ve simgenin stil sayfası yüklenmeden önce bile görünmesini garanti eder - veri URI'lerinin simgeler, yükleniyor göstergeleri ve e-posta imzaları için popüler olmasının nedeni budur. Ödünç verilen şey boyuttur: Base64, ikili dosyadan yaklaşık üçte bir daha büyüktür ve ayrı olarak önbelleğe alınamaz, bu yüzden onu küçük varlıklarda tutun ve daha büyük görselleri normal biçimde bağlayın.
Bir görsel Base64'e nasıl dönüştürülür
Bir görsel seçin
İhtiyacınız olan çıktı biçimini belirleyin
Veri URI'sini, etiketi ya da CSS'i kopyalayın
SSS
Bir görseli bağlamak yerine ne zaman gömmeliyim?
Kabaca 10 KB'nin altındaki küçük ve sık kullanılan grafikler için - simgeler, logolar, yükleniyor göstergeleri - bir isteği kaydetmek boyut artışından daha önemli olduğunda. Büyük fotoğraflar, tarayıcı önbelleğe alabilsin diye dosya olarak kalmalıdır.
Base64 dizesi neden dosyamdan büyük?
Base64 her üç baytı dört karakter olarak kodlar ve bu yaklaşık %33 ekler. Bu ek yük kodlamanın kendisinde kaçınılmazdır.
Hangi biçimleri kullanabilirim?
PNG, JPG, WebP, GIF ve SVG. Veri URI'si olarak gömülen vektör SVG ölçeklenebilir kalır, bu yüzden simgeler için sıklıkla en iyi seçimdir.
HTML'in yanı sıra CSS'te de çalışır mı?
Evet, bir background-image bildiriminde kullanmak için CSS biçimini ya da bir img src özniteliği için HTML biçimini kopyalayın.
E-posta istemcileri bunu gösterir mi?
Çoğu modern istemci gösterir, ancak bazıları güvenlik nedeniyle veri URI'lerini kaldırır. E-posta şablonları için yerleşim önemliyse görseli barındırıp bağlantı olarak verin.
Görselim yükleniyor mu?
Hayır, kodlama tarayıcınızda gerçekleşir.
Bir bakışta
| Girdi | görsel |
|---|---|
| Birden fazla dosya | Evet |
| Nerede çalışır | Tarayıcınızda - dosyalar hiçbir zaman yüklenmez |
| Çevrimdışı çalışır | Evet — sayfa yüklendikten sonra |
| Fiyat | Ücretsiz, kayıt yok, filigran yok |
Dönüştürmelerin sessizce bozulduğu yerler
Dönüştürme hatalarının çoğu söz dizimiyle ilgili değil, anlamla ilgilidir. Bir posta kodu sütunu, elektronik tablo onu bir sayı sandığı anda baştaki sıfırlarını kaybeder; uzun bir kimlik kayan nokta hassasiyetini aşar; tarihler gün-önce mi ay-önce mi olduğuna göre anlam değiştirir. JSON anahtarları sırasızdır ama diziler sıralıdır; anahtarları sıralayan bir araç hiçbir şeyi değiştirmez, dizileri sıralayan bir araç ise veriyi değiştirir. Unicode başka bir tuzaktır: metin UTF-8, UTF-16 ya da bir bayt sırası işaretiyle gelebilir ve yanlış tahmin eden bir çözücü aksanlı karakterleri bozuk metne çevirir. Herhangi bir dönüştürmeye güvenmeden önce ilk ve son satırı, başta sıfır bulunan her alanı ve tırnak, virgül ya da satır sonu içeren her alanı kontrol edin.
Bir veri biçimi seçmek
JSON, bir API'nin döndürdüğü ya da bir programın okuduğu her şey için varsayılandır: iç içe yapıları, sayıları, boolean değerleri ve null'ı doğal biçimde işler ve her dil onu ayrıştırır. CSV daha küçüktür ve doğrudan bir elektronik tabloda açılır, ancak iç içe yapıyı ifade etmenin hiçbir yolu yoktur ve ayırıcı, tırnaklama ya da karakter kümesi için ortak bir standardı yoktur - dönüştürmelerin tam olarak bozulduğu yer burasıdır. XML ayrıntılıdır ama öznitelikleri, karışık içeriği ve şemaları taşır; bu yüzden belge biçimlerine ve eski entegrasyonlara hâlâ hâkimdir. YAML yapılandırma için en okunabilir olanıdır ama boşluklara duyarlıdır ve şaşırtıcı tür dönüşümleri vardır ("no" değerinin false olması, 1.10 gibi bir sürümün 1.1'e dönüşmesi). En hoş görüneni değil, tüketen aracın tercih ettiği biçimi seçin.