CSS Sprites – przyspieszenie wczytywania ikon na stronie WWW
CSS Sprites jest to technika umożliwiająca wyświetlanie wszystkich często wykorzystywanych elementów graficznych na stronie internetowej z jednego pliku graficznego. Rozwiązanie daje wiele korzyści pod względem optymalizacji strony WWW. Oto krótka instrukcja jak tworzyć CSS sprites:
- Pierwszym etapem jest zebranie wszystkich ikon wykorzystywanych na stronie.
- Za pomocą programu graficznego np. Adobe Photoshop łączymy wszystkie pliki w jeden obraz.
Obrazy ustawiane są jako tło elementów HTML-owych. Z racji tego, że wszystkie grafiki tworzą jeden zbiorczy plik, za pomocą współrzędnych należy ustawić fragment obrazu, który ma się wyświetlać w odpowiednim miejscu.
Przykład:
Sprite social media
Jeden element ładowany jest szybciej niż większa ich ilość. Ilość zapytań wysyłanych do serwera jest ograniczona do minimum. Następnie w odpowiednich miejscach na stronie wyświetla się odpowiednią część utworzonego elementu.
Po otwarciu pierwszej strony, utworzony obraz CSS Sprite zapamiętywany jest w pamięci cache przeglądarki, co powoduje że nie musi się wczytywać za każdym razem od nowa. To z kolei przyspiesza ładowanie innych podstron korzystających z tego obrazu. Kolejną zaletą tego rozwiązania jest to, że wszystkie obrazki ładują się jednocześnie (bo tak naprawdę tworzą jeden plik) i nie ma efektu pojedynczo wczytujących się grafik, co wygląda nieestetycznie.
Tworząc ze wszystkich ikon jednego sprite’a można zaoszczędzić miejsce i transfer na serwerze, a także zredukować ilość wysyłanych przez stronę zapytań do wyszukiwarki (szybsze wczytywanie się stron – poprawa pozycji w rankingu Google).
