Powrót do kategorii
Frontend
tagi
css, css sprites, css3, html5,

Ograniczenia CSS Sprites, czyli optymalizacja z rozsądkiem

Artur
Artur, 16/02/2015

Optymalizacja jest niezbędnym elementem tworzenia aplikacji internetowych. W dobie błyskawicznie rosnącej liczby użytkowników korzystających do przeglądania Internetu z urządzeń mobilnych o różnych parametrach, w różnych miejscach, przy użyciu łącz o różnej przepustowości, optymalizacja ma wręcz znaczenie krytyczne. Jedną z bardzo popularnych technik ograniczenia ilości zapytań do serwera jest łączenie wielu obrazków w jeden (CSS Sprites). Jednakże ze względu na ograniczenia urządzeń optymalizować trzeba również optymalnie… (wink)

Maksymalny rozmiar tekstury

CSS Sprites stworzone ze znacznej ilości mniejszych obrazków daje bardzo wymierne korzyści dopóki wymiary wynikowego pliku nie przekroczą wartości maksymalnych dla danego urządzenia wynikających z ilości dostępnej pamięci RAM. Apple podaje[1], że maksymalne wymiary plików GIF, PNG oraz TIFF dla urządzeń z:

Dokładniejsze zestawienie przedstawia poniższa tabela:

UrządzenieMaksymalny rozmiar tekstury
iPod Touch1024 x 1024
iPod Touch (Second Generation)1024 x 1024
iPod Touch (Third Generation)2048 x 2048
iPod Touch (Fourth Generation)2048 x 2048
iPhone1024 x 1024
iPhone 3G1024 x 1024
iPhone 3GS2048 x 2048
iPhone 42048 x 2048
Samsung GT-i9100 Galaxy S24096 x 4096
Google Nexus S2048 x 2048
HTC EVO 4G+4096 x 4096
HTC Vision (Desire Z)4096 x 4096
LG P990 Optimus 2X2048 x 2048
HTC G11024 x 1024
Barnes & Noble Nook color2048 x 2048

Źródło: http://hellomobiledevworld.blogspot.co.uk/2011/09/sprite-sheets-and-maximum-texture-size.html [2]

Przekroczenie wartości maksymalnych powoduje, że w najlepszym wypadku grafika będzie niewyraźna i przeskalowana lub nawet urządzenie całkowicie się zawiesi. (wink)

Sposoby przeciwdziałania

  1. Duże zagęszczenie obrazków
    Trzeba się postarać, żeby jak najwydajniej zagospodarować wolną powierzchnię wynikowego pliku CSS Sprites. Znakomicie w tym celu sprawdza się plugin „grunt-spritesmith” z zastosowanym algorytmem „binary tree”.
    sprites
  2. Rozdzielenie na kilka plików
    Przy tworzeniu CSS Sprites znacznych wymiarów, warto podzielić je tematycznie na kilka plików (oczywiście nie za dużo, bo straci to cały sens sprite’ów (wink)) np. ikonki, pozostałe itp.

Podsumowanie

Optymalizację bardzo dużej ilości plików przy pomocy CSS Sprites należy rozplanować z rozsądkiem. Warto podzielić pliki tematycznie oraz każdy plik sprite „gęsto upakować”, żeby posiadał jak najmniejsze wymiary. Idealnie byłoby nie przekraczać 1024px x 1024px, jednak w dobie szybkiego rozwoju rynku mobilnego, 2048px x 2048px jest wartością obecnie wg. mnie dość bezpieczną. Należy pamiętać, że dla wyświetlaczy retina obrazki stosuje się o wymiarach 2x większych. Niezależnie od rozdzielczości grafiki niezbędne jest poddanie jej kompresji, ponieważ nawet najlepiej upakowany CSS Sprite o optymalnych wymiarach, a nieskompresowany, będzie dłużej ładowany przez przeglądarkę.

Bibliografia

[1] Creating Compatible Web Content

[2] Sprite sheets and Maximum texture size

Materiały pomocnicze

CSS Sprites

Grunt Spritesmith

Podobne artykuły

Zalety stosowania zasady „Mobile first“ przy tworzeniu stron RWD

O zaletach koncepcji „Mobile first” i tworzenu RWD zaczynając od urządzeń mobilnych.

Dlaczego pisanie wysokiej jakości kodu HTML5 ma znaczenie?

O tym jak ważny jest poprawnie napisany kod HTML