Görüntüleri veri / base64 olarak CSS veya HTML'ye yerleştirmeli miyim

Sunucudaki istek sayısını azaltmak için bazı görüntüleri (PNG ve SVG) BASE64 olarak doğrudan css'e katıştırdım. (Oluşturma sürecinde otomatiktir)

bunun gibi:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

Bu iyi bir uygulama mı? Bundan kaçınmak için bazı nedenler var mı? Veri url desteği olmayan bazı büyük tarayıcılar var mı?

Bonus soru: Bunu CSS ve JS için de yapmak mantıklı mı?

Bu iyi bir uygulama mı? Bundan kaçınmak için bazı nedenler var mı?

IE uyumluluğunun önemli olmadığı ve isteği kaydetmenin önbellekten daha önemli olduğu durumlarda, genellikle yalnızca birlikte kullanılacak çok küçük CSS görüntüleri için (CSS sprite'lar gibi) iyi bir uygulamadır.

Bir dizi kayda değer dezavantajı vardır:

• IE6 ve 7'de hiç çalışmıyor.

• IE8'de yalnızca 32k boyutuna kadar olan kaynaklar için çalışır . Bu, base64 kodlamasından sonra geçerli olan sınırdır. Diğer bir deyişle, 32768 karakterden uzun olamaz.

• Bir isteği kaydeder, ancak bunun yerine HTML sayfasını şişirir! Ve görüntüleri önbelleğe alınamaz hale getirir. İçeren sayfa veya stil sayfası her yüklendiğinde yüklenirler.

• Base64 kodlaması, görüntü boyutlarını% 33 oranında şişiriyor.

• Gzip ile sıkıştırılmış bir kaynakta sunulursa, data:görüntüler sunucunun kaynakları üzerinde neredeyse kesinlikle korkunç bir yük oluşturacaktır! Görüntüler, boyutta çok az küçülme ile geleneksel olarak sıkıştırmak için çok yoğun CPU kullanır.

Buradaki ortak cevaplar, bir dizi yasal nedenlerden dolayı bunun gerekli olmadığını gösteriyor gibi görünüyor. Ancak, tüm bunlar modern uygulama davranışını ve oluşturma sürecini ihmal ediyor gibi görünüyor.

Bir klasör görüntülerinde gezinecek ve bu klasörün tüm görüntüleriyle tek bir CSS oluşturacak basit bir işlem tasarlamak imkansız değil (ve aslında oldukça kolay).

Bu css tam olarak önbelleğe alınacak ve sunucuya gidiş gelişleri önemli ölçüde azaltacaktır; bu, @MemeDeveloper'ın en büyük performans hitlerinden biri tarafından doğru bir şekilde önerildiği gibi.

Elbette, hack. şüphesiz. Sprite'ın bir hack olduğu gibi. Mükemmel dünyada buna gerek olmayacak, o zamana kadar, düzeltmeniz gereken şey şuysa, bu olası bir uygulamadır:

1. Kolayca "spritable" olmayan birden çok görüntü içeren sayfa.
2. Sunuculara gidiş dönüş gerçek bir darboğazdır (mobil düşünün).
3. hız (milisaniye düzeyinde) kullanım durumunuz için gerçekten çok önemlidir.
4. IE5 ve IE6'yı umursamıyorsun (gerektiği gibi, internetin ilerlemesini istiyorsan).

benim görüşüm.

Bu iyi bir uygulama değil. Bazı tarayıcılar veri URI'lerini desteklemiyor (örn. IE 6 ve 7) veya destek sınırlıdır (örn. IE8 için 32KB).

Veri URI dezavantajları hakkında tüm ayrıntılar için şu Wikipedia makalesine de bakın:

• Veri URI şeması

Dezavantajları

• Veri URI'leri, içerdikleri belgelerden (örn. CSS veya HTML dosyaları) ayrı olarak önbelleğe alınmaz, bu nedenle, içeren belgeler her yeniden indirildiğinde veriler indirilir.
• Her değişiklik yapıldığında içerik yeniden kodlanmalı ve yeniden yerleştirilmelidir.
• Sürüm 7 aracılığıyla Internet Explorer (Ocak 2011 itibarıyla pazarın yaklaşık% 15'i) destekten yoksundur.
• Internet Explorer 8, veri URI'larını maksimum 32 KB uzunluğunda sınırlar.
• Veriler basit bir akış olarak dahil edilir ve birçok işleme ortamı (web tarayıcıları gibi ) meta veriler, veri sıkıştırma veya içerik anlaşması gibi daha fazla karmaşıklık sağlamak için kapsayıcıların ( multipart/alternativeveya gibi message/rfc822) kullanılmasını desteklemeyebilir .
• 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)
• Veri URI'leri, güvenlik yazılımının içeriği filtrelemesini zorlaştırır.

Data-uri'leri yaklaşık bir aydır kullanıyordum ve onları kullanmayı bıraktım çünkü stil sayfalarımı kesinlikle muazzam hale getirdiler.

Data-uri'ler IE6 / 7'de çalışır (sadece bu tarayıcılara bir mhtml dosyası sunmanız gerekir ).

Data-uri'leri kullanmaktan elde ettiğim tek avantaj, arka plan resimlerimin stil sayfası indirilir indirilmez, aksi durumda gördüğümüz kademeli yüklemenin aksine oluşturulmasıydı.

Bu tekniğin mevcut olması güzel, ancak gelecekte onu çok fazla kullanmayacağım. Yine de denemenizi tavsiye ederim, sadece kendiniz tanımanız için

Resimleri birleştirmek ve isteklerden tasarruf etmek için CSS Sprite'ı kullanmaya daha meyilliydim. Base64 tekniğini hiç denemedim ama görünüşe göre IE6 ve IE7'de çalışmıyor. Ayrıca, herhangi bir görüntü değişirse, elbette birden fazla CSS dosyanız yoksa, tüm kayıpları yeniden iletmeniz gerektiği anlamına gelir.

Genel en iyi uygulamalar hakkında hiçbir fikrim yok, ancak kimse yardım edebilseydim bu tür şeyleri görmek istemem. :)

Web tarayıcıları ve sunucularında bir sürü önbellekleme malzemesi bulunur, bu yüzden en iyi seçeneğinizin sunucunuzun istemciye görüntü dosyalarını önbelleğe almasını söylemesini sağlamak olduğunu düşünürdüm. Bir sayfada gerçekten çok sayıda küçük resim yoksa, birden fazla isteğin ek yükünün bu kadar önemli olduğunu düşünmezdim. Tarayıcılar genellikle çok sayıda dosya istemek için aynı bağlantıyı kullanır, bu nedenle yeni ağ bağlantıları kurulmaz, bu nedenle HTTP üstbilgilerinden geçen trafik hacmi resim dosyalarının boyutuna kıyasla önemli olmadığı sürece birden fazla istek için çok fazla endişelenmem .

Şu anda sunucuya giden çok fazla istek olduğunu düşünmenizin nedenleri var mı?

Bunu çok sık kullanılan küçük resimler için öneririm, örneğin bir web uygulamasının genel simgeleri.

• Küçük, çünkü Base64 kodlaması boyutu büyütür
• Genellikle kullanılır, çünkü bu daha uzun ilk yükleme süresini haklı çıkarır

Elbette eski tarayıcılarla ilgili destek sorunları akılda tutulmalıdır. Ayrıca, GWT'nin ClientBundle'ı gibi bir veri url'lerini görüntülere otomatik olarak satır içi yapmak için bir çerçevenin yeteneğini kullanmak veya en azından doğrudan öğenin stiline eklemek yerine CSS sınıflarını kullanmak iyi bir fikir olabilir.

Daha fazla bilgi burada toplanmıştır: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/