16 responses

  1. Athlan
    24 listopad 2009

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

  2. piotrooo89
    24 listopad 2009

    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.

  3. KrzyHu
    24 listopad 2009

    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,

  4. Spawnm
    24 listopad 2009

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

  5. piotrooo89
    24 listopad 2009

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

  6. Vokiel
    24 listopad 2009

    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

  7. SebaZ
    25 listopad 2009
  8. darek
    1 grudzień 2009

    Świetne rozwiązanie.

  9. cojack
    3 styczeń 2010

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

  10. LukasAMD
    23 styczeń 2010

    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.

  11. Cezary Tomczyk
    26 marzec 2010

    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.

  12. Vokiel
    27 marzec 2010

    @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

  13. Darek Grund
    19 wrzesień 2010

    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.

  14. Rachman
    21 styczeń 2012

    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ść ;)

  15. Mariusz
    22 maj 2013

    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.

  16. Jan177
    11 styczeń 2014

    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

Leave a Reply

 

 

 

Back to top
mobile desktop