Cięcie grafiki - mniej a wicej ? czywiecej a mniej ? Opcje

[lled3]

wszedzie pisza, ze lepiej wiecej, mniejszych plikow - bo one sie szybciej laduja na stronie.

czemu zatem onet.pl doscdziwnie cały lay wrzuca do 2-3 plikow - wrecz na sile.

http://www.onet.pl/_d/378acd482f45104827b7...6d371,s_1_0.png

?

[kwiateusz]

przy tak duzych serwisach trzeba dbać o ilośc zapytan do serwera jakby wszystko podzielili na pojedyncze obrazy to by mieli lekko liczac z 20 requestow wiecej. Więc na małych serwisach można stosowac wiele małych plików do przyspieszenia ich ładowania, ale w duzych zawsze jest coś za coś

[Crozin]

wszedzie pisza, ze lepiej wiecej, mniejszych plikow - bo one sie szybciej laduja na stronie.

Gdzie tak, kto tak... pisze? Wiele obrazków to konieczność wykonania wielu żądań do serwera - co generuje oczywiście opóźnienia. Fakt, faktem mniejsze obrazki (PNG) da się często lepiej odchudzić niż te same w dużych plikach z innymi obrazami.

A to z onetu to przykład http://www.google.pl/search?hl=pl&q=CS...=Szukaj&lr=

[mike]

Stara dobra technika. Jest szeroko stosowana.
Oto przykładowe obrazki z Google Maps:
http://maps.gstatic.com/mapfiles/hpimgs12.png
http://maps.gstatic.com/intl/pl_ALL/mapfiles/iw3.png
http://maps.gstatic.com/intl/pl_ALL/mapfiles/iws3.png
http://maps.gstatic.com/intl/pl_ALL/mapfil..._sprite_003.png

Oto więcej technik optymalizacji (na przykład, obrazki w innej domenie): Best Practices for Speeding Up Your Web Site

[Pilsener]

Jest to CSS sprite, technika niestety obca 99% webmajsterów (jak zresztą większość technik dotyczących kodowania i standardów, spora w tym wina "fachowej" literatury, widziałem chyba tylko jedną czy dwie pozycje, gdzie autorzy wogóle zauważają temat). Na czym to polega widać - zamiast 30 zapytań http mamy jedno i to w css a nie staroświeckim <img>, oto dobra strona drogich serwerów i transferu - w końcu wymusza to używanie takich technik, w przypadku dużych i często odwiedzanych serwisów zysk może być bardzo wymierny.

Edit: Nie miałem na myśli tego, że <img> jest staroświecki tylko staroświeckiej techniki, która polega na wstawianiu grafiki layoutu poprzez <img /> w HTML a nie background w CSS.

Ten post edytował Pilsener 18.06.2009, 12:11:39

[Crozin]

w css a nie staroświeckim <img>

Proponuję dowiedzieć się czym jest, a czym nie jest element IMG. Na pewno nie jest staroświecki.

[prszakal]

Rozwijając wypowiedzi przedmówców zdecydowanie lepiej ze względu na szybkość ładowania się strony jest wykorzystać technikę CSS Sprites polegającą na łączeniu malych obrazków w jeden większy.

[erix]

Ale nie zawsze jest to możliwe. Chociażby ze względu na PNG-24 dla IE6. Tam nie da się wypozycjonować tła elementu.

[vokiel]

Nie zawsze.

Nie uda się też dla elementów powtarzalnego w pionie/poziomie tła jeśli są razem z innymi obrazkami. Da się jedynie w sepecjalnie przygotowanym css sprites pod takie tła (powtarzanie poziomo - obrazki ułożone jeden pod drugim, powtarzanie pionowo - obrazki ułożone jeden obok drugiego).