[CSS] background: url(data:image/ ...., czyli odejście od obrazków Opcje

[wNogachSpisz]

Ostatnio eksperymentuje z nowym (nowym dla mnie) podejściem do elementów graficznych layoutu strony.
Obrazki przechowuje w plikach .css w stylach background: url(data:image/png;base64,iVBORw0KGgo......)
zakodowane w base64..

Plusy:
- łatwiejsze grupowanie, znika potrzeba tworzenia map obrazków, nie pamiętam jak ta technika się nazwała, chodzi o to, że kiedy mamy wiele obrazków o małej wielkości, to celem unikniecia wielu połączeń z serweram, tworzymy jeden obrazek zawierający wszystkie mniejsze jeden obok drugiego, a potem przy pomocy stylu CSS background-position osadzamy je w dokumecie. Trzymając je w plikach .css ten problem znika
- omijamy algorytmy kompresujące na serwerach proxy, może to problem dotyczący niewielkiej ilości odwiedzających, ale z doświadczenia wiem, że np. sieci komórkowe obligatoryjnie kompresują wszystkie jpegi, przez co strona wygląda okropnie. Ten problem z pewnością będzie narastał w przyszłości.
- łatwiejsze zarządzenie cachowaniem HTTP,
- mniejsza ilość połączeń do serwera - oszczędność transferu
- szybsze ładowanie strony, mniej elementów do pobrania czy sprawdzenia aktualności cachu..

Minusy:
- 3-4% narzut wielkości (base64) - częściowo rekompensowany zmniejszoną ilością połączeń
- rozwiązanie mało konwencjonalne, przez co prawdopodobnie, gdzieś tam w świecie, jest platforma która tego nie wspiera (może jakieś urządzenie mobilne?)
- i jeszcze raz technika mało konwencjonalna, więc potencjalnie gorzej zoptymalizowana w przeglądarkach, przez co wolniejsza

Warto nie przekraczać granic absurdu, nie ma sensu galerii zdjęć ładować do plików .css
Jednak moim zdaniem jest to jest dobre miejsce dla wszystkich elementów graficznych podstawowego layoutu strony.


A jakie jest Wasze zdanie?

Ten post edytował wNogachSpisz 26.05.2011, 00:07:58

[erix]

Nie ma to jak puste białe przestrzenie....

Sęk w tym, że współcześnie stosowane formaty kompresji obrazów wykrywają jednolite przestrzenie albo się powtarzające. Również i JPEG, na podstawie predefiniowanych bloków 8x8px dobiera odpowiednie "kafelki", które kodują poszczególne elementy obrazu. Te puste białe przestrzenie zajmą niewiele miejsca. To nie jest jak w BMP, że każdy piksel musi być zakodowany dokładnie trzema bajtami. Format definiuje obszar "300x300 pikseli jest dokładnie białe i nic więcej". Nawet tak zapisane zdanie zajmuje mniej niż 90000 bajtów, nie?

Tak, JPEGi do interfejsów.

Zasada jest prosta, od paru lat - JPEG tylko i wyłącznie do zdjęć. Do 99.99999999999999% innych elementów nadaje się idealnie PNG, który - przy wykorzystaniu odpowiednich optymalizatorów - pozwala zejść dość nisko z wagą obrazków. GIF się już chyba nie stosuje, za skąpy. No chyba że chodzi o animacje, to co innego.

4. Masz rację co do tego, że takie mapy edytuje się niezbyt przyjemnie, ale taka jest ich cena. Cena za to, że pozbywamy się całej masy niepotrzebnych informacji (nagłówków z formatu PNG czy innego) które w każdej innej technice (włącznie z zapisywaniem obrazów w arkuszu) muszą być powielone dla każdego pliku.

Hmm, dlaczego musi być powielone? Ostatnio obiło mi się narzędzie do budowania sprite'ów oparte na algorytmach sztucznej inteligencji. (IMG:style_emoticons/default/wink.gif) Jeśli mnie zakładki nie mylą, to jest to: http://spritegen.website-performance.org/ Mit obalony.

Jako developer chce żeby moja strona wyglądała zawsze tak samo. Zysk na "zniszczeniu" grafiki przez wątpliwej jakości algorytm kopresujący nie będzie "kopem", przeciwnie, pracą na marne, w rezultacie jedna różnica to popsuty wygląd strony.

Ok, słuchasz muzyki z mp3, czy z FLAC? 90%, że nie zauważyłbyś różnicy między jednym a drugim, chyba że masz naprawdę wrażliwe ucho i dobry sprzęt. Tak samo z obrazami - bez kilkukrotnego powiększenia nie dostrzeżesz różnicy między dobrze zoptymalizowanym JPEG a BMP. Zmysły ludzkie mają to do siebie, że można je oszukać, przede wszystkim przez psychikę. A myślisz, że dlaczego są obrazki statyczne, które sprawiają wrażenie się poruszających? Wykorzystują właśnie to zjawisko.

Jeszcze potrzebujesz argumentów?