Base64 Resimleri Gömme

564

Sadece meraktan, Base64 görüntü gömme hangi tarayıcılarda çalışır? Bahsettiğim şey bu .

Sayfa boyutunu biraz arttırdığı için çoğu şey için iyi bir çözüm olmadığını anlıyorum - sadece merak ediyorum.

Bazı örnekler:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

html base64 browser

— S Pangborn
kaynak

neden örneklerle bir sayfa oluşturmuyorsunuz, hepimiz geçip gerçek canlı testler yapacağız ve burada rapor edeceğiz

— Nir Levy

64 bit sadece 6 karakter alır 2 ^ 6. Bir metin dizesi, kodlama türüne bağlı olarak karakter başına minimum 8 bit olacaktır. En az% 25 verimlilik kaybettiniz .... Hızlı testim yaklaşık% 30 kayıp gösterdi.

Daha da önemlisi, eşyalarınızı etkili bir şekilde önbelleğe alma yeteneğini kaybedersiniz.

— Hut8

@BrianHaak "muazzam" hiçbir şey söylemiyor. Ben şahsen base64 görüntüleri son birkaç yıl içinde ReactJs ile birkaç kez kullandım ve hiç render sorunları vardı. Lütfen biraz ölçüm sağlayın.

— Lukas Liesis

@LukasLiesis Google Chrome'da ticari amaçlarla ölçümler yaptım, dolayısıyla burada herkese açık rapor yok. Benzersiz görüntüler oluşturmak için uygun olabilir, ancak önbelleğe almanın hiç işe yaramadığını düşünmeniz gerekir . React.js'de, tam yeniden oluşturma parçalarına (örneğin navigasyon değişikliklerinde) yol açtığında çok önemlidir.

— Brian Haak

Yanıtlar:

361

Güncelleme: 2017-01-10

Veri URI'leri artık tüm büyük tarayıcılar tarafından desteklenmektedir. IE, sürüm 8'den bu yana görüntüleri yerleştirmeyi de destekler.

http://caniuse.com/#feat=datauri

Veri URI'leri artık aşağıdaki web tarayıcıları tarafından desteklenmektedir:

Firefox, SeaMonkey, XeroBank, Camino, Fennec ve K-Meleon gibi Gecko tabanlı

Konqueror, KDE'nin KIO slave giriş / çıkış sistemi ile

Opera (Nintendo DSi veya Wii gibi cihazlar dahil)

Safari (iOS dahil), Android'in tarayıcısı, Epiphany ve Midori gibi WebKit tabanlı (WebKit, Konqueror'un KHTML motorunun bir türevidir, ancak Mac OS X, KIO mimarisini paylaşmaz, böylece uygulamalar farklıdır) ve Webkit / Chrome gibi Chromium tabanlı

üç dişli mızrak

Internet Explorer 8: Microsoft, bir veri URI'sına katıştırılmış JavaScript'in web tabanlı e-posta istemcileri tarafından kullanılanlar gibi komut dosyası filtreleri tarafından yorumlanamayacağı endişeleri de dahil olmak üzere desteğini güvenlik nedeniyle belirli "gezilemeyen" içerikle sınırlamıştır. Veri URI'leri Sürüm 8'de [3] 32 KiB'tan küçük olmalıdır.

Veri URI'leri yalnızca aşağıdaki öğeler ve / veya özellikler için desteklenir [4]:

nesne (yalnızca resimler)

img

girdi türü = resim

bağlantı

Arka plan resmi, arka plan, liste stili türü, liste stili ve benzerleri gibi bir URL'yi kabul eden CSS bildirimleri.

Internet Explorer 9: Internet Explorer 9 32KiB sınırlamasına sahip değildir ve daha geniş öğelerde izin verilir.

TheWorld Browser: Veri URI şeması için yerleşik bir desteğe sahip bir IE kabuk tarayıcı

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

— Philippe Gerber
kaynak

Merhaba Philippe, IE8'deki 32 KiB boyut sınırı için herhangi bir çözüm var mı? Base64 IE7 ve IE6'da destekleniyor mu? Hayır ise, herhangi bir geçici çözüm (boyut sınırı olmadan)? Evet ise, herhangi bir boyut sınırı var mı? Evet ise, herhangi bir geçici çözüm var mı?

— SexyBeast

Buna bakın, belki de yardımcı olacaktır: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under

Standartlar bir şey söylüyor mu? İyi cevap güncellemesi için belirli oylar =).

— Ciro Santilli 法轮功冠状病六四事件法轮功

IE8 sınırlaması - Bulduğum şey, IE8'in 32.768 ( Microsoft başına ) gömülü görüntü maksimum karakter sınırına sahip olması ve gömülü görüntümün 35.000'in biraz üzerinde olmasıydı. Bu nedenle , karakter sınırı aşıldığı için background-imageCSS özelliği ( url(...embedded image) IE8'de yüklenmeye çalıştığında, özelliği classiçeren tamamı yüklenmedi. Bunun için bir düzeltme ikna etmedim, maks'i imgaşan gömülü görüntülere geri döndüm ve resimlerim uygun şekilde yüklendi.

— id.ot

Chrome, Mozilla ve Internet Explorer gibi modern masaüstü tarayıcılarının çoğu, veri URL'si olarak kodlanan resimleri destekler. Ancak bazı mobil tarayıcılarda veri URL'lerini görüntüleme sorunları vardır: Android Stock Browser ve Dolphin Browser katıştırılmış JPEG'leri görüntülemez .

Çevrimiçi base64 kodlama / kod çözme için aşağıdaki araçları kullanmanızı öneririm:

Veri URL'si olarak biçimlendirmek için "Veri URL'si Olarak Biçimlendir" seçeneğini işaretleyin.

— Brig Ader
kaynak

Base64 kodlamak için çevrimiçi bir araca ihtiyacınız yoktur. Bunun yerine Linux veya Mac OS X'de base64 komut satırı aracını kullanabilirsiniz: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)

— cstroe

Kullanabilir miyim ( http://caniuse.com/#feat=datauri ) IE'de birkaç sorunla büyük tarayıcılarda destek gösterir.

— kehers
kaynak