Jak zmniejszyć liczbę obrazków na stronie na przykładzie TopBlogger.pl

Strona główna topblogger.pl składa się z 10 elementów, co powoduje, że niezależnie od tego jaką technologią posługuje się przeglądarka, strona ładuje się raczej szybko. Na pierwszy rzut oka widzimy wiekszą ilość obrazków, ale podobnie jak w sztuczkach magicznych cała tajemnica polega nie na tym co widać, ale na tym czego nie widać.

Jeśli nie czytaliście wczorajszego wpisu i w pewnym 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 wpis.

Obr. 1. Powiększony wycinek pliku bar.gif

Tak naprawdę wszystkie elementy strony poza logo i tłem z chmurkami przedstawiają wycinki obrazka bar.gif. Niżej krok po kroku opiszę sposób w jaki na stronie TopBlogger bar.gif wykorzystany jest w trzech miejscach a wyświetlanie wycinka odbywa się za pomocą arkusza stylów style.css.

Górny pasek nawigacyjny – HTML

W pliku HTML znajduje się nastepujący kod, znacznikiem [...] zastąpię obecnie nieważną część kodu. Tak wygląda polecenie stworzenia obszaru w którym pojawi się górny pasek nawigacyjny:

<div>[...]</div>

Gdybym chciał użyć obszaru wielokrotnie, musiałbym oznaczyć go za pomocą klasy (coś jak chusteczka wielokrotnego użytku) i znacznika class="pasektop", ale skoro pasek pojawia się na stronie tylko raz skorzystałem z identyfikatora (coś jak dowód osobisty – każdy jest jedyny w swoim rodzaju) i znacznika id="pasektop":

<div id="pasektop">[...]</div>

Górny pasek nawigacyjny – CSS

Informacje o tym jak obszar o nazwie pasektop ma wygladać, znajduje się w arkuszu stylów pod nazwą style.css. W pliku CSS najpierw zaznaczamy, że w kodzie HTML istnieje element o nazwie pasektop dla którego mamy specjalne polecenia:

#pasektop{}

Znaczek # informuje o tym, że #pasektop w arkuszu stylów odnosi się do elementu w kodzie HTML określonym jako id="pasektop" . Gdybym w HTML użył znacznika class="pasektop"  w pliku CSS zamiast kratki użyłbym kropki i napisał .pasektop{}.

Pasek otrzymuje tło

#pasektop {background: url(‘gfx/bar.gif’);}

Tło ma być wyświetlane od lewego górnego rogu obszaru

#pasektop {background: url(‘gfx/bar.gif’) top left;}

Pasek ma mieć dokładnie 864 pikseli szerokości (tak szerokie jest niebieskie tło)

#pasektop {background: url(‘gfx/bar.gif’) top left; width: 864px;}

Pasek ma być wysoki na 32 piksele z czego 5 pikseli to odstęp od górnej krawędzi, czyli 27 pikseli wysokości + 5 pikseli odstępu.

#pasektop {background: url(‘gfx/bar.gif’) top left; width: 864px; height: 27px; padding-top: 5px;}

Gotowe:

Pasek jest szeroki na 864 piksele i wysoki na 32, tło wyrównane jest do górnego lewego rogu w związku z czym jakakolwiek treść obrazka nie znajdująca się w tym obszarze będzie niewidoczna. To także wykorzystałem i plik zawiera jeszcze dwa elementy: gradient oraz ikonkę RSS.

Treść – HTML

Obszar treści również jest unikatowy w związku z czym kod HTML wygląda następująco:

<div id="tresc">[...]</div>

Treść – CSS

W arkuszu stylów określamy jak obszar o nazwie treść ma wyglądać:

#tresc {}

I teraz krok po kroku opisujemy cechy pojemnika treść:

Obszar otrzymuje tło

#tresc {background: url(‘gfx/bar.gif’);}

nie chcemy ponownie niebieskiego paska, więc przesuniemy obrazek o 44 piksele do góry

#tresc {background: url(‘gfx/bar.gif’) 0px -44px;}

Obrazek nie wypełni całego tła więc w pozostałej części obszaru tło ma być białe

#tresc {background:#fff url(‘gfx/bar.gif’) 0px -44px;}

Obszar ma mieć 840 pikseli szerokości

#tresc {background:#fff url(‘gfx/bar.gif’) 0px -44px; width: 840px;}

Gotowe:

Pasek jest szeroki na 840 piksele a jego wysokość zależy od ilości treści. Tło jest wyrównane do lewej strony (0px), dodatkowo 44 piksele obszaru zajmowanego przez niebieskie tło są schowane. W obrazku gradient znajduje się na samym dole, więc obszar dla którego nie starcza obrazka wypełnia odcień biały. Została ikonka RSS.

Ikonka RSS – HTML

W przypadku ikonki RSS jest inaczej, pojawia się ona w dwóch miejscach na stronie, w pasku bocznym i pod każdym wpisem, więc jak wspomniałem w części Górny pasek nawigacyjny – HTML nie możemy stosować identyfikatora, trzeba pokazać klasę, nazweałem ją feedimg:

<div class="feedimg">[...]</div>

Ikonka RSS – CSS

Wielokrotne pojawianie się danego elementu (technicznie mówiąc "klasa") w pliku arkusza stylów oznaczamy nie kratką lecz kropką:

.feedimg {}

Po raz trzeci opisujemy właściwości pojemnika <div>:

Pojemnik otrzymuje tło

.feedimg {background: url(‘gfx/bar.gif’);}

Tło ma pokazywać obszar obrazka w którym pojawia się ikonka

.feedimg {background: url(‘gfx/bar.gif’) -840px -44px;}

Pojemnik ma mieć takie rozmiary jak obszar obrazka, w którym pojawia się ikonka (czyli 54 piksele szerokości i 52 piksele wysokości)

.feedimg {background: url(‘gfx/bar.gif’) -840px -44px; width: 54px; height: 52px;}

Pojemnik ma być po lewej stronie a wybrany tekst ma go opływać po prawej

.feedimg {float: left; background: url(‘gfx/bar.gif’) -840px -44px; width: 54px; height: 52px;}

I to by było na tyle gdyby nie ostatnie wymaganie – obrazek ma być odnośnikiem do kanału informacyjnego http://feeds.feedburner.com/Topblogger.

Odnośnik do kanału RSS – HTML

Ta część powstała dzięki pomocy Marcina i jego wpisom na blogu oraz Pavla. Dziekuję :)

Odnośnik wstawiamy za pomocą znacznika <a>:

<a></a>

Dodajemy informację o tym dokąd ten odnośnik ma prowadzić:

<a href="http://feeds.feedburner.com/Topblogger"></a>

I jeszcze tekst, który ma się pojawiać gdy osoba będzie korzystała z opcji czytania na głos odnośników przez komputer:

<a href="http://feeds.feedburner.com/Topblogger">kanał informacyjny</a>

Całość umieszczamy wewnątrz wcześniej przygotowanego pojemnika feedimg:

<div class="feedimg"><a href="http://feeds.feedburner.com/Topblogger">kanał informacyjny</a></div>

Odnośnik do kanału RSS – CSS

W tej cześci skorzystamy z pewnej cechy arkuszy stylów, która pozwala okreslić wszystkie elementy znajdujące się wewnątrz jednego pojemnika; w tym wypadku określimy wszystkie odnośniki które pojawiają się wewnątrz obszaru feedimg:

.feedimg a {}

Ten kawałek kodu w pliku CSS mówi tyle co "dla każdego odnośnika <a> znajdującego się wewnątrz pojemnika klasy .feedimg zrób to, co jest w nawiasach.

Pozostaje jedynie powiedzieć co chcemy osignąć:

Chcemy aby tekst wypełniał przestrzeń, więc musimy okreslić, że odnośnik ma zachowywać się jak prostokąt:

.feedimg a {display:block;}

Prostokąt/tekst ma mieć rozmiary jak pojemnik:

.feedimg a {display:block; width: 54px; height: 52px;}

Tekst którego uzyliśmy dla odnośnika ma nie zasłaniać tła obrazka, więc przesuwamy go:

.feedimg a {display:block; width: 54px; height: 52px;
text-indent: -99em;}

Prostokąt ma się nie podkreślać i być bez obramowania:

.feedimg a {display:block; width: 54px; height: 52px;
text-indent: -99em; text-decoration: none; border: 0px;}

Gotowe:

Odnośnik wyświetlany jest w postaci prostokątu który zajmuje całą powierzchnię pojemnika, tekst ukryliśmy, podobnie jak nadliczbowe części obrazka: poprzez wyrzucenie go poza okno. Dodatkowo odnośnik nie będzie miał ani ramki, ani nie będzie się podkreślał.

Podsumowanie

Przy opisie jak za pomocą HTML i CSS z trzech obrazków zrobić jeden, pominąłem zagadnienie formularza wyszukiwania które spowodowało, że na toblogger.pl stosunek zaoszczędzonych obrazków wynosi nie 3 do 1, lecz 5 do 1.

Zyskanie 0,2 sekundy na każdym elemencie i tym samym 0,8 sekund na całości samo w sobie nie jest oszołamiające, ale zgodnie z zasadą krok po kroku i włączając oszczędności uzyskane we wpisie 8 kroków do zmniejszenia ilości obrazków na stronie strona ładuje się średnio 2 sekundy szybciej niż przedtem. Krok po kroku do celu.

Na zakończenie spytam: Czy wpis jest użyteczny? Dlaczego? Dlaczego nie?