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:

Ź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