8 kroków do zmniejszenia ilości obrazków na stronie
Na końcu każdego artykułu topblogger.pl zobaczycie listwę ikonek za pomocą których dany wpis można dodać do siedmiu serwisów społecznościowych, są to:
- wykop – serwis umozliwiający dodanie ciekawych znalezisk w sieci
- elefanta – serwis społecznościowy
- technorati – serwis społecznościowy o blogach
- stumbleupon – serwis umozliwiający ocenę i polecanie stron
- digg – anglojęzyczny pierwowzór wykop.pl
- del.icio.us – serwis zakładek internetowych
- co.mments.com – serwis śledzenia komentarzy różnych wpisów
Każdy serwis przedstawiany jest w postaci ikonki o rozmiarach 16 na 16 pikseli co w sumie daje siedem obrazków o łacznej wadze 4,267 bajtów:
Obr. a. – tabela ikonek zawartych w pasku serwisów społecznościowych uporządkowana alfabetycznie
Cel
Aby zmniejszyć ilość plików na stronie TopBlogger.pl za kilka dni zamierzam zmienić sposób ich prezentacji i z siedmiu obrazków zrobić jeden. Motywuję się nastepująco:
- poszczególne strony wpisów będą ładowały się szybciej (każdorazowo 1,2 sekundy tylko za pomocą tej małej modyfikacji)
- obciążenie serwera "obsługujacego" jednego czytelnika będzie wymagało mniej zasobów (6 połączeń mniej na każdy obejrzany wpis)
- za pomocą tego samego zaplecza bedę mógł zaprezentować treść większej liczbie czytelników jednocześnie (konsekwencja powyższych punktów)
Przygotowania
Przed modyfikacją uwzgledniłem trzy rzeczy:
- będzie bardzo kolorowo i muszę korzystać z formatu PNG obsługującego 16,7 milionów kolorów i dodatkowo przeźroczyste tło
- każda ikonka ma 16 na 16 pikseli
- mam do połaczenia siedem obrazków
1.) Przygotowujemy tło
Aby ze wszystkich siedmiu grafik zrobić jedną potrzebujemy nowy obrazek o rozmiarach 112 pikseli szerokości i 16 pikseli wysokości tak by wszystkie siedem ikonek ładnie zmieściło się obok siebie. Dla kontrastu przy wklejaniu obrazków kolor tła: ciemny.
Obr. b. – nowy pojemnik dla obrazków : icons.png
2.) Wklejamy obrazki
Otwieramy wszystkie obrazki i jeden po drugim kopiujemy ich zawartość do nowego pliku icons.png, ewentualne różnice rozmiarów wypełniamy kolorem tła.
Obr. c. – icons.png po przekopiowaniu wszystkich obrazków
3.) Potrzebujemy okienka
Obecna postać pliku rozwiązała jeden z naszych problemów, z siedmiu obrazków powstał jeden. Teraz potrzebujemy swoistego "okienka", czyli sposobu by wyświetlić tę część obrazka która w danym momencie jest nam potrzebna. W tym celu posłużymy się znacznikiem <div>.
4.) Budujemy okienko
Aby znacznik <div> spełnił swoją rolę trzeba określić co i jak ma pokazywać -posłużymy się językiem arkuszy stylów CSS i zamiast samego <div> wpiszemy:
<div style="">
Następnym krokiem jest powiedzenie okienku, że ma wyświetlać zrobioną przez nas grafikę:
<div style="background: url(‘icons.png’);">
Dodatkowo chcemy aby okienko wyświetlało tylko mały fragment całego obrazka odpowiadający pierwotnym ikonkom 16 na 16 pikseli, więc określamy jego szerokość i wysokość (cały kod jest w jednej linijce):
<div style="background: url(‘icons.png’); width: 16px; height: 16px;">
Jako ostanie zagadnienie budowy chcemy aby kolejne okienka pojawiały się obok siebie – do tego użyjemy polecenia float: left;
<div style="background: url(‘icons.png’); width: 16px; height: 16px; float: left;">
Ostatnim krokiem budowy okna jest określenie, że już skończyliśmy je budować, czyli znacznik </div>.
<div style="background: url(‘icons.png’); width: 16px; height: 16px; float: left;"></div>
Okno gotowe, pozostaje kwestia poruszania okienkiem tak, aby pokazywało ten fragment obrazka który najbardziej potrzebujemy.
5. Ruszamy obrazkami
Skoro w obrazku icons.png jedna ikonka położona jest obok drugiej a każda ikonka ma 16 pikseli szerokości potrzebujemy sposobu by pokazać akurat te 16 pikseli o które nam chodzi – w tym celu będziemy przesuwali pasek obrazków tak by okienko pokazywało wybrany fragment, czyli o kolejno 0, 17, 33, 49, 65, 81 i 97 pikseli w lewo.
Obr. c. – icons.png po przekopiowaniu wszystkich obrazków
pierwszy obrazek (del.icio.us) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) 0px 0px; width: 16px; height: 16px; float: left;"></div>
drugi obrazek (technorati) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) -17px 0px; width: 16px; height: 16px; float: left;"></div>
trzeci obrazek (wykop) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) -33px 0px; width: 16px; height: 16px; float: left;"></div>
czwarty obrazek (stumbleupon) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) -49px 0px; width: 16px; height: 16px; float: left;"></div>
piąty obrazek (elefanta) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) -65px 0px; width: 16px; height: 16px; float: left;"></div>
szósty obrazek (digg) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) -81px 0px; width: 16px; height: 16px; float: left;"></div>
siódmy obrazek (co.mments) wyświetlamy za pomocą:
<div style="background: url(‘icons.png’) -97 0px; width: 16px; height: 16px; float: left;"></div>
I bylibyśmy juz na końcu naszej podróży gdyby nie mały problem: okienko lubi znikać.
6. Potrzebujemy szyby
Przeglądarki uwielbiają ignorować okienka bez treści. Mamy pięknie zbudowane okienko, panoramę w postaci icons.png i jedyne czego nam teraz brakuję jest obrazek-szyba – możecie pobrać go spod adresu http://topblogger.pl/blank.gif (prawy przycisk myszy i "zapisz obiekt docelowy jako…").
7. Wstawiamy szybę
Podobnie jak okienko przeźroczysty obrazek trzeba umieścić na swoim miejscu za pomocą (znów wszystko w jednej linijce):
<img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" />
Tak więc kod dla każdego okienka będzie wygladał nastepująco (dla lepszej czytelności część kodu z punktów 4 i 5 zastąpiłem oznaczeniem [...] )
<div style="[...]"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
8.) Gotowe
A oto jak wygląda całość:
<div>
<div style="background: url(‘icons.png’) 0px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<div style="background: url(‘icons.png’) -17px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<div style="background: url(‘icons.png’) -33px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<div style="background: url(‘icons.png’) -49px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<div style="background: url(‘icons.png’) -65px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<div style="background: url(‘icons.png’) -81px 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<div style="background: url(‘icons.png’) -97 0px; width: 16px; height: 16px; float: left;"><img src="blank.gif" alt="" style="width:16px; height:16px; border: 0;" /></div>
<br style="clear: both;" />
</div>
Korzyści
- 6 obrazków mniej na stronie
- strona ładuje się 1,2 sekundy szybciej
- waga obrazków zmniejszyła się z 4,267 bajtów na 2,525 bajtów
- aby strona ładowała się jeszcze szybciej można połączyć większą liczbę obrazków bądź stworzyć kilka zestawów okienek
Podsumowanie
Zwiększenie szybkości wyświetlania strony nie polega na wykonaniu jednej czynności, a skutki nie są zależne wyłącznie od środków. Albo cytując blog sgk74exp we wpisie wykopana muzyka z windowsowych dźwięków:
Elementy składowe nieszczególne, ale końcowy efekt naprawdę imponujący, momentami wręcz niewiarygodny!
Lubię takie niecodzienne pomysły.
Lubię jak ktoś tak potrafi zrobić "coś z niczego" :)
Każdy może zrobić coś z niczego. Druga część miniserii będzie o tym, jak powyższy sposób zastosowałem w innych miejscach szaty graficznej topblogger.pl i strona główna ma tylko 10 elementów.
Na zakończenie spytam: Czy wpis był ciekawy? Dlaczego? Dlaczego nie?
Podziękowania
Dziekuję Marcinowi za miniaudyt – topblogger.pl bez którego następny wpis z pewnoscią byłby o wiele uboższy.
- Dodaj
kanał rss
do swojego czytnika - Skorzystaj z
adresu trackback - Prenumeruj
kanał komentarzy
Kommentarze: 30 »
W tych 2,5 kB wliczyłeś, jak rozumiem, kod HTMLowy odpowiedzialny za wyświetlenie?
Nie, różnica w kodzie to obecnie 578 bajtów do 1,281 bajtów na korzyść starego sposobu, ale jeśli dodasz wszystko do arkusza stylów poprawiony sposób będzie mniejszy, nie wiem o ile, bo na razie to wersja podstawowa bez CSS w osobnym pliku.
Jak zwykle, miałbym kilka uwag.
- Co to jest ten obrazek szyba? Robiłem takie manewry wcześniej i nigdy wpadłem na to żeby wklejać jakiegoś dodatkowego gifa. Jeżeli div ma szerokość i wysokość 16px, to nie widzę powodu dla którego przeglądarka miałaby to zignorować. Możesz powiedzieć jakie to robią? Patrząc na stronę w której to zastosowałem, to IE6, IE7, Fx 2, Opera 9.2, Safari 3 (windows) nie obserwuję tych anomalii.
- Na moje oko to wystarczyłby PNG-8 z 64 kolorami, bez przeźroczystości (białe tło ikon, białe tło bloga)
- Po całym zabiegu polecam programem PNGGauntlet potraktować pliki .png z włączoną opcją „Brute force”, bardzo rzadko nie zmniejsza wielkości pliku.
- Style css inline są nunu :)
Obrzek szyba jest po to by w razie potrzeby po wstawieniu linka było w co klikać :).
Masz rację, w powyższym przykładzie starczy png lub gif z 256 kolorami, ale przez to przewodnik byłby jeszcze dłuższy.
Dziękuję za informacje o Gaunlet, jeszcze go nie znałem :)
Moze i nunu ale działają i to we wszystkich przeglądarkach ;) – a tak na poważnie, coś musiałem wyrzucić z opisu, i tak jest koszmarnie długi.
No dobrze, a co z różnymi graficznymi widgetami? Mozna tylko wywalic?
Widgety to kod który zazwyczaj pobieramy z innego serwera, w związku z czym nasze możliwości edycji kodu są ograniczone :(. Na przykładzie MyBloLog: jedyne co możemy zrobić to zakomunikować widgetowi, że zamiast np. 30 ostatnich odwiedzających chcemy wyświetlić 10. Jest to jeden z powodów dla których nie stosuje tu widgetów – zbyt mały wpływ na treść widgeta i jego układ.
„szyba” to koszmarny błąd.
tam powinien się znaleźć:
<span>wykop</span>
do cssów reguła:
.soc a span{
display:block;
width:16px;
height:16px;
text-indent:-99em
}
a nie przeźroczysty gif… ugh
Może dlatego tak słabo mi się dziś spało ;). Jak już mówiłem w podziękowaniach: O tym w kolejnym wpisie, bo jeszcze nie przetrawiłem informacji i muszę zastosować ją na stronie. Krok po kroku znaczy czasem popełnianie błędów, nawet przez piszącego :).
Span? Div? Neee Panowie… :-)
Najlepiej zbiór tych odnośników do portali społecznościowych przedstawić jako listę (ul) żeby było semantycznie.
Tylko jak wtedy skorzystać z jednego obrazka? :)
Np. tak :-).
Dziękuję, już zagladam do kodu :)
@Szymon: Oczywiście że lista. To co podałem to wewnątrz listy.
@Łukasz: tak samo.
Normalnie, tak samo jak w przypadku divów.
Dla li:
float: left; width: 16; height: 16; background: url(x.png) top left no-repeat;i dla poszczególnych li poszczególna wartość background-position.display: block; dla ul li a i nie powinno być wielkich zawirowań.
Pozostaje kwestia czy wpisujemy tekst w anchor text żeby validator nie miał oporów i wyrzucamy go poza widok użytkownika, czy zostawiamy puste.
Jeżeli coś palnąłem to mnie poprawcie, bo z pamięci pisałem.
Wygląda na to, że niewiele się pomyliłem.
Ja bym to tak zrobił.
PNG 32 kolory, 806 bajtów. Moim zdaniem lepsze rozwiązanie w tym wypadku.
PS. Firebug ciągle na czerwono mi świeci w związku z jakimiś błędami gravatar.com? Trochę to rozprasza, tym bardziej, że przybywa dokładnie 1 błąd na każdy znak napisanego komentarza. :)
Jedyny problem w tym, że nie działa pod IE ;).
Ehmm..Szymon, a „Sobczak” na „Sobek” byś mi zmienił? :)
Zastanowię się :P.
Odnośnie tych błedów w Firebug’u to spojrzę co może być przyczyną. Dziękuję :)
[...] „8 kroków do zmniejszenia ilości obrazków na stronie” to świetny artykuł, w którym Topblogger (Łukasz Sobczak) poruszył kwestię optymalizacji grafiki (i kodu) prezentacji ikonek-odnośników do portali społecznościowych. [...]
<!DOCTYPE html
PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN”
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”pl” xml:lang=”pl” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>soc</title>
<style type=”text/css”>
li{background-image:url(socicons.gif);list-style:none;margin:0;float:left;margin-right:2px}
a{display:block;width:16px;height:16px;text-indent:-99em}
li.t{background-position:-17px}
li.w{background-position:-32px}
</style>
</head>
<body>
<ul>
<li class=”d”><a href=”#”>del.i</a></li>
<li class=”t”><a href=”#”>tech</a></li>
<li class=”w”><a href=”#”>wykop</a></li>
</ul>
</body>
</html>
Dziękuję, jeszcze trochę całkowicie przepiszę wtyczkę sociable :)
[...] 8 kroków do zmniejszenia ilości obrazków na stronie Łukasz Sobek rozprawia się z prezentacją odnośników do portali społecznościowych. [...]
Ja podobny efekt uzyskałem ustawiając obrazek z ikonami jako tło dla kontenera linków. Same linki pozostają przezroczyste, a ja je jedynie pozycjonuje w odpowiednich miejscach (margines). Dodatkowa zaleta, to nieco mniejszy kod CSS, bo nie trzeba ustawiać przesunięcia tła dla poszczególnych linków.
Tak po za tematem:
Z ciekawości sprawdziłem pod IE 6 i strasznie mi się blog rozsypał. Zdaje się, że problem leży w „krzaczkach” z komentarza przy bloku z treścią (wina kodowania?). Popraw to w CSS-ie, a powinno być OK.
Dziekuję, właśnie szykowałem się na batalie z problemem IE 6.
Sposób z pojemnikiem bardzo mi się podoba. Dobrze, że istnieje wiele rozwiązań tego samego problemu :)
[...] momencie pogubicie się zapraszam do wpisów Jak przyspieszyć bloga dla szybkich łącz i 8 kroków do zmniejszenia ilości obrazków na stronie które zawierają pierwsze dwa odcinki drogi, której finałem jest ten [...]
Lista odnośników społecznościowych…
h3 Wcześniejsze głosy w dyskusji h3
ul
li 8222 a href http: zaistniejwsieci.pl 2008 02 22 semantyka-html-lista-nieuporzadkowana title Przeczytaj wpis Semantyka HTML: lista nieuporządkowana a na blogu a href http: zaistniejwsie…
A jednak rozwinąłeś swoją myśl w odrębnym wpisie. Przyjemnie się czytało, dziękuję :)
[...] 8 kroków do zmniejszenia ilości obrazków na stronie [...]
[...] 8 kroków do zmniejszenia ilości obrazków na stronie [...]