Używam przezroczystego obrazu 1x1 z obrazem tła, aby móc używać sprite'ów i nadal podawać alternatywny tekst dla niektórych ikon.
Chcę użyć identyfikatora URI danych dla obrazu, aby zmniejszyć liczbę żądań HTTP, ale jaki byłby najmniejszy możliwy ciąg znaków, aby uzyskać przezroczysty obraz ?
Zdaję sobie sprawę, że mógłbym użyć URI danych do rzeczywistych obrazów zamiast sprite'ów, ale łatwiej jest to utrzymać, gdy wszystko jest przechowywane w CSS zamiast rozproszonego.
css
css-sprites
Jacob Rask
źródło
źródło
Odpowiedzi:
Po zabawie z różnymi przezroczystymi GIF-ami, niektóre są niestabilne i powodują błędy CSS. Na przykład, jeśli masz
<img>
i używasz najmniejszego możliwego przezroczystego GIF-a, działa dobrze, jednak jeśli chcesz, aby przezroczysty GIF miał znakbackground-image
, jest to niemożliwe. Z jakiegoś powodu niektóre pliki GIF, takie jak poniższe, uniemożliwiają wyświetlanie tła CSS (w niektórych przeglądarkach).Krótszy (ale niestabilny - 74 bajty)
Radziłbym użyć nieco dłuższej i stabilniejszej wersji w następujący sposób:
⇊ Stabilny ⇊ (ale nieco dłuższy - 78 bajtów)
Jako kolejna wskazówka, nie pomijaj,
image/gif
jak sugeruje jeden komentarz. To się zepsuje w kilku przeglądarkach.źródło
Ostateczna długość zależy od tego, z czym jest spakowany.
źródło
width: auto;
plikiem SVG przyjmuje szerokość swojego elementu nadrzędnego. Obraz statyczny, taki jak GIF lub PNG, po ustawieniu automatycznej stałej wysokości i szerokości, zachowa współczynnik proporcji.Myślę, że musi to być skompresowany, przezroczysty plik GIF 1x1 (82 bajty):
Wygenerowano na podstawie danych dopiaza.org: generator URI .
źródło
Najmniejszy PNG - 114 bajtów:
źródło
Ten facet rozwiązuje problem za pomocą specyfikacji GIF. Jego rozwiązanie dla tego
transparent.gif
byłoby 37 bajtów:Zbiera się jeszcze mniej, usuwając najpierw przezroczystość, a następnie tabelę kolorów ...
Specyfikacja GIF89a
Nagłówek (6 bajtów)
Logiczny deskryptor ekranu (7 bajtów)
Globalna tablica kolorów (6 bajtów)
Rozszerzenie kontroli grafiki (8 bajtów)
Deskryptor obrazu (10 bajtów)
Dane obrazu (5 bajtów)
GIF Trailer (1 bajt)
Źródło: Najmniejszy GIF w historii .
źródło
Możesz wypróbować następujące dane SVG (60 bajtów):
Samodzielny plik SVG wyglądałby tak (62 bajty):
Zobacz też:
źródło
content
To najmniejszy, jaki znalazłem (26 bajtów):
źródło
Aby uzyskać pusty obraz, używam następującego identyfikatora URI:
//:0
źródło
W przypadku pustego obrazu:
(to się przełoży na
src=(unknown)
)źródło