[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

[thek]

To nie jest jak w BMP, że każdy piksel musi być zakodowany dokładnie trzema bajtami

Ba... Zapomnijmy nawet, że bmp posiada wariant, który używa algorytmu RLE co potrafi znacząco zredukować rozmiar pliku (IMG:style_emoticons/default/wink.gif) No ale kto się nie interesuje, to nie wie i potem pisze na necie głupoty, że bmp jest zawsze 3 bajty x wysokośc x szerokość + nagłówek w wielkości pliku, jpg zawsze kaszani jakość ale jest mały, zaś png jest ogromny w porównaniu do jpg zawsze. To są właśnie mity. Wystarczy optymalizować, znając się na tym.

Co do podziału to erix utrafił w sedno. Jpg tylko tam, gdzie liczą się duże ilości przejść tonalnych, a więc do zdjęć. Niemal każde inne to png. Zwłaszcza w paletach o zredukowanej liczbie kolorów. Tutaj nawet gif może okazać się większy niż png. Gif został już jedynie do animacji, ale jeśli upowszechni się animated png to i on zniknie z rynku.

Prawda też z kompresją i jej współczynnikiem. Zapewne 95-99% ludzkości nie odróżni bmp od jpg ze współczynnikiem kompresji 80-85. Różnice zauważą dopiero około 70-75, bo wtedy zaczną ujawniać się artefakty związane z kwantyzacją i interpolacją kolorów. Co zaś do obrazków oszukujących, to jest to kwestia kultury, obycia, wychowania. Zazwyczaj bazują one bowiem na tym JAK postrzegamy otaczający świat i co już poznaliśmy by z obrazem skojarzyć. Jeśli ktoś jakiegoś elementu nie zna, to obraz nie będzie dla niego niezwykły.