[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

[wNogachSpisz]

robi się wtedy trochę bałaganu w kodzie

Wg mnie nie, wystarczy napisać parser który zamieni uri w backgrund-image na content w base64 i odwrotnie, taka prekompilacja (IMG:style_emoticons/default/smile.gif) Sekunda roboty i żaden bałagan.

a co za problem pobawić się z 1 plikiem całego layoutu i ustawić background position?

Nie.
Najlepszy stosunek wielkości do jakości uzyskuje się w różnych formatach (PNG, GIF, JPEG) w zależności od własności danej grafiki.
Nie wspomne już o półprzeźroczystych PNG.
Takie rozwiązanie się nie nadaje kompletnie i musisz tutaj przyznać się do nie przemyślenia do końca tego co napisałeś..

Zresztą ja czasami jak siędzę na modemie gsm, to wyłączam wczytywanie obrazków, ale style zostawiam. W twoim wypadku niepotrzebnie pobiorę obrazek.

Z punktu widzenia usera -> Fail
Z punktu widzenia developera -> WIN :-]

Nie wiem skąd wziąłeś 3-4% ale to jest 1/3 czyli 33% około. Nie każdy serwer obsługuje kompresję gzip.

Base64-encoded data URIs are 1/3 larger in size than their binary equivalent. (However, this overhead is reduced to 2-3% if the HTTP server compresses the response using gzip)[6]

Sam sobie odpowiedziałeś, więc przemilcze :-]

- Dalej, IE8 ogranicza wielkość tego ciągu do 32kb... :[

Dobrze wiedzieć, mnie to nie odstarsza.
Mam tylko nadzieje, ze inne przeglądarki nie ograniczają tego jeszcze bardziej..
Na upartego można złożyć z kilku obrazków tworząc wzorcowy pomnik ludzkiego szaleństwa :-]
Tak czy inaczej, to jest bez wątpienia największy minus.

- Słabe cachowanie elementów.

Co przez to rozumiesz?
Wg mnie cachowanie jest bardzo dobre.

Ten post edytował wNogachSpisz 26.05.2011, 03:16:16