Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] background: url(data:image/ ...., czyli odejście od obrazków
wNogachSpisz
post
Post #1





Grupa: Zarejestrowani
Postów: 1 233
Pomógł: 87
Dołączył: 6.03.2009

Ostrzeżenie: (40%)
XX---


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
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
wNogachSpisz
post
Post #2





Grupa: Zarejestrowani
Postów: 1 233
Pomógł: 87
Dołączył: 6.03.2009

Ostrzeżenie: (40%)
XX---


Cytat(Crozin @ 30.05.2011, 01:02:09 ) *
Jaka różnorodność formatów?

JPEG, PNG, PNG-semi-transparent, GIF

Cytat(Crozin @ 30.05.2011, 01:02:09 ) *
Przecież na chwilę obecną wykorzystuje się praktycznie wyłącznie PNG.

A JPEG?

Cytat(Crozin @ 30.05.2011, 01:02:09 ) *
Co więcej da się to bardzo dobrze skompresować

Nie da się, a już na pewno nie da się tego zrobić BARDZO dobrze.

Cytat(Crozin @ 30.05.2011, 01:02:09 ) *
- przecież możesz sobie stworzyć kilka takich map w których znajdą się odpowiednie obrazy.

Tak, pod warunkiem ze każdy składowy obrazek nie będzie miał więcej kolorów niż inny oraz będzie miał taką samą szerokość (lub w ostateczności wyskości, tyle że wtedy modyfikacja spritu to koszmar). W praktyce bardzo mocno ogranicza to sytuacjie w którym można efektywnie wykorzystać tę technikę.

Cytat(Crozin @ 30.05.2011, 01:02:09 ) *
- 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,

Możesz dowolnie zarządzać cachem zarówno przez htaccess jak i nagłówki HTTP np. wygenerowane przez skrypt php.

Cytat(Crozin @ 30.05.2011, 01:02:09 ) *
- brak cache'owania przez pośredniczące serwery

Od kiedy to proxy nie cachują CSS? Co za bzdury wygadujesz??

Ten post edytował wNogachSpisz 30.05.2011, 11:41:08
Go to the top of the page
+Quote Post

Posty w temacie
- wNogachSpisz   [CSS] background: url(data:image/ ....   25.05.2011, 23:57:23
- - bim2   I tak i nie. Ogólnie, to robi się wtedy trochę bał...   26.05.2011, 01:22:55
- - wNogachSpisz   Cytat(bim2 @ 26.05.2011, 02:22:55 ) r...   26.05.2011, 03:00:22
- - bim2   CytatZ punktu widzenia usera -> Fail Z punktu w...   26.05.2011, 06:14:57
- - wNogachSpisz   Cytat(bim2 @ 26.05.2011, 07:14:57 ) T...   26.05.2011, 11:44:48
- - bim2   CytatA kto powiedzial że musisz wszystko trzymać w...   26.05.2011, 13:52:01
- - wNogachSpisz   Cytat(bim2 @ 26.05.2011, 14:52:01 ) W...   28.05.2011, 11:11:12
- - erix   CytatSens nie ulega zmianie. Zamiast jednego pliku...   28.05.2011, 13:12:15
- - wNogachSpisz   Cytat(erix @ 28.05.2011, 14:12:15 ) P...   28.05.2011, 15:18:31
- - erix   CytatNie rozumiem co ma keep-alive do ilości plikó...   28.05.2011, 15:44:49
- - wNogachSpisz   Cytat(erix @ 28.05.2011, 16:44:49 ) M...   28.05.2011, 18:25:25
- - konole   Ta technika nazywa się spritem i jest o wiele wygo...   29.05.2011, 09:10:14
|- - by_ikar   Cytat(konole @ 29.05.2011, 10:10:14 )...   29.05.2011, 17:59:28
- - konole   Właśnie, największym problemem będzie aktualizacja...   29.05.2011, 19:17:00
- - wNogachSpisz   Cytat(by_ikar @ 29.05.2011, 18:59:28 ...   29.05.2011, 23:29:08
- - Crozin   CytatSprity się nie nadają ze względu na różnorodn...   30.05.2011, 00:02:09
- - wNogachSpisz   Cytat(Crozin @ 30.05.2011, 01:02:09 )...   30.05.2011, 11:40:08
- - Crozin   1. O ile GIF-ów się jeszcze używa o tyle JPEG-ki d...   30.05.2011, 12:07:36
- - wNogachSpisz   Cytat(Crozin @ 30.05.2011, 13:07:36 )...   30.05.2011, 15:13:49
- - Crozin   Wybacz ale jeżeli najpierw rzucasz jakieś hasła, a...   30.05.2011, 19:01:46
- - konole   wNogachSpisz, nie rozumiem ciebie. Chcesz coś prze...   30.05.2011, 19:10:40
- - melkorm   Odnośnie problemów z generowaniem CSS Sprites : Ge...   30.05.2011, 20:04:24
- - thek   CytatJPEG, PNG, PNG-semi-transparent, GIFZapomniał...   30.05.2011, 22:11:45
- - erix   CytatNie ma to jak puste białe przestrzenie.... Sę...   31.05.2011, 16:26:41
- - Crozin   CytatHmm, dlaczego musi być powielone? Ostatnio ob...   31.05.2011, 16:38:11
- - thek   CytatTo nie jest jak w BMP, że każdy piksel musi b...   31.05.2011, 21:09:54
- - erix   CytatBa... Zapomnijmy nawet, że bmp posiada warian...   31.05.2011, 21:58:25
- - thek   CytatEch, nie chodzi mi tu o to, aby się popisywać...   31.05.2011, 23:05:45
- - everth   Odkopię temat. Zastanawiam się nad tytułowym rozwi...   8.08.2011, 20:59:01


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.10.2025 - 11:34