[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

[Crozin]

Sprity się nie nadają ze względu na różnorodność formatów i wymiarów obrazków. Nie da się ich efektywnie kompresować

Jaka różnorodność formatów? Przecież na chwilę obecną wykorzystuje się praktycznie wyłącznie PNG. Co więcej da się to bardzo dobrze skompresować - przecież możesz sobie stworzyć kilka takich map w których znajdą się odpowiednie obrazy. Dzięki temu z jednej uda Ci się pozbyć kanału alpha, z drugiej jakiegoś tam zakresu barw itd. - wątpię by udało Ci się uzyskać lepszy stopień kompresji.
Co do łatwości edycji... CSS Sprites używa się raczej tam gdzie wydajność ma kluczowe znaczenie co z definicji oznacza, że nie może to być zbyt wygodne.

Co więcej:
- brak możliwości jakiegokolwiek indywidualnego zarządzania cachem - jest się skazanym na ustawienia dla arkusza - to może być w pewnych sytuacjach nieco problematyczne,
- brak cache'owania przez pośredniczące serwery - niestety samemu czasami muszę włączyć sobie Operę Turbo by móc w miarę humanitarnie korzystać z Internetu i bardzo irytowałby mnie jeżeli nie mógłbym z tego skorzystać.