Base64'te bir görüntüyü kodlamanın etkisi nedir?

97

Bir görüntüyü (jpg veya png) base64'e dönüştürürsem, daha büyük olur mu yoksa aynı boyutta mı olur? Ne kadar büyük olacak?

Web sitemde base64 kodlu görüntülerin kullanılması tavsiye edilir mi?

— Danny Fox
kaynak

1

Böyle bir şey yapmak isteyeceğiniz tek zaman, düz metin kaynaklarıyla sınırlı olmanız ve herhangi bir nedenle ham bir görüntü formatı kullanamamanızdır.

— Wug

Burada güzel bir cevap var: stackoverflow.com/questions/1533113/…

— Steed

base64, derin bağlantıları imkansız hale getirir. Bu bir artı olabilir.

— damoeb

@Wug - Bunun geç bir cevap olduğunu ve bazı şeylerin değiştiğini bilin, ancak kesinlikle bas64 göndererek performans artışı elde edebileceğiniz zamanlar. Base64 kodlu görüntülere (küçük olanlar) sahip web yuvaları üzerinden mesaj göndermek, her görüntüyü kendi başına istemekten daha verimli olacaktır.

— Philip

Bu güzel bir soru. "İkili görüntüleri mi yoksa base64 kodlu olarak mı kaydedin?" İçin iyi bir yanıt arıyordum. ve bunun gibi

— moreirapontocom

132

Yaklaşık% 37 daha büyük olacaktır:

Kabaca, Base64 ile kodlanmış ikili verilerin son boyutu, orijinal veri boyutunun 1,37 katına eşittir

Kaynak: http://en.wikipedia.org/wiki/Base64

— Blender
kaynak

29

Hayır,% 137 daha büyük değil,% 137 orijinal boyuttan :-)% 37 daha büyük (kaynağınıza göre).

— Eric J.

4

Bunun orijinal boyutun neredeyse 4 / 3'ü olduğunu söyleyebilirim.

— kiwixz

Görüntüyü base64'e dönüştürmek için görüntü boyutu için herhangi bir sınırlama var mı?

— 151291

2

@Blender Ama benim durumumda 70kb'lik bir bitmap'i dizeye dönüştürdüğümde 500kb oluyor.% 37 değil. 5mb'lik bir görüntüyü 70kb'ye sıkıştırdım ve sonra bu sıkıştırılmış görüntüyü 500kb olan dizeye dönüştürdüm.

— KJEjava48

@ KJEjava48: Bunu bir dizeye nasıl dönüştürüyorsunuz?

— Blender

16

İşte gerçekten yararlı base64 için kodlamak bakış ve değil David Calhoun tarafından.

Basic answer = gzip ile sıkıştırılmış base64 olarak kodlanmış dosyalar, dosya boyutu açısından standart ikili dosyayla (jpg / png) kabaca karşılaştırılabilir olacaktır. Gzip'lenmiş ikili dosyalar daha küçük dosya boyutuna sahip olacaktır.

Takeaway = UI simgelerinizi, vb. Kodlamanın ve gziplemenin bazı avantajları vardır, ancak bunu daha büyük resimler için yapmak akıllıca değildir.

— bulldog
kaynak

15

Base64'te daha büyük olacak.

Base64, verileri kodlamak için bayt başına 6 bit kullanırken ikili, bayt başına 8 bit kullanır. Ayrıca, Base64 ile küçük bir dolgu ek yükü var. Base64 ile tüm bitler kullanılmaz, çünkü ilk olarak ikili olmayan verileri yalnızca ikili olmayan verileri doğru şekilde işleyebilen sistemlerde kodlamak için geliştirilmiştir.

Bu, kodlanan görüntünün yaklaşık% 25 daha büyük olacağı ve ayrıca dolgu için sürekli ek yük olacağı anlamına gelir.

— Eric J.
kaynak

7

Bir görüntüyü base64 olarak kodlamak, onu yaklaşık% 30 daha büyük hale getirir.

Veri URI şemasıyla ilgili wikipedia makalesindeki ayrıntılara bakın , burada belirtilmiştir:

Base64 olarak kodlanmış veri URI'leri, ikili eşdeğerlerinden 1/3 boyut olarak daha büyüktür. (Ancak, HTTP sunucusu yanıtı gzip kullanarak sıkıştırırsa bu ek yük% 2-3'e düşer)

— Oded
kaynak

7

Cevap şudur: Duruma göre değişir.

Base64 görüntüleri daha büyük olsa da, base64'ün daha iyi seçim olduğu birkaç koşul vardır.

Base64 görüntü boyutu

Base64, 64 farklı karakter kullanır ve bu 2 ^ 6'dır. Yani base64, 8 bit karakter başına 6 bit depolar. Dolayısıyla, dönüştürülmemiş verilerden base64 verilerine oran 6 / 8'dir. Bu kesin bir hesaplama değil, kaba bir tahmindir.

Misal:

48kb'lik bir görüntü, base64 dönüştürülmüş görüntü olarak yaklaşık 64kb'ye ihtiyaç duyar.

Hesaplama: (48/6) * 8 = 64

Linux sistemlerinde basit CLI hesaplayıcı:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Veya bir resim kullanarak:

$ cat my.png|base64|wc -c

Base64 görüntüleri ve web siteleri

Bu soruya cevap vermek çok daha zor. Genel olarak konuşursak, base64 kullanarak görüntü ne kadar büyükse daha az anlamlı olur. Ancak şu noktaları göz önünde bulundurun:

Bir HTML Dosyasına veya CSS Dosyasına birçok gömülü görüntü benzer dizelere sahip olabilir. PNG'ler için sıklıkla tekrarlanan "A" karakterleri bulursunuz. Gzip kullanıldığında (bazen "deflate" olarak adlandırılır), boyutta bir kazanç bile olabilir. Ancak görüntü içeriğine bağlıdır.
HTTP1.1 ek yükü isteyin: Özellikle çok sayıda çerezle, istek başına kolayca birkaç kilobayt ek yüke sahip olabilirsiniz. Base64 görüntüleri gömmek bant genişliğinden tasarruf sağlayabilir.
SVG görüntülerini base64 olarak kodlamayın, çünkü gzip XML'de base64'e göre daha etkilidir.
Programlama: Dinamik olarak oluşturulan görüntülerde, iki bağımlı isteği koordine etmek için bunları tek bir istekte teslim etmek daha kolaydır.
Derin bağlantılar: Görselin indirilmesini önlemek istiyorsanız, bir HTML sayfasından bir görüntüyü çıkarmak biraz daha zordur.

— Trendfischer
kaynak

3

Base64 ile kodlanmış görüntüleri kullanmak istiyorsanız, kesinlikle size daha fazla alana ve bant genişliğine mal olacak. Ancak sitenizde çok sayıda küçük resim varsa, resimlerinizi base64 olarak kodlayıp html'ye yerleştirerek sayfa yükleme süresini azaltabilirsiniz. Bu şekilde, istemci tarayıcısının resimlerle çok fazla bağlantı kurması gerekmeyecek, ancak html biçiminde olacaktır.

— Brad Larson
kaynak

Ancak, HTTP 2 gerçekten geldikten sonra bu bir sorun olmayacaktır.

— Philip

@Philip Bu doğru, ancak tüm kaynakların HTML dosyasında yer almasındaki taşınabilirlik faktörünü seviyorum. Bu, sivilceli ağların olduğu alanlarda mobil web önbelleğe alma işlemine yardımcı olacaktır.

— aalaap

@aalaap Bununla ilgili sorun, sayfada bir değişiklik yaparsanız, resimler dahil tüm içeriği yeniden yüklemeniz gerekir. Varlıkları ayırdıysanız, bunlardan daha yüksek bir yaşa sahip olabilirsiniz ve önbellekte depolanır ve önbellekte yeniden yüklenmez, sayfanın kendisinde sona erer.

— Philip