24
NOV
2009
2009
CSS Sprites – combining multiple images in one reduce HTTP request
Dodano w: CSS | przez Vokiel | 16 Komentarzy »
Sorry, this entry is only available in Polski.
Sorry, this entry is only available in Polski.
Technika stara jak świat, ale dobrze, że o niej wspominasz, bo wielu o niej nigdy nie słyszało/nie chce słyszeć.
Bardzo często korzystam z tego rozwiązania zwłaszcza przy programowaniu nowych funkcjonalności do aplikacji formowych w których bądź co bądź potrzebne jest szybkie ładowanie. Jak napisałeś skracamy do niezbędnego minimum HTTP requesty dzięki czemu aplikacja działa szybciej, jak obrazki będą dodatkowo zaczaczowae (nie wiem jak to odmienić :P) to naprawdę poprawia wydajność. Jednak obsługa tego typu rzeczy dla osób początkujących jest troszkę problematyczna i trzeba się do niej przyzwyczaić. Choć w aplikacjach firmowych stosuje właśnie Spritsy to jeśli pisze jakaś strona dla prywatnego odbiorcy to używam normalnie pociętej grafiki ładowanej osobno.
Pozdrawiam, Piotrek.
Bardzo dobry artykuł.
Wypada też wspomnieć że ta technika ma w niektórych sytuacjach też pewne ograniczania, np kiedy próbujemy stworzyć skalowalny layout, wymaga używania nadmiarowych znaczników w kodzie HTML,
Fajnie że napisałeś o tej ciekawej technice bo w małych stronach praktycznie niespotykana,
może w jakimś stopniu to się zacznie zmieniać 🙂
niespotykana bo nie ma aż takiej potrzeby oszczędności zapytań. Ja początkowo sceptycznie podchodziłem do tego ‘myku’ , związane to było raczej z problemem z poradzeniem sobie z ładnym i precyzyjnym wy pozycjonowaniu tych elementów na stronie, jednak jak się już nabierze wprawy to światopogląd się zmienia i coś czego się nie używało staje się standardem. 🙂
Z pozycjonowaniem bywają problemy, czasem pozostaje tylko dodanie kolejnego znacznika, który będzie zawierał wyłącznie dany obrazek.
Czasem trzeba przerobić obrazek, a tego najbardziej nie lubię. Włączenie photoshopa, przesunięcie paru ikonek, eksport grafiki, podmiana, zmiana pozycjonowania w css, aż się odechciewa…
Możliwości tworzenia widzę dwie:
1. Przygotowanie zawczasu odpowiednich grafik, później tworzenie css’a już pod nie
2. Tworzenie serwisu “po staremu”, a na koniec przerobienie elementów, które się da na css sprites. Pomocnym może się okazać narzędzie: SpriteMe
http://perfectionorvanity.com/2006/06/08/jeszcze-lepszy-efekt-rollover-w-css/
Świetne rozwiązanie.
Stare jak świat, ale i tak mało popularne.
Ja się o tym dosyć niedawno dowiedziałem. No i od razu stałem się fanem tego rozwiązania – naprawdę nieźle czuć idące ze sprite’ami przyśpieszenia ładowania strony.
Co prawda przy wolniejszych łączach i sporej ilości grafiki trzeba czasem nieco poczekać aby np. logo się pokazało, ale sumarycznie i tak działa to bardzo dobrze.
Można jeszcze zastanowić się nad techniką zwaną “parallel downloads”. Chodzi o to, że każda przeglądarka ma określoną ilość możliwych jednocześnie połączeń per hostname. Przykładowo Firefox może nawiązać maksymalnie 6 połączeń jednocześnie. Jednak jeśli utworzymy subdomenę np. grafika.domena.pl i przekierujemy ją na katalog z ów grafiką, to zwiększamy ilość ładowanych jednocześnie elementów do 12-stu.
Innymi słowy ładowana jest jednocześnie zawartość z domeny domena.pl i grafika.domena.pl.
Warto zajrzeć na http://www.browserscope.org/, aby dowiedzieć się ile maksymalnych połączeń per hostname dana przeglądarka może wykonać jednocześnie.
@Cezary, racja, można zastosować taką technikę, jednak nie można przesadzać z ilością subdomen. Większa ilość powoduje zwiększenie odwołań DNS, co wpływa niekorzystnie na szybkość ładowania strony.
Kilka dodatkowych źródeł dla poszerzenia tematu:
http://www.websiteoptimization.com/speed/tweak/parallel/,
http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/,
http://developer.yahoo.com/performance/rules.html#dns_lookups
Najlepszy artykuł jaki czytałem o sprite’ach. Bez zbędnych ochów i achów jakież to sprite jest cudowne – a tak jest w każdym artykule który widziałem. Wydaje mi się, że ludzie którzy piszą takie teksty sami nie bardzo mają pojęcie o tworzeniu stron. A u Ciebie jest takie zdrowe podejście do tematu, bardzo mi się to podoba.
Moim zdaniem Sprite to nie jest aż taka rewolucja, a jej stosowanie w wielu przypadkach jest zupełnie zbędne i tylko wydłuża czas pracy nad stroną. Zalety Sprite, które opisałeś w tym artykule są chyba wszystkimi zaletami tej techniki. Niemniej jednak, warto znać tą technikę, bo w naszej branży jeżeli ktoś szybko idzie, to stoi w miejscu, tutaj niestety trzeba biec za nowościami.
Dzięki za art, świetnie opisane. Od dawna znam tę technikę ale nie stosuję. Przy tworzeniu mniejszych serwisów mało osób ją stosuje. Niemniej warto się zapoznać z tematem i pamiętać na przyszłość 😉
Wszystko fajnie ale moglby mi ktos teraz napisac jak zlinkowac te wszystkie obrazki ktore sa w html. Poniewaz zrobilem sprite, ale chcicalbym zeby obrazki sie powiekszaly do tego posluzyl mi shadowbox.
Potrzebuję osoby, która pomoże wykonać projekt z informatyki. Mój temat to” SPRITE – grafika komputerowa, co to jest , do czego sie wykorzystuje”. Potrzebuję nauczyć się i stworzyć animowanego spritea. Oczywiście nie za darmo. Prosze o pomoc. kontakt: jan177@op.pl