Resim Base64 çevirme
Bir resmi kodunda kullanabileceğin Base64 metnine çevir.
Base64 metni orijinal dosyadan yaklaşık %37 daha büyüktür. Küçük simgeler için uygundur, tam boyutlu fotoğraflar için değil.
Tarayıcında çalışır. Dosyaların cihazından asla çıkmaz.
- Veri URL'si, CSS ve HTML çıktısı
- Her resim türüyle çalışır
- Hiçbir şey yüklenmez
Bir resim nasıl Base64'e çevrilir
- Buraya bir resim bırak, ya da Dosya seç'e dokun.
- Veri URL'sini, ham Base64'ü veya hazır bir CSS ya da HTML kod parçacığını kopyala.
- Kodunda kullanmak için yapıştır.
Kodlama nasıl çalışır
Base64, RFC 4648'in standart alfabesi olan A'dan Z'ye, a'dan z'ye, 0'dan 9'a, artı ve bölü işaretinden oluşan 64 karakteri kullanarak resmin her 3 baytını 4 metin karakterine çevirir.
Bir veri URL'si, data:image/png;base64 gibi kısa bir önekle birlikte bu metindir, böylece bir tarayıcı veya uygulama ayrı bir dosya olmadan neye baktığını anlar.
| Orijinal dosya | Base64 metni (yaklaşık %37 daha büyük) |
|---|---|
| 5 KB simge | Yaklaşık 6,9 KB |
| 20 KB logo | Yaklaşık 27 KB |
| 100 KB fotoğraf | Yaklaşık 137 KB |
Bu ek yük, veri URL'lerinin neden tam fotoğraflar için değil de küçük grafikler için en iyi sonucu verdiğini açıklar.
Veri URL'leri nerede kullanılır
- CSS içinde background-image özelliğinde, böylece küçük bir simge ayrı bir istek yerine stil sayfasıyla birlikte yüklenir.
- HTML içinde bir img src özniteliğinde veya satır içi SVG kodunda.
- Bir resmi metin olarak saklayan JSON API yanıtlarında ve veritabanı alanlarında.
- E-posta HTML'sinde, çünkü bazı e-posta istemcileri bağlantılı resimleri engeller ama satır içi veriye izin verir.
Ne zaman normal bir dosya kullanmaya devam etmeli
Veri URL'leri, içinde bulundukları sayfadan ayrı önbelleğe alınmaz, bu yüzden on sayfada kullanılan bir fotoğraf bir kez yerine on kez indirilir. Küçük bir simgeden daha büyük her şey için, tarayıcı önbelleklemesi olan normal bir resim dosyası daha hızlı yüklenir.
Resim Base64 SSS
Base64 veri URL'si nedir?
Bir resmin baytlarının metin olarak yazılmış halidir, böylece bir resmi ayrı bir dosya olmadan doğrudan HTML, CSS veya JSON içine yapıştırabilirsin.
Base64 dosyayı büyütür mü?
Evet, yaklaşık %37 oranında, çünkü kodlama resmin her 3 baytını 4 karakterlik metne çevirir.
Bir dosya yerine ne zaman veri URL'si kullanmalıyım?
Sayfa boyutundan çok bir ağ isteğinden tasarruf etmenin önemli olduğu küçük simgeler ve basit grafikler için. Fotoğraflar için normal bir resim dosyası kullanmaya devam et.
Resmim bir yere yükleniyor mu?
Hayır. Kodlama tarayıcında çalışır, bu yüzden resim cihazından hiç çıkmaz.
Base64'e çevirmek resim kalitesini değiştirir mi?
Hayır. Piksel verisine dokunulmaz, sadece metin olarak yeniden yazılır, bu yüzden geri çözdüğünde birebir orijinal baytları alırsın.
Bir veri URL'si için maksimum boyut var mı?
Tarayıcılar sabit bir sınır koymaz, ama uzun bir veri URL'si tek başına önbelleğe alınamaz ve ayrıştırmayı yavaşlatır, bu yüzden bunları küçük simge ve grafiklerle sınırlı tut.
Her tarayıcı veri URL'lerini destekliyor mu?
Evet. Veri URL'leri, tüm güncel mobil tarayıcılar dahil, Internet Explorer 8'den beri her büyük tarayıcıda çalışıyor.
Bunu bir favicon için kullanabilir miyim?
Küçük bir favicon, HTML head içine veri URL'si olarak gömülebilir, ama PNG boyutlarıyla birlikte normal bir favicon.ico dosyası hâlâ daha yaygın bir kurulumdur.