Najmniejszy możliwy obraz URI danych dla przezroczystego obrazu

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.

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ł znak background-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)

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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)

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

Jako kolejna wskazówka, nie pomijaj, image/gifjak sugeruje jeden komentarz. To się zepsuje w kilku przeglądarkach.

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

Ostateczna długość zależy od tego, z czym jest spakowany.

Myślę, że musi to być skompresowany, przezroczysty plik GIF 1x1 (82 bajty):

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

Wygenerowano na podstawie danych dopiaza.org: generator URI .

Najmniejszy PNG - 114 bajtów:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Ten facet rozwiązuje problem za pomocą specyfikacji GIF. Jego rozwiązanie dla tego transparent.gifbyłoby 37 bajtów:

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

Zbiera się jeszcze mniej, usuwając najpierw przezroczystość, a następnie tabelę kolorów ...

Specyfikacja GIF89a

• Nagłówek (6 bajtów)

  Składa się z bajtów „GIF” i numeru wersji, którym zwykle jest 89a.

• Logiczny deskryptor ekranu (7 bajtów)

  Bez wchodzenia w szczegóły ta sekcja pliku zawiera następujące informacje:

  • Plik ma rozmiar 1x1 pikseli.
  • Istnieje globalna tabela kolorów.
  • W globalnej tablicy kolorów są 2 kolory, drugi powinien być użyty jako kolor tła.

• Globalna tablica kolorów (6 bajtów)

  Składa się z 3 bajtów na kolor, bajtu odpowiednio dla czerwonego, zielonego i niebieskiego. W naszym pliku pierwszy kolor to biały, a drugi to czarny.

• Rozszerzenie kontroli grafiki (8 bajtów)

  Służy do wskazania, że ​​drugi kolor w tabeli kolorów powinien być traktowany jako przezroczysty (może być również użyty do parametrów animacji, ale nie ma go w tym pliku).

• Deskryptor obrazu (10 bajtów)

  Plik GIF może w rzeczywistości zawierać wiele „obrazów”, dzięki czemu nie musisz określać danych obrazu dla części obrazu, które mają ten sam kolor co kolor tła. Każdy blok obrazu ma położenie i rozmiar w ramach ogólnego rozmiaru obrazu. W powyższym pliku pozycja wynosi 0,0, a rozmiar 1x1.

• Dane obrazu (5 bajtów)

  Jeden blok danych obrazu zakodowany w LZW . Przedstawienie pojedynczego piksela zawartego w obrazie zajmuje 5 bajtów. Algorytm kompresji nie został zaprojektowany do bardzo dobrej kompresji pojedynczego bajtu.

• GIF Trailer (1 bajt)

  Pojedynczy bajt z wartością szesnastkową 3B( ;w ASCII) wskazuje koniec GIF.

Opierając się na strukturach wymaganych dla przezroczystego GIF-a, okazuje się, że 43 bajty to prawie tak małe, jak to tylko możliwe.

Ale udało mi się wymyślić jedną sztuczkę, aby ją nieco zmniejszyć. W standardzie wspomniano, że globalna tabela kolorów jest opcjonalna. Oczywiście nie jest zdefiniowane, co się dzieje, gdy tworzysz GIF bez tabeli kolorów.

Kiedy masz indeks tablicy kolorów zdefiniowany jako przezroczysty, dekodery GIF nie przejmują się tym, że w rzeczywistości nie ma tabeli kolorów.

Więc zmieniłem logiczny deskryptor ekranu, aby wskazać, że nie ma globalnej tablicy kolorów, i usunąłem samą tabelę, oszczędzając w sumie sześć bajtów, zmniejszając rozmiar pliku do zaledwie 37 bajtów.

Co ciekawe, Wordpress dał mi uroczą listę komunikatów o błędach GD narzekających, że to nie jest prawidłowy plik GIF, pomimo faktu, że Firefox i GIMP zarówno otwierają, jak i wyświetlają (czy jest „wyświetlany”, gdy jest przezroczysty?) w porządku.

Aby uczynić go jeszcze mniejszym, przyjrzałem się największemu pozostałemu „opcjonalnemu” blokowi obrazu, rozszerzeniu kontroli grafiki. Jeśli nie potrzebujesz przezroczystości, ten blok nie jest już potrzebny, a to kolejne 8 bajtów, które możesz zabrać.

Źródło: Najmniejszy GIF w historii .

Możesz wypróbować następujące dane SVG (60 bajtów):

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

Samodzielny plik SVG wyglądałby tak (62 bajty):

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

Zobacz też:

• Optymalizacja plików SVG w identyfikatorach URI danych
• Koder adresu URL dla SVG ( GitHub ) / SVG CSS URI - zoptymalizowany zamiennik

To najmniejszy, jaki znalazłem (26 bajtów):

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

Aby uzyskać pusty obraz, używam następującego identyfikatora URI: //:0

W przypadku pustego obrazu:

data:null

(to się przełoży na src=(unknown))