Bir greasemonkey userscript kaynağı bakıyordum ve css şunları fark ettim:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5 rq6uvr6 zs7O7u7vHx8fPz8/b29vj4 P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Bir greasemonkey script açık bir sunucu üzerinde kaynak ana aksine içinde her paket için takdir edebilirim. Ama daha önce bu tekniği görmüştüm beri, ve bir takım nedenlerden için cazip görünüyor kullanımı düşündüm:

1. Sayfa yüklendiğinde HTTP istekleri miktarını, böylece performans arttırıcı azaltacaktır
2. Eğer hayır EĞER varsa, o zaman Trafik kurabiye yanında görüntülerin gönderilmesi ile oluşturulan miktarını azaltacaktır
3. CSS dosyaları önbelleğe alınabilir
4. CSS dosyaları GZİP ' olabilir

IE6 (örneğin) arka plan resimleri için önbelleği ile ilgili sorunlar göz önüne alındığında, bu kötü bir fikir değil gibi görünüyor...

Bu iyi ya da kötü bir uygulama, neden kullanmazsın ve araçları kullanmak için base64 görüntüleri kodlamak ne olur?

güncelleme - test sonuçları

• görüntü testi: http://fragged.org/dev/map-shot.jpg -133.6 Kb

• test URL: http://fragged.org/dev/base64.html

• özel CSS dosyası: http://fragged.org/dev/base64.css - 178.1 Kb

• Sunucu tarafında GZİP kodlama

• boyutu müşteriye gönderilen (YSLOW sonuç bileşenleri test):59.3 Kb

• Veri kaydetme istemci tarayıcısına gönderilen:74.3 Kb

Güzel, ama daha küçük resimler için biraz daha az yararlı olacaktır, sanırım.

GÜNCELLEME: Bryan McQuade, bir yazılım mühendisi at Google, çalışma PageSpeed, ifade edilmiştir ChromeDevSummit 2013 verileri:URI CSS olarak kabul edilir bir hale engelleme anti-desen için teslim kritik/minimal CSS sırasında yaptığı konuşma #perfmatters: Instant mobile web apps. http://developer.chrome.com/devsummit/sessions görmek ve aklımda - actual slide devam et

Görüntü ve stil bilgilerinizi ayrı ayrı önbelleğe olmak istiyorsanız, iyi bir fikir değil. Ayrıca eğer kodlamak bir büyük resim veya önemli bir sayı görüntüler için css dosyası alacaktır tarayıcı daha indir dosyayı bırakarak siteniz olmadan herhangi bir stil bilgisi kadar indirme tamamlar. Sık sık eğer hiç değiştirmek istemediğiniz küçük resimler için iyi bir çözümdür.

base64 kodlama üreten kadarıyla:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (upload)
• 10* *(küçük öğreticiler ve altındaki bağlantı)
• http://base64img.com - Base64 görüntüleri gerçek zamanlı HTML5 dönüştürme
• http://datauri.net - otomatik CSS dosyaları veri URI gömer. destekler çoklu / sürükle ve bırak dosyaları