CSS Sprites – combining multiple images in one reduce HTTP request

Sorry, this entry is only available in Polski.

 

Przeczytaj także

Komentarze: 16

Dodaj komentarz »

 
 
 

Technika stara jak świat, ale dobrze, że o niej wspominasz, bo wielu o niej nigdy nie słyszało/nie chce słyszeć.

 

Reply

 

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.

 

Reply

 

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,

 

Reply

 

Fajnie że napisałeś o tej ciekawej technice bo w małych stronach praktycznie niespotykana,
może w jakimś stopniu to się zacznie zmieniać 🙂

 

Reply

 

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. 🙂

 

Reply

 

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

 

Reply

 

Świetne rozwiązanie.

 

Reply

 

Stare jak świat, ale i tak mało popularne.

 

Reply

 

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.

 

Reply

Cezary Tomczyk
 

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.

 

Reply

 

@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

 

Reply

 

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.

 

Reply

 

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ść 😉

 

Reply

 

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.

 

Reply

 

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

 

Reply

 

Dodaj komentarz

 
(nie będzie publikowany)
 
 
Komentarz
 
 

Dozwolone tagi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
© 2009 - 2019 Vokiel.com
WordPress Theme by Arcsin modified by Vokiel