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… 

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:

• < 256MB RAM:

  width * height ≤ 3 * 1024 * 1024

• >= 256MB RAM:

  width * height ≤ 5 * 1024 * 1024

Dokładniejsze zestawienie przedstawia poniższa tabela:

Urządzenie	Maksymalny rozmiar tekstury
iPod Touch	1024 x 1024
iPod Touch (Second Generation)	1024 x 1024
iPod Touch (Third Generation)	2048 x 2048
iPod Touch (Fourth Generation)	2048 x 2048
iPhone	1024 x 1024
iPhone 3G	1024 x 1024
iPhone 3GS	2048 x 2048
iPhone 4	2048 x 2048
Samsung GT-i9100 Galaxy S2	4096 x 4096
Google Nexus S	2048 x 2048
HTC EVO 4G+	4096 x 4096
HTC Vision (Desire Z)	4096 x 4096
LG P990 Optimus 2X	2048 x 2048
HTC G1	1024 x 1024
Barnes & Noble Nook color	2048 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. 

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”.
   
   
   
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 ) 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