Şeffaf bir görüntü için mümkün olan en küçük veri URI görüntüsü

125

Sprite kullanabilmek ve yine de bazı simgeler için alternatif metinler sağlayabilmek için arka plan resmine sahip şeffaf 1x1 resim kullanıyorum.

HTTP isteklerinin sayısını azaltmak için görüntü için bir veri URI'si kullanmak istiyorum, ancak saydam bir görüntü oluşturmak için mümkün olan en küçük dize nedir?

Gerçek görüntüler için sprite yerine veri URI'leri kullanabileceğimi fark ettim, ancak her şey etrafa dağılmak yerine CSS'de tutulduğunda bakımı daha kolay.

css css-sprites

— Jacob Rask
kaynak

1

Önbelleğe alma kurulumuyla gerçek bir 1x1 görüntü kullanmak daha iyi olmaz mıydı? Daha fazla http isteğiniz yok ve toplam veri ek yükü olarak görüntünün url'si 78 baytlık veri URI'sinden daha küçük olabilir.

— Redzarf

1

@Redzarf: Aslında, hayır muhtemelen daha iyi olmazdı. küçük, nadiren değişen kaynaklar, sayfa yükleme sürelerini dosya boyutundan değil, bir HTTP isteğinin gidiş gelişinden dolayı etkiler. Diğer bir incelik de, çoğu tarayıcının CSS'yi önbelleğe alma konusunda diğer kaynaklardan çok daha agresif olmasıdır, bu nedenle tarayıcının yenilenen css ile deneme yapma (ve böylece içeriğin gömülme) olasılığı daha düşüktür ve bu da daha fazla http gidiş-dönüşü tasarrufu sağlar.

— SingleNegationElimination

167

Farklı şeffaf GIF'lerle oynadıktan sonra, bazıları kararsızdır ve CSS hatalarına neden olur. Örneğin, bir <img>dosyanız varsa ve mümkün olan en küçük şeffaf GIF'i kullanıyorsanız, sorunsuz çalışır, ancak şeffaf GIF'inizin bir a sahip olmasını istiyorsanız background-image, bu imkansızdır. Bazı nedenlerden dolayı, aşağıdakiler gibi bazı GIF'ler CSS arka planlarını engeller (bazı tarayıcılarda).

Daha kısa (ancak kararsız - 74 bayt)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Biraz daha uzun ve daha kararlı sürümü aşağıdaki gibi kullanmanızı tavsiye ederim:

⇊ Kararlı ⇊ (ancak biraz daha uzun - 78 bayt)

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Başka bir ipucu olarak, image/gifbir yorumun önerdiği gibi atlamayın . Bu, birkaç tarayıcıda bozulacaktır.

— Layke
kaynak

1

+1 teşekkürler! Bunun kullanışlı olduğunu fark ettim. Bu eklentiyi oluşturmak için verilerinizi kullandım, böylece duyarlı tip görüntüleri yerel olarak arka plan kapağıyla veya include-

— Jason Sebring

1

Daha kısa olan neden "kararsız"? Bazen siyah bir görüntüye neden olduğunu görüyorum, sadece nedenini bilen var mı merak ediyorum.

— jvenema

Çok fazla acıdan sonra, aslında "daha kısa" sürümün, eski Android tarayıcılarda (HTC One S, OS 4.1) sitemdeki bazı (tümü değil) sayfalarda tarayıcıyı çökertmekte olduğunu fark ettim.

— WebSeed

Harika cevap ama şimdiye kadar mümkün olan en küçük cevap değil .

— Josh Habdas

22

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E

Son uzunluk, neyle sıkıştırıldığına bağlıdır.

— Adria
kaynak

3

SVG kullanımına karşı herhangi bir argüman var mı? İyi bir fikir olmadığı durumlar var mı?

— tremby

Bir SVG, birçok durumda iyidir, ancak width: auto;bir SVG ile birleştirildiğinde , üst öğesinin genişliğini alır. GIF veya PNG gibi statik bir resim, otomatik olarak sabit bir yükseklik ve genişlik verildiğinde, en boy oranını koruyacaktır.

— snazzybouche

16

Bunun sıkıştırılmış şeffaf 1x1 GIF dosyası (82 bayt) olması gerektiğini düşünüyorum:

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

Dopiaza.org verileri ile oluşturulmuştur : URI oluşturucu .

— KARASZI István
kaynak

14

En küçük PNG - 114 bayt:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

— joshcarr
kaynak

Bunun GIMP kullanılarak kolayca oluşturulabileceğinden bahsetmeye değer. Elde edilen dosyanın boyutu 68 bayt olacaktır (şimdiye kadar mümkün olan en küçük).

— Ismael Miguel

@AminahNuraini bu bir PNG.

— joshcarr

2

@AminahNuraini: Peki ya bu cevap size "SVG" diyor?

— Orbit'te Hafiflik Yarışları

10

Bu adam sorunu GIF spesifikasyonuyla çözüyor. Bunun için çözümü transparent.gif37 bayt olacaktır:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Önce şeffaflığı, ardından renk tablosunu kaldırarak daha da küçülür ...

GIF89a spesifikasyonu

Üstbilgi (6 bayt)

"GIF" baytlarından ve genellikle sürüm numarasından oluşur 89a.
Mantıksal Ekran Tanımlayıcısı (7 bayt)
Çok fazla ayrıntıya girmeden, dosyanın bu bölümü şunları gösterir:
- Dosya 1x1 piksel boyutundadır.
- Global bir renk tablosu var.
- Global renk tablosunda 2 renk vardır, ikincisi arka plan rengi olarak kullanılmalıdır.
Global Renk Tablosu (6 bayt)

Renk başına 3 bayttan, sırasıyla kırmızı, yeşil ve mavi için bir bayttan oluşur. Dosyamızda birinci renk beyaz ikinci renk siyahtır.
Grafik Kontrol Uzantısı (8 bayt)

Renk tablosundaki ikinci rengin şeffaf olarak değerlendirilmesi gerektiğini belirtmek için kullanılır (animasyon parametreleri için de kullanılabilir, ancak bu dosyada değildir).
Görüntü Tanımlayıcı (10 bayt)

Bir GIF dosyası aslında içinde birden fazla "görüntü" içerebilir, bu da sizi görüntünün arka plan rengiyle aynı renge sahip bölümleri için görüntü verileri belirtmek zorunda kalmaz. Her görüntü bloğunun genel görüntü boyutu içinde bir konumu ve boyutu vardır. Yukarıdaki dosyada konum 0,0 ve boyut 1x1'dir.
Görüntü Verileri (5 bayt)

Bir LZW kodlanmış görüntü verilerinin blok. Görüntünün içinde sahip olduğu tek pikseli temsil etmek 5 bayt alır. Sıkıştırma algoritması tek bir baytı çok iyi sıkıştırmak için tasarlanmamıştır.
GIF Fragmanı (1 bayt)

Onaltılık değeri 3B( ;ASCII'de) olan tek bir bayt , GIF'in sonunu gösterir.

Şeffaf bir GIF için gerekli yapılara dayanarak, 43 baytın alabileceğiniz kadar küçük olduğu ortaya çıkıyor.

Ancak, onu biraz daha küçültmek için bir numara bulmayı başardım. Standartta global bir renk tablosuna sahip olmanın isteğe bağlı olduğu belirtilmektedir. Elbette, renk tablosu olmadan bir GIF oluşturduğunuzda ne olacağı belirsizdir.

Bununla birlikte, şeffaf olarak tanımlanan bir renk tablosu dizininiz olduğunda, GIF kod çözücüleri aslında bir renk tablosu olmadığına aldırış etmiyor gibi görünüyor.

Bu yüzden mantıksal ekran tanımlayıcısını global renk tablosu olmadığını belirtecek şekilde değiştirdim ve tablonun kendisini kaldırarak toplam altı bayt tasarruf ederek dosya boyutunu yalnızca 37 bayta düşürdüm.

Yeterince ilginç bir şekilde, Wordpress, Firefox ve GIMP'nin hem açıp hem de görüntülemesine rağmen (şeffaf olduğunda "görüntüleniyor mu?) gayet iyi.

Daha da küçültmek için, görüntüde kalan en büyük "isteğe bağlı" bloğa, grafik kontrol uzantısına baktım. Şeffaflığa ihtiyacınız yoksa, bu bloğa artık ihtiyaç yoktur ve bu, başka bir 8 baytlık alırsınız.

Kaynak: Şimdiye Kadarki En Küçük GIF .

— mckamey
kaynak

1

Bu makaleye göre, 37 baytlık varyasyon tanımlanmamış davranışa dayanıyor ve aslında yazar, wordpress'in görüntü ayrıştırıcısının bunu kaldıramayacağından bahsediyor. Muhtemelen çoğu tarayıcıda çalışacak olsa da, bunun riskli bir seçim olduğunu düşünüyorum. Aynı makaleden 43 bayt varyasyonuna bağlı kaldım. Bunun bir çeşidi zaten yukarıda yayınlanmıştır . Ayrıca en üst cevaptaki

— Brian

9

Aşağıdaki SVG verilerini deneyebilirsiniz (60 bayt):

data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

Bağımsız svg dosyası şöyle görünecektir (62 bayt):

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

Ayrıca bakınız:

— kenorb
kaynak

2

Mayıs da olabilir kodlanmış ve site simgesi veya CSS kullanılan contentözellik.

— Josh Habdas

6

Bu bulduğum en küçük şey (26 bayt):

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

— KarasQ
kaynak

Bu, IE11'de siyah olarak karşımıza çıkıyor.

— tomasz86

4

Boş bir resim almak için aşağıdaki verileri kullanıyorum uri: //:0

— Jurgis
kaynak

Firefox 44 ve Internet Explorer 11, img alt etiketini gösterir. Ya yukarıdakilerden birini kullanmalı ya da alt etiketi kaldırmalısınız

— PersyJack

Bu, bir görüntü için bir istek / yanıttan daha verimli mi?

— nu everest

Yine de onaylanmayacak

— Lucian Davidescu

0

Boş resim için:

data:null

(tercüme edilecek src=(unknown))

— T.Todua
kaynak

Prensipte bunu beğendim, ancak w3c doğrulayıcısı pratikte onaylamıyor: Hata: Hatalı değer verisi: img öğesinde src özniteliği için boş: URI'nin erken sonu.

— brennanyoung