Istnieje wiele metod optymalizacji stron internetowych. Część z nich działa, część nie. Istnieją jednak pewne metody, które są obowiązkowe w przypadku każdej witryny i bloga. Chciałem z tobą porozmawiać o jednym z nich.

Jedna z głównych metod optymalizacji stron internetowych. Dlatego dzisiaj porozmawiamy o tym, jak połączyć sprite'y graficzne na stronie internetowej w CSS, zwiększając w ten sposób prędkość ich ładowania.

Trochę historii

W odległej, odległej przeszłości, kiedy modemy piszczały w mieszkaniach, a prędkość połączenia nie przekraczała 5 Kb/s, ludzie zastanawiali się nad trudnym zadaniem, jak przyspieszyć ładowanie stron bez płacenia wygórowanych sum za ruch przychodzący. Myśleli, czyli myśleli i wpadli na pomysł skomponowania wykorzystanych na stronie obrazków w sprite'y.

I odchodzimy...

Łączenie obrazów w ikonkę

I tak, jak już wcześniej ustaliliśmy, duszek to kilka obrazów ułożonych w jeden na przezroczystym tle, dostępnych za pomocą właściwości CSS pozycja tła. Ale proszę nie mylić tego z kolażem. Duszek ≠ kolaż.

Aby uzyskać duszka, musisz zmieścić wszystkie przyciski, ikony, wypunktowania i inne badziewie tak kompaktowo, jak to możliwe, w jednym pliku PNG. Nie zapominaj, że tło musi być przezroczyste. Teraz spójrzmy na to na przykładzie.

Załóżmy, że mamy plik PSD z tak pięknym przyciskiem w 3 stanach.

Co robi przeciętny bloger zajmujący się układem-samoukiem? Wycina przycisk w każdym stanie i zapisuje go w osobnych plikach. Czyli jednym przyciskiem robię 3 zdjęcia temu miłemu panu. A jeśli się zestresujesz, pamiętaj, że każde zdjęcie na stronie to dodatkowe żądanie HTTP, które ładuje serwer i Twój blog działa coraz wolniej i wolniej i wolniej i wolniej i wolniej i wolniej...

Aby temu zapobiec, jest to o wiele bardziej logiczne zapisz przycisk w jednym pliku. Aby to zrobić, otwieramy ten sam plik PSD, usuwamy z niego niepotrzebne strzałki, etykiety i tło i układamy wszystkie stany przycisków jak najbliżej siebie, bez nakładania się.

Na tym właśnie zakończyliśmy. W żadnym wypadku przyciski nie powinny na siebie zachodzić.

Świetnie, przygotowaliśmy plik graficzny, teraz pokażę Ci jak go ułożyć.

Układ Sprite'a

Układ ikonek CSS nie różni się od układu zwykłych obrazków, z wyjątkiem jednego ALE. Musisz znać nie tylko dokładny rozmiar obrazu, który chcesz wyświetlić, ale także jego współrzędne. Na przykład cały nasz duszek ma szerokość 330 pikseli i wysokość 150 pikseli.

Ale wystarczy wyświetlić przycisk o szerokości 227 px i wysokości 41 px, podając jego dokładne współrzędne. Jeśli nie masz dobrego edytora HTML, ja mogę.

Utwórz plik indeks.html i wpisz w nim niezbędne linie kodu, typ dokumentu i tak dalej.

Po wykonaniu wszystkich standardowych kroków spróbujmy wyświetlić nasz przycisk.

Po tagu ciało utwórz kontener div z klasą przycisk– to będzie nasz przycisk.

W tym miejscu kończy się nasz HTML i teraz musimy dodać style CSS dla przycisku.

Poniższy kod pokazuje, że najpierw deklarujemy klasę przycisk. Następnie użyj właściwości wysokość i szerokość ustaw rozmiar naszego przycisku. Nieruchomość tło pozwala nam wybrać plik, którego użyjemy jako duszka, oraz pozycja tła ustaw współrzędne obrazu, którego potrzebujemy w tym duszku. To proste.

Przycisk (wysokość: 41 pikseli; szerokość: 227 pikseli; tło: adres URL (img/sprite.png); pozycja tła: 0 pikseli -12 pikseli;)

Przyjrzyjmy się bliżej nieruchomości pozycja tła.

Jak widać z powyższego kodu, ma on dwa znaczenia. Pierwsza wartość pozwala ustawić współrzędne obrazu wzdłuż osi X, a zatem druga wzdłuż osi Y. Nasz przycisk nie przeskakuje nigdzie wzdłuż osi X, ponieważ wszystkie stany znajdują się pod sobą. Dlatego też, aby po najechaniu kursorem pojawił się drugi stan przycisku, musimy zmienić wartość odpowiedzialną za oś Y.

Przycisk: najechanie (pozycja tła: 0px -56px;) .button:aktywny (pozycja tła: 0px -98px;)

Jak wiadomo, a jeśli nie, to tak, każdy przycisk ma kilka stanów.

1. Normalny – stan normalny lub normalny
2. Hover – stan przycisku po najechaniu kursorem
3. Aktywny – stan przycisku po naciśnięciu

Skorzystaliśmy z tych właściwości.

Jeśli jesteś zbyt leniwy, aby ręcznie tworzyć sprite'y i ogólnie zawracasz sobie głowę Photoshopem, pomoże Ci wspaniała bezpłatna usługa: spritepad.wearekiss.com. Po prostu wrzuć niezbędne zdjęcia do obszaru roboczego, a utworzy się dla Ciebie duszek.

W areszcie

Sprite CSS to bardzo ważny krok w przyspieszaniu działania serwisu. Traktuj go z należytym szacunkiem i staraj się go używać wszędzie.

W dziale aktualności ogłosiłem tłumaczenie interfejsu generatora sprite'ów - darmowego programu przeglądarkowego, który służy do tworzenia sprite'ów CSS, które implementują nową progresywną technologię zwiększania szybkości ładowania stron internetowych. W tej recenzji przyjrzymy się dwóm kolejnym programom do automatycznego tworzenia (generowania) ikonek, które wydajnie i skutecznie łączą obrazy w ikonki CSS. Opisane programy pozwalają nie tylko łatwo i prosto tworzyć sprite'y CSS, ale także tworzyć fragmenty stylów ze współrzędnymi sprite'ów, co umożliwia również łatwe i proste umieszczanie sprite'ów CSS na stronie internetowej.

Ale najpierw trochę o spriteach CSS. Często nazywane są także ikonkami internetowymi lub ikonkami HTML. Po raz pierwszy zetknąłem się z tą technologią, gdy postanowiłem sprawdzić prędkość ładowania moich stron. Moje strony są małe, szczególnie niezaładowane niczym i otwierają się dość szybko. Mimo to chciałem sprawdzić. Narzędzie Google Page Speed ​​i podobne narzędzie YSlow firmy Yahoo dały mi listę zaleceń dotyczących poprawy szybkości ładowania strony. Wśród tych zaleceń znalazła się chęć połączenia obrazów zamieszczonych na stronie w ikonki. Tak zaczęła się moja przygoda ze spriteami CSS.

Co to są spritey CSS i jak z nich korzystać? Podstawą tej metody jest połączenie wielu obrazów umieszczonych na stronie internetowej w jeden złożony obraz mozaikowy. Głównym warunkiem tworzenia i używania sprite'ów CSS jest możliwość wykorzystania tego zestawu obrazków jako wstawek tła na stronie. Zazwyczaj obrazy te przedstawiają różne logo, ikony, przyciski i inne graficzne elementy nawigacji i sterowania. Jeśli te zdjęcia można wykorzystać nie tylko jako grafikę z tagiem , ale także jako obrazy tła ze stylizacją obraz tła: adres URL (xxxxxxxx...), to tworzenie i używanie sprite'ów css nasuwa się samo (pamiętaj, że wspomniana możliwość jest prawie zawsze dostępna). Niektóre źródła (zarówno zagraniczne, jak i krajowe) nazywają docelowy obraz złożony duszkiem wzorcowym, czasem arkuszem ikonek. Ja również będę się trzymał tej terminologii. Dalsze wykorzystanie potrzebnego nam konkretnego obrazu ze sprite'a wzorcowego na stronie internetowej odbywa się za pomocą pozycjonowania za pomocą CSS. Cały trik tej technologii polega na znacznym ograniczeniu żądań HTTP dotyczących pobierania obrazów. Zamiast kilku (czasem kilkudziesięciu lub więcej) próśb o pobranie pojedynczych obrazów, pojawia się tylko jedno żądanie pobrania tego złożonego obrazu mozaiki. Pomimo większego rozmiaru tego obrazu, czas jego ładowania jest nieporównywalnie krótszy niż czas wymagany dla wielu żądań HTTP dotyczących pojedynczych obrazów i ich pobrania. Korzystanie ze sprite'ów CSS pozwala znacznie zwiększyć prędkość ładowania obrazów, dzięki czemu sama strona, na której zastosowano sprite'y CSS, otwiera się w przeglądarce znacznie szybciej. Dodatkową zaletą tej metody jest bardzo prosta implementacja efektu rollover obrazów bez użycia skryptów (wyłącznie przy użyciu CSS), co może być przydatne przy tworzeniu efektownych i stylowych menu, przycisków sterujących i innych elementów graficznych wykorzystywanych na stronach internetowych.

Przy okazji, o CSS. Wykorzystanie poszczególnych, specyficznych obrazów na stronie, które składają się na łączony obraz złożony, odbywa się za pomocą właściwości pozycja tła. Właściwość ta określa położenie poziome i pionowe obrazu tła w elemencie użytym do jego umieszczenia. Wartościami właściwości mogą być słowa kluczowe lub wartości określone w pikselach lub procentach. Podczas korzystania ze sprite'ów CSS zwykle używane są dokładne wartości pikseli. Pierwsza wartość to współrzędna pozioma (x), druga to współrzędna pionowa (y). Zgodnie ze specyfikacją CSS ta właściwość dotyczy elementów blokowych i zastępczych. W praktyce sprite'y są często używane w elementach wbudowanych , który jest blokowany przy użyciu właściwości Blok wyświetlacza aby ustawić szerokość i wysokość. Dla tych elementów ustawiana jest właściwość tła z niezbędnymi współrzędnymi (położenie tła). Mówiąc krótko i z grubsza, są to współrzędne (lokalizacja) małego obrazka, którego potrzebujemy na dużym płótnie ogólnego złożonego obrazu duszka. Dzięki tej właściwości oraz sztywno określonej wysokości i szerokości elementu, w którym zastosowano duszka, zapewniona jest wizualizacja obrazu, którego potrzebujemy w tym elemencie. Skupiam się na tym, że nieruchomość pozycja tła zapewnia dostarczenie na stronę WWW potrzebnego nam obrazu (w formie elementu blokowego), jakby wyciętego z mastera. Za umieszczenie tego właśnie obrazu w odpowiednim miejscu na stronie odpowiada albo tradycyjny znacznik HTML, albo znacznik wykorzystujący odpowiednie identyfikatory, klasy lub proste selektory z niezbędnymi właściwościami CSS. (pozycja, float, margines i inne)– tutaj wiele zależy od posiadanego doświadczenia i własnych preferencji. Jeśli zastanawiasz się, dlaczego ta właściwość jest stosowana podczas korzystania ze sprite'ów CSS tło, w takim razie przypominam, że technologia sprite'ów CSS polega na umieszczaniu ich na stronach internetowych właśnie jako wstawki tła. Co więcej, potrzebna jest nie tylko właściwość tła-pozycji, ale także obraz tła wskazujący ścieżkę do duszka głównego i, jeśli to konieczne, inne właściwości tła. Niektóre przykłady, w tym użycie skróconej pisowni właściwości tła, można zobaczyć na poniższych listach stylów.

Użytkownicy zaznajomieni z CSS mogą zauważyć, że pozycjonowanie ikonek CSS jest znacznie bardziej subtelne i złożone. Tak to jest. Jeśli lokalizacja duszka jest podana w dokładnych jednostkach (px), wówczas są one interpretowane jako przesunięcia od lewego górnego rogu obszaru dopełnienia elementu. Punktem, względem którego mierzone są przesunięcia, jest lewy górny róg obrazu źródłowego.

Najbardziej zrozumiałe wyjaśnienie pozycjonowania tła znalazłem w przypadku podania dokładnych wartości właściwości back-position na blogu, skąd zaczerpnięto poniższe zdjęcie i opis:

« Podczas określania położenia obrazu tła przy użyciu jednostek bezwzględnych w położeniu tła, przy określaniu jego ostatecznego położenia obowiązuje następująca zasada. Te. przeglądarka obliczy określone przesunięcia wzdłuż osi X i Y od początku obszaru, w którym znajduje się obiekt, do początku samego obrazu.»

Celem tej recenzji jest udzielenie odpowiedzi na pytania: jak stworzyć sprite CSS, jak połączyć obrazki w sprite CSS oraz zapoznanie się z trzema programami, które umożliwiają proste i łatwe tworzenie sprite'ów CSS (Sprites CSS), więc nie będę się rozpisywał więcej o samej technologii. W internecie jest już sporo sensownych i szczegółowych materiałów na ten temat (jeden link podałem powyżej). Recenzja poświęcona jest pracy z programami do tworzenia sprite'ów CSS (generatorów sprite'ów), gdzie tylko pokrótce poruszę kilka ważnych (moim zdaniem) punktów podczas korzystania ze sprite'ów. Pozwólcie, że od razu dokonam rezerwacji - używanie sprite'ów CSS nie jest panaceum i próbowanie upychania dużych obrazków nagłówków, ekranów powitalnych i grafik używanych w sprite'ach dokładnie tak jak grafika, nie jak zdjęcia tła, nie rób tego. W przypadku trwałych obrazów, które często powtarzają się na stronach, zaleca się stosowanie sprite'ów. Jeśli te obrazy będą często zastępowane innymi, pojawi się potrzeba stworzenia nowych duszków i oczywiście edycji CSS i HTML.

Eksperymentalne generatory ikonek CSS są programami darmowymi CSSSpriter-1.2, DoHTMLSprite I SpriteGenerator 0.2. Jeśli pierwszy z nich jest wspomniany tu i ówdzie w zasobach rosyjskojęzycznych, to w Runecie nie widziałem żadnej wzmianki o drugim i trzecim. Prawie wszystkie generatory sprite'ów CSS to z reguły zasoby internetowe (zgodnie z aktualnie panującym trendem). Co więcej, nie więcej niż dwóch lub trzech z nich mówi po rosyjsku. Lubię programy i usługi online, w których potrafię się odnaleźć, jeśli nie od razu, to po kilku próbach. Z generatorów duszków, które sprawdziłem, najbardziej podobał mi się ten, o którym już wspomniałem. Dla prostoty, wygody, dostosowania, wydajności i przewidywalności. Reszta generatorów (głównie internetowych) nie spełniała tych kryteriów (być może ramiona nie są całkiem proste lub wyrastają z niewłaściwego miejsca, albo głowa nie jest zwrócona we właściwą stronę). Doświadczony użytkownik (jeśli nagle tu zawędruje) może się uśmiechnąć - po co zawracać sobie głowę, skoro duszki można zrobić w edytorze graficznym, a współrzędne można obliczyć (no cóż). Oczywiście, że można, jednak ja wolę korzystać ze specjalistycznych narzędzi i nadal preferuję aplikacje desktopowe * . Wszystkie trzy opisane programy zostały przetestowane w systemie Windows XP SP3. Ich możliwości nie są tak rozbudowane jak Instant Sprite, ale są bardzo godne uwagi.
Notatka z dnia 22.02.14. Wszystkie linki w tym artykule wspominające program Instant Sprite prowadzą do dość szczegółowej zapowiedzi pierwszego tłumaczenia tego programu. Po napisaniu osobnego artykułu o Instant Sprite, zdecydowałem się zamieścić link do niego również tutaj. Tutaj jest - .
Jeszcze jedna uwaga. Chciałbym ogłosić napisany niedawno artykuł, który podkreśla nieco inne podejście do określania współrzędnych i rozmiarów ikonek CSS w celu umieszczenia ich na stronach internetowych. Oto link do tego artykułu:
Zacznijmy jednak od naszej recenzji…

Generator duszków CssSpriter-1.2

Mały darmowy program (archiwum zip 150 kb), który nie wymaga instalacji. Praca z programem do tworzenia sprite'ów CSS jest łatwa, interfejs jest prosty i przejrzysty. Przyciski paska narzędzi powielają elementy menu i zawierają podpowiedzi. Lewy panel wyświetla obrazy źródłowe wraz z ich rozmiarami i współrzędnymi w przyszłym duszku, prawy panel wyświetla wyniki działania programu (jedna zakładka to wyjściowy duszek CSS, druga to demo-html).

Obrazy do połączenia w duszka możesz dodawać pojedynczo z poziomu okna systemowego lub poprzez wielokrotny wybór z przygotowanego folderu z obrazkami. Obrazy można także dodawać metodą „przeciągnij i upuść”. Program obsługuje obrazy wejściowe w następujących formatach: ico, gif, png, bmp, jpg. Pliki Photoshopa psd nie są obsługiwane, nie próbowałem innych formatów – jest ich mnóstwo. Nie polecam używać dwóch ostatnich formatów bmp I jpg. Nie obsługują przezroczystości, co jest wyraźnie widoczne na liście miniatur w lewym panelu i na powstałym obrazie w prawym panelu (zdjęcia tych formatów będą miały czarne tło lub marginesy w ikonce, jak twierdzą niektórzy użytkownicy). Aby zastosować takie duszki na stronach internetowych, trzeba będzie zmniejszyć głębię kolorów i zresetować przezroczystość, co nie zawsze działa poprawnie. Jeden format wyjściowy – png 32-bitowy. Aby obraz wyświetlał się normalnie w starszych wersjach przeglądarki Internet Explorer, zaleca się konwersję obrazu do formatu 8-bitowego png i ponownie ustaw przezroczystość. Na drugiej karcie prawego panelu możesz zobaczyć znaczniki HTML z zagnieżdżonymi stylami CSS do stosowania ikonek.

Kliknięcie lewym przyciskiem paska narzędzi powoduje eksport naszego projektu do formatu HTML. W folderze określonym do zapisania wyniku pojawią się trzy pliki:

Program umożliwia również utworzenie duszka z poziomym układem obrazów wejściowych. Przycisk wskazany czerwoną strzałką implementuje tę funkcję. Należy pamiętać, że współrzędne obrazów zawartych w duszku uległy zmianie (w porównaniu z lokalizacją pionową).

Wyniki jakie dał nam program są podstawą do nałożenia sprite'ów na Twoją stronę. Oczywiście musisz połączyć istniejące style ze stylami sprite'ów, możesz użyć identyfikatorów zamiast klas, możesz zoptymalizować same style sprite'ów, zastosować potrzebne znaczniki, wyeksportować style do pliku zewnętrznego itp. – wszystko będzie zależeć od strony, na której będziesz korzystał ze duszków, a także od Twoich preferencji i umiejętności.
Jednak nie wszystko jest takie dobre. Program moim zdaniem ma jedną poważną wadę. Nie ma możliwości ustawienia odstępów (przesunięć, wcięć) pomiędzy obrazkami w ikonce, więc podczas przeglądania strony w powiększonej lub pomniejszonej skali, co czasem się zdarza, mogą wystąpić różnego rodzaju nałożenia. Drugą, mniejszą wadą jest brak możliwości sortowania obrazków w programie, dlatego obrazy do programu trzeba wczytywać w takiej kolejności, w jakiej jest to potrzebne (w zasadzie jest to wyłącznie kwestia własnych upodobań; ostatecznie użycie żądany obraz określa się poprzez podanie jego współrzędnych).

Generator duszków DoHTMLSprite

Trudno zrozumieć, kto jest autorem tego programu, ale prawie wszystkie zagraniczne archiwa oprogramowania zawierają link do http://www.downloadinn.com/dohtmlsprite.html jako głównego źródła. Jest to także archiwum plików, w którym można znaleźć autora publikacji – Stefana Grasutu. Kliknięcie tego linku przeniesie Cię na stronę internetową niejakiego Alexandru Tertisco - http://www.teral-soft.com. Nie znalazłem żadnych śladów tego programu na stronie, więc możesz pobrać program z pierwszego wymienionego linku.
Mały darmowy program (archiwum zip 13 kb) ma super ascetyczny interfejs, ale nie zna się na rzeczy. Nie wymaga również instalacji.

Algorytm pracy jest następujący:

• Określ folder z plikami źródłowymi (folder należy wcześniej utworzyć i umieścić w nim niezbędne pliki)
• Ustaw folder docelowy do zapisywania wyników
• Utwórz duszka

Spróbujmy zrobić sprite CSS z tych samych obrazków, które zostały użyte w recenzji pierwszego programu: 2 pliki gif i jeden na raz ico, bmp, jpg, png I psd. Pierwszy program umożliwiał pobieranie wszystkich plików z wyjątkiem psd, czyli pobrałem 6 plików z 7. Zobaczmy jak zachowa się DoHTMLSprite.

Program wykrył 5 plików z 7 w porównaniu z 6 wykrytymi przez CssSpriter-1.2. Które z nich wciąż nie są znane.
Ustaw folder wyjściowy i naciśnij przycisk Utwórz duszka. Program wesoło raportuje o utworzeniu sprite'a, pliku css i pliku demonstracyjnego HTML.

Przyjrzyjmy się zawartości folderu wyjściowego. W rzeczywistości znajdują się tam wszystkie wymienione pliki o niektórych niemożliwych do wymówienia nazwach.

Przyjrzyjmy się im, zaczynając od duszka. Jak widać plik sprite'a został utworzony w formacie png, powiem też o głębi kolorów - tych samych 32 bitach, co w pierwszym programie. Oznacza to, że wszystkie uwagi dotyczące przejrzystości dotyczą także starszych przeglądarek.
Patrząc na obraz pionowy (i nie można zmienić jego orientacji, co jednak nie jest znaczącą wadą programu), zauważamy, że program ten nie obsługuje formatów i co I psd jako wejście. Użytkownicy starszych przeglądarek zobaczą także szarawe tło na ikonce, oprócz czarnego tła na obrazach, do tworzenia plików wejściowych bmp I jpg, które natywnie nie obsługują przezroczystości. Po bliższym przyjrzeniu się widać, że duszek zawiera luki(wcięcia, przesunięcia) pomiędzy obrazami, czyli nie ma tutaj głównej wady poprzedniego programu. Jeśli spojrzysz na współrzędne zdjęć tuż poniżej (w pliku stylu), zobaczysz, że ta przerwa wynosi 5 pikseli.

Jak widać, nie stosuje się tutaj stylów zagnieżdżonych, a utworzony zewnętrzny plik stylów, do którego link znajduje się w kodzie.

A tak wygląda strona demonstracyjna (jej fragment) oglądana w nowoczesnej przeglądarce. Na tym zrzucie ekranu widać także przerwy pomiędzy poszczególnymi obrazkami, ale są one już ustawione w pliku stylu (szczegóły poniżej).

Ostatnim plikiem utworzonym przez program jest plik stylu zewnętrznego.

Tutaj możesz zobaczyć współrzędne wszystkich naszych zdjęć w duszku. Dokładne sprawdzenie współrzędnych pokazuje, że uwzględniają one odstępy 5px pomiędzy obrazami w ikonce, które są ściśle określone przez program (wymiary obrazków to 32x32px, a różnica współrzędnych to 37px, 37-32=5) . W przypadku strony demonstracyjnej autor ustawił zewnętrzne marginesy u góry i u dołu w stylach również na 5 pikseli (można było ustawić inną wartość), korzystając z właściwości skróconej margines. Porównując demonstracyjne strony HTML utworzone przez pierwszy i drugi program, można zobaczyć, jak zastosowane style wpływają na rozmieszczenie obrazów na stronie. Niektórzy użytkownicy korzystają margines"s jako dodatkowe narzędzie, aby uniknąć nieoczekiwanych nakładek podczas skalowania strony podczas przeglądania. Prawdopodobnie przyda się to przy tworzeniu i optymalizacji stylów dla duszka utworzonego przez pierwszy program, gdzie w ogóle nie ma przerw pomiędzy obrazami w duszku. Kiedy tworząc i optymalizując style dla swoich duszków, sam decydujesz, jakich właściwości potrzebujesz i jak z nich korzystać.

Chciałbym zauważyć, że program początkowo generuje zwarty, jednoliniowy styl i nie umieszcza jednostki miary (px) po współrzędnej zerowej; w Afryce zero oznacza zero, ani w pikselach, ani w kilogramach. Niektóre usługi online służące do tworzenia ikonek CSS nie przewidują takiej przezorności.

wnioski

Nie zostaną wyciągnięte żadne wnioski dotyczące wykorzystania recenzowanych programów. Zrobisz je sam. Opisałem wystarczająco szczegółowo wszystko, przez co sam przeszedłem, reszta zależy od Ciebie. Na zakończenie tej przydługiej recenzji podzielę się kilkoma przypadkowymi sugestiami i opcjonalnymi wskazówkami dotyczącymi korzystania ze sprite'ów CSS.

• Nie próbuj tworzyć tylko jednego duszka na każdą okazję i umieszczaj w nim wszystkie obrazy użyte na swoich stronach, skomplikuje to w przyszłości dostosowywanie HTML i CSS, jeśli będzie to konieczne
• Twórz ikonki dla często powtarzających się elementów graficznych, takich jak logo, ikony, przyciski i inne elementy nawigacyjne i kontrolne
• Staraj się tworzyć duszki z obrazków tej samej wielkości (lepiej zrobić nie jednego duszka z obrazków o różnych rozmiarach, ale kilka duszków, ale każdy z obrazków jest tej samej wielkości), pomoże to zoptymalizować użyte style (zrobię to pokaż jeden przykład poniżej)
• Do tworzenia sprite'ów nie używaj obrazków w formatach, które natywnie nie obsługują przezroczystości (lepiej i najlepiej jest używać obrazków wejściowych w formatach gif I png, a w przypadku pierwszego programu i wspomnianego Instant Sprite również możesz skorzystać i co)
• Aby zapewnić przejrzystość plików wyjściowych PNG w starszych przeglądarkach skonwertuj je do formatu 8-bitowego lub do GIF-y(istnieją również hacki CSS, które mogą rozwiązać ten problem dla png, ale nie jest to temat dzisiejszej recenzji)
• Optymalizuj style (możesz korzystać z usług online, programów, TopStyle, Rapid CSS itp. lub edytować ręcznie)
• Optymalizuj sprite'y - bardzo wygodne i efektywne jest korzystanie z serwisu internetowego TinyPNG (http://tinypng.org) lub programu Zamieszki, recenzja w (gorąco polecam)
• Użyj ikonek, aby w prosty i elegancki sposób przesuwać obrazy na swoich stronach bez użycia skryptów
• A w długą podróż... z flagą w rękach..., do przodu i z piosenką...

P.S. O wspomnianej optymalizacji stylu

Rozważę tylko jeden przykład możliwej optymalizacji przy użyciu obrazów o tym samym rozmiarze. Stwórzmy eksperymentalnego duszka z obrazów tego samego rozmiaru przy użyciu DoHTMLSprite i zobaczmy utworzone style.

Po pierwsze, nie potrzebuję dodatkowego dopełnienia, więc usunę je z pliku stylu. Po drugie, wszystkie moje obrazki są tej samej wielkości, więc nic nie stoi na przeszkodzie, abym tylko raz ustalił rozmiary w stylu dla samego duszka-mastera. To jest to, co się stało.

Rozmiar pliku zmniejszył się z 1403 bajtów do 749 bajtów (prawie 2 razy) i wszystko działa świetnie. Jeśli przyjrzałeś się uważnie tym dwóm zrzutom ekranu, prawdopodobnie zauważyłeś, że dodatkowo usunąłem dodatkowe spacje i opcjonalne średniki przed zamykającym nawiasem klamrowym. Dla porównania wizualnego zoptymalizowałem także styl omawianego już oryginalnego duszka. Tak się właśnie stało, gdy oglądaliśmy w przeglądarce.

Jeśli porównasz zrzuty ekranu, zauważysz różnicę. Zniknęły luki pomiędzy zdjęciami na stronie, określone przez nieruchomość (margines: 5px 0). Stwierdziłem, że nie są mi one potrzebne (duszki będą umieszczone w różnych miejscach strony, a nie w rzędzie, jak w przykładzie demonstracyjnym). Jednocześnie luki w samym obrazie sprite'a stworzonym przez program nigdzie nie zniknęły, a posłużą nam jako zabezpieczenie podczas ewentualnego niestandardowego skalowania strony przeglądanej w przeglądarce.

Na koniec ostatnia rzecz

Wśród szeroko reklamowanych usług tworzenia ikonek CSS wyróżnia się jedna Sprytuj mnie. Automatycznie wyszukuje obrazy, które można połączyć w ikonki i zapewnia natychmiastowe zalecenia dotyczące reorganizacji plików stylów i znaczników HTML. Spróbuj. Sam kiedyś od tego zaczynałem i dzięki serwisowi zrozumiałem istotę używania duszków. Ale niestety znalazł tylko 20% obrazków na moich stronach, z których można było stworzyć duszki. Dlatego też przeszedłem do tego, co zostało wspomniane już nie raz i Tobie życzę tego samego. Spośród wielu obrazów opublikowanych na moich stronach wszystkie obrazy tła to sprite'y. Ponadto przyciski sterujące (takie jak przesyłanie pliku, przewijanie strony w górę, wyświetlanie zrzutu ekranu lub wideo) są wykonane z duszków przy użyciu efektu najazdu przy użyciu CSS.
Wszystko!

Jakoś nie mogę dokończyć recenzji. Właśnie go opublikowałem i dzień później znalazłem inny generator sprite'ów CSS.

Generator Sprite'ów SpriteGenerator 0.2.

Również nie online, ale aplikacja Win. Mały program, pozornie open source, rozpowszechniany na określonej licencji publicznej Microsoft. Program posiada dość prosty i intuicyjny interfejs.

Wskażmy ścieżkę do tego samego folderu ze zdjęciami eksperymentalnymi, co w przypadku omawianych już programów. Określmy folder dla danych wyjściowych duszka, a następnie określmy ten sam folder dla danych wyjściowych pliku CSS.
Program pozwala wybrać układ przyszłego duszka: poziomy, pionowy, prostokątny oraz według uznania programu (wybór automatyczny). Patrząc w przyszłość, powiem, że gdy obrazów wejściowych jest dużo, program sam ustawia automatyczny układ - pozostałe opcje są dezaktywowane, a powstały duszek jest prostokątny. Program umożliwia ustawienie odstępu między obrazami oraz ustawienie wcięć. Wybierz parametry wskazane na zrzucie ekranu i naciśnij przycisk Tworzyć. Program odlatuje gdzieś bez raportu. Spójrzmy na folder wyjściowy.

Program utworzył dwa pliki: plik stylu i ikonkę w formacie PNG 32bit (ich nazwy podałem przy określaniu folderu wyjściowego). Ten program nie utworzył strony demonstracyjnej. Spójrzmy na sprite'a.

Co od razu rzuca się w oczy: zostały już tylko 4 z 7 zdjęć. Okazuje się, że program nie akceptuje plików bmp, na zdjęciu z formatem wejściowym jpg widoczny jest także kawałek czarnego tła, a użytkownicy starszych przeglądarek również zobaczą szarawe tło na innych obrazach. Ponownie nie zoptymalizowałem duszka ani nie ustawiłem przezroczystości. Drugą rzeczą, na którą należy zwrócić uwagę, są luki wokół każdego obrazu – tego można się spodziewać, ponieważ program obsługuje układ prostokątny. Ale odstępy między obrazami a zewnętrzną krawędzią są wyraźnie większe niż odstępy między samymi obrazami. Wszystko staje się jasne, gdy spojrzymy na plik stylu.

Pierwszą rzeczą, na którą warto zwrócić uwagę, jest to, że program zapisywał nazwy obrazów wejściowych, zamiast podawać nazwy bez twarzy w omówionych powyżej programach. Po drugie, wcięcie, które ustawiliśmy, ponieważ uważałem to za właściwość margines, a nie w pliku stylu. Okazuje się, że obie opcje ustawienia odstępów w programie dotyczą samego obrazka: jedna (odległość między obrazkami) ustawia odstępy pomiędzy samymi obrazkami, druga (szerokość marginesów) – pomiędzy obrazkami tworzącymi duszka i jego granica zewnętrzna. Jeśli spojrzysz na właściwości pozycja tła W pliku stylu widać, że uwzględnia on oba wymienione rodzaje odstępów. Stwórzmy sami stronę demonstracyjną, uwzględniając dla przejrzystości różne wcięcia w pliku stylów (mówimy o wcięciach w pliku stylów dla przejrzystości w rozmieszczeniu obrazków na stronie).

Celowo zrobiłem zrzut ekranu podczas przeglądania w IE6, aby zobaczyć nieprzezroczyste tło zdjęć. Mówiłem już o tym, jak tego uniknąć w starszych przeglądarkach. W nowoczesnych przeglądarkach wszystko wygląda dobrze, z wyjątkiem formatu obrazu wejściowego jpg, który natywnie nie obsługuje przezroczystości, tutaj tło jest czarne.
Dla zainteresowanych, oto zrzuty ekranu plików HTML i CSS dla ostatniego przykładu.

Wniosek

Moja recenzja nie pretenduje do kompletności i nie wyczerpuje szczegółowo wielu zagadnień, ale może posłużyć jako przykład wykorzystania sprite'ów CSS na stronie WWW oraz przykład ich tworzenia w generatorach sprite'ów.

Nie zrusyfikowałem programów wymienionych w recenzji, są one dość proste i zrozumiałe bez tłumaczenia. Będzie mi miło, jeśli ta recenzja będzie dla kogoś przydatna. (UPD - później przetłumaczyłem najmniejszy i najprostszy, ale nie mniej funkcjonalny program - DoHTMLSprite. Ogłoszenie o jego lokalizacji można znaleźć na stronie aktualności.)

Po opublikowaniu tej recenzji znalazłem w Internecie jeszcze kilka programów (nie usług) do tworzenia sprite'ów CSS. Ale wszystkie te programy są gorsze od programów opisanych tutaj. Albo pod względem funkcjonalności, albo stabilności działania, albo innych właściwości. Dlatego nie będę dodawać do tej recenzji. Programy omówione w tym przeglądzie doskonale spełniają swoje zadania. Możesz polecić dowolne z nich do tworzenia sprite'ów CSS.

To chyba tyle na teraz!

Dziękuję za przeczytanie tego wszystkiego.

*) Wcześniej byłem dość sceptyczny co do tworzenia sprite'ów CSS za pomocą edytorów graficznych. Ale mnóstwo darmowego edytora Kordonek z wtyczkami WebSprity CSS I Zapisz dla Internetu sprawiło, że zmieniłem zdanie. Prostota, intuicyjność i dodatkowe możliwości tworzenia spriteów CSS oraz optymalizacji zarówno stylów, jak i obrazów skłoniły mnie do napisania kolejnego artykułu na ten temat. Jeśli chcesz, możesz zapoznać się z nim na stronie.
Polecam także zapoznać się z nieco innym podejściem do sprite'ów CSS oraz określeniem ich współrzędnych i rozmiarów w artykule.

Na nowoczesnych stronach internetowych można znaleźć dużą liczbę różnych typów grafik: obrazy produktów, awatary użytkowników, obrazy tworzące projekt stron, przyciski, ikony, logo itp. A im większy projekt, tym więcej plików graficznych wykorzystuje się. Po otwarciu osobnej strony witryny w przeglądarce ładowane są wszystkie jej elementy. Dlatego też, gdy jest na nim zbyt dużo grafiki, prędkość ładowania ma tendencję do znacznego zmniejszania się. Co z kolei jest obarczone niedogodnościami dla osób odwiedzających Twój projekt.

Sprite’y CSS

Na stronie głównej znajduje się formularz umożliwiający wgranie plików graficznych (dla każdego pliku znajduje się osobny przycisk). Początkowo widoczne są tylko trzy przyciski pobierania. Jeśli potrzebujesz więcej, kliknij „Potrzebujesz więcej”.

Po wybraniu wszystkich plików przyszłego duszka CSS kliknij przycisk „Opcje”. Mały panel z ustawieniami otworzy się przed tobą. Tutaj możesz ustawić marginesy pomiędzy elementami w pikselach, dodać ramkę dla obrazków, wyrównać wszystkie obrazki w gotowym duszku do lewej lub górnej krawędzi oraz ustawić kolor tła w formacie RGB.

Po kliknięciu przycisku „Generuj” zostanie bezpośrednio utworzony duszek CSS. Zobaczysz także małą instrukcję korzystania z niego, czyli kod CSS, który będziesz musiał umieścić na swojej stronie internetowej. Jest nawet przykład w HTML. Myślę, że nie jest problemem to rozgryźć.

Wizualnie Dan’s Tools CSS Sprite Generator jest całkiem niezłym generatorem sprite’ów CSS z wieloma ustawieniami. Możesz na przykład wybrać pionowy lub poziomy rodzaj wstawiania ikon do całego obrazu.

Sprite’y CSS

W usłudze CSS Sprites wszystko jest niezwykle proste zarówno pod względem projektu, jak i ustawień. Istnieje możliwość wyboru formatu obrazu wynikowego: PNG, JPEG, GIF. Na stronie znajduje się link do adaptacyjnej wersji generowania duszków - Responsive CSS Sprites (chociaż tego nie próbowałem).

Całkowity. W zasadzie rozważyliśmy wszystkie niuanse dotyczące tworzenia duszków CSS i ich używania. Generatory pomogą przyspieszyć proces tworzenia elementów, ale można sobie poradzić z Photoshopem. Jeśli masz jakieś pytania, napisz w komentarzach.

Najpierw krótkie wprowadzenie. Podczas ładowania strony przeglądarki mogą wysyłać tylko 2 żądania do serwera (w nowoczesnych przeglądarkach liczba ta wzrosła do 6). Każdy element strony, czy to plik z arkuszem stylów, pliki javascript, zdjęcia, to niezależne pliki do pobrania, które wymagają osobnego żądania do serwera.

Na stronie może znajdować się wiele miniatur. Na przykład emotikony, strzałki, wszelkiego rodzaju drobne elementy projektu. Każdy taki obraz waży znikomo mało, ale ze względu na ogromną liczbę żądań powstają problemy z szybkością ładowania witryny.

Dawno temu (2003-2004) zaproponowano rozwiązanie tej sytuacji, którego głównym celem było przyspieszenie ładowania witryny poprzez zmniejszenie liczby żądań kierowanych do serwera. Technologia ta nazywa się „Sprites”.

Co to są spritey CSS

CSS Sprite’a- technologia łączenia małych obrazków w jeden. Używając przesunięć za pomocą CSS, osiąga się wycięcie żądanej części obrazu

Na przykład zamiast 10 obrazów ładowany jest jeden, ale większy. Przy odpowiedniej dystrybucji przyspiesza to działanie witryny. Najważniejsze jednak, żeby nie przesadzić. Łączenie obrazów nie zawsze daje przewagę przy ładowaniu witryny.

Przykład CSS Sprite

Przyjrzyjmy się małemu przykładowi implementacji sprite’a CSS. Załóżmy, że z trzech oddzielnych strzałek zrobiliśmy poniższy obrazek.

Aby uzyskać dostęp do żądanej strzałki w CSS, musisz napisać

Вот как это выглядит на странице:

В рассмотренном примере мы использовали отрицательные отступы. Это делается, для того, чтобы поднять изображение вверх. Например, есть следующий спрайт:

Чтобы вырезать значок RSS мы должны написать следующие отступы

background-position : -90px -40px ;

В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.

Плюсы использования спрайтов

• Сокращение количества обращений к серверу
• Если используются динамическое изменение картинки (например, при наведении в элементе меню), то картинка уже будет находится в кэше и поэтому не будет запаздывания на загрузку в нужный момент
• Если фон объединяемых изображений схож, это еще и уменьшить суммарный "вес" изображений

Из минусов спрайтов: сложность работы в случае ручного труда. Но благо есть бесплатные сервисы, которые готовы упростить работу и сделать все за вас.

Слово спрайт (англ. sprite - фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и "оживления" мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон - сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников.. эти самые плёнки они и называли спрайтами.

Потом термин спрайт внедрился в компьютерную графику и особо широкое распространение получил в компьютерных играх - но это тоже не совсем то о чем я хочу Вам поведать.. Сегодня я хочу Вам рассказать о так называемых CSS-спрайтах..

Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких "частей", которые показываются как бы по отдельности в зависимости от действий пользователя..

Что слишком много слов.. покажу пример..

Это спрайт который присутствует на каждой странице данного сайта:

Просто в "спокойном" состоянии Вам показывается одна его часть, а при наведении курсора другая.

Как это сделать? На самом деле все достаточно просто.

В данном примере для блока с фиксированными размерами мы в качестве фона загружаем "двойное" изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую "часть" фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.

Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:

Открываем значит фотошоп и рисуем в нём примерно такой рисунок:

Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет "скакать". Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..

Итак, у нас получилась "двойная" картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.

Он у меня получился таким.. смотрим результат и читаем комментарии в коде:

Oto menu jakie otrzymaliśmy:

Myślę, że wielu czytelników zastanawia się: „Po co w ogóle potrzebne są te ikonki, skoro to samo można zrobić przy użyciu dwóch oddzielnych obrazków, z których jeden stanowi tło tylko dla linku, a drugi dla linku z :unosić się, bez konieczności walki z Photoshopem i obliczania współrzędnych tła dla CSS?”

Po pierwsze: prędkość ładowania obrazów znacznie wzrasta!! Pomimo tego, że „podwójny” obraz waży tyle samo, co dwa osobne małe „pojedyncze” obrazy, ładowanie jednego dużego obrazu jest szybsze, ponieważ przeglądarka nie tworzy dodatkowych żądań HTTP do serwera.

Pamiętasz, jak pokazałem Ci logo mojego sprite'a i powiedziałem, że kłamię? Więc moja przebiegłość polega na tym, że ten obraz zawiera nie dwie logiczne części obrazu, ale osiemnaście!!

A tak to wygląda w całości:

Oznacza to, że prawie cała grafika, którą widzisz na tej stronie, faktycznie przychodzi do Ciebie w postaci jednego obrazu! Pliku CSS nie pokażę, sama się tego boję..)),

Oto żądania HTTP... gdyby było 18 obrazów zamiast jednego, dialog przeglądarki z serwerem wyglądałby mniej więcej tak:

Przeglądarka: Witaj Serwerze! Przychodzę od Was, na moją prośbę otrzymuję dokumenty HTML i CSS i tak wskazują, że w Waszym folderze „grafika”... powinien znajdować się obrazek o nazwie: „obrazek1” puśćcie go, huh ?
serwer: Witaj Przeglądarko, dawno Cię nie było, zaraz zerknę... tak, mam takie zdjęcie! Złapać!!
Przeglądarka: Dzięki, złapałem! Ale nadal potrzebuję „picture2” w tym samym folderze..
serwer: Tak, i jest jeden.. Wysyłam..
Przeglądarka: Przesłano.. ale tutaj jest również wskazane „zdjęcie 3”.
serwer: I nie możesz spać! Zachowaj swoje zdjęcie!!
Przeglądarka: Dziękuję! Tak, szczerze mówiąc, mam już tego dość, ale mój użytkownik chce załadować stronę w całości... Krótko mówiąc, powinieneś mieć tam również „obrazek 4”…
serwer: Zaczynasz mnie stresować! Do Twojego zdjęcia!!
Przeglądarka: Przepraszam, ale to nie moja wina, że ​​jest tu tyle zdjęć!!! Potrzebujesz „zdjęcia 5”!
serwer: Już doprowadzasz mój procesor do wrzenia!! Zawahałem się!! Zdobądź swoje zdjęcie!!
... ... ...

Dalszego dialogu nie będę zabierał głosu, bo to co następuje jest wulgarne...

Po co ta cała rozmowa między serwerem a przeglądarką (klientem), która zajmuje dużo czasu i ruchu, a także ładuje serwer, gdy witryna jest duża liczba odwiedzających, skoro znacznie szybciej i bardziej ekonomicznie jest utworzyć jeden HTTP zamów i otrzymaj wszystkie 18 zdjęć w jednym pakiecie!!

Po drugie: ładowanie drugiego obrazu podczas korzystania z pseudoklasy :unosić się następuje dopiero w momencie, gdy użytkownik najechał kursorem na link z pierwszym obrazkiem. Jeżeli jest to mały obrazek jak przycisk z powyższego przykładu to nic szczególnie złego się nie stanie - drugi obraz szybko się załaduje i użytkownik nic nie zauważy...ale co jeśli będzie to duży obraz pod względem wagi i rozmiaru? ? Wtedy użytkownik będzie obserwował, jak się ładuje, chociaż był psychologicznie przygotowany na szybką zmianę obrazów! Kolejny plus dla sprite'ów! ... choć szczerze mówiąc to też minus.. minus jeśli użytkownik ani razu nie najechał kursorem podczas sesji.. obraz się załadował, ale nie był dla niego przydatny.. ale wierzcie mi, ta „ofiara ruchu drogowego” prawie zawsze się opłaca!

I po trzecie: niezależnie od tego, jak dziwne może ci się to wydawać, jest to wygodne! Wygodnie jest wskazać w kodzie ścieżkę do tego samego obrazu, wygodnie jest edytować go w Photoshopie, np. aby rozjaśnić lub przyciemnić całą witrynę, pracując z jednym obrazem, wygodnie jest przechowywać, wygodnie wgrać do serwer, a nawet w CSS wygodnie jest pracować z dużym duszkiem! - chociaż wymaga to pewnych umiejętności i nawyków..

OK, sam zdecyduj, czy użyć sprite'ów, czy nie.. a moja firma jest mała, tak tylko po to, żeby przekazać Ci informację, że tak powiem.. jeśli pojawią się dodatkowe pytania, czekam na Ciebie pod adresem