[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]

1. O ile GIF-ów się jeszcze używa o tyle JPEG-ki do tworzenia interfejsu? To chyba jakieś nieporozumienie. A to właśnie interfejsy się robi w CSS-ie.
2. Czemu niby jeden duży obraz, zawierający w sobie jedynie powiedzmy tylko odcienie szarości nie miałby się dać ładnie skompresować?
3. Nie widzę też powodu dla którego poszczególne obrazy w takiej mapie miałby mieć takie same wymiary - nie jest to konieczne do utworzenia takiej mapy. Oczywiście stała szerokość i wysokość nieco uprościłaby używanie jej. Zresztą zawsze można sobie taką mapę podzielić na siatkę o stałej szerokości - puste białe, prostokątne przestrzenie bardzo ładnie się kompresują więc nie będzie to problemem.
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.
5.

[CSS] pobierz, plaintext 
body {
  background-image: url(...);
}
 
#sth {
  background-image: url(...);
}
[CSS] pobierz, plaintext 

Jakim sposobem chciałbyś ustawić osobny nagłówek dla tła z body i #sth?
6. Co do tych proxy źle się wyraziłem. Oczywiście arkusze CSS zostaną poddane kompresji, ale obrazy w nich zawarte nie będą mogły być poddane kompresji stratnej - a to właśnie ona daje największego kopa.