2011-02-08 7 views
6

Często mówi się, że podczas układania tła strony internetowej z obrazem w tle wydajność jest lepsza w przypadku obrazów o większych rozmiarach, ponieważ wymagają one rzadziej kafelkowania. Przez jakiś czas robiłem je 8x8 px lub wielokrotnościami 8.Optymalny rozmiar kafelków tła CSS

Ale czy ktoś ma linki do danych, które potwierdzają, że tak jest w różnych przeglądarkach, biorąc pod uwagę czasy renderowania lub obciążenie procesora w różnych punkty renderowania strony?

+1

To znacznie różni się między przeglądarkami. Może warto dodać, które najbardziej Cię interesują. –

+0

Najbardziej zainteresowany IE 8/9 i najnowszymi wersjami Firefoksa/Safari/Chome/Opera. –

Odpowiedz

0

Nie sądzę, że istnieje "optymalny rozmiar", ale ogólna opinia jest taka, że ​​większe wymiary są lepsze niż małe: patrz this question i this one too.

+0

Jasne, wiem, że to ogólna opinia. I jestem pewien, że to również prawda. Chodzi mi szczególnie o dane i przykłady, które to potwierdzają. –

6

bym sobie wyobrazić, że liczy się bardzo mało w tych nowoczesnych przeglądarkach wymienionych w swoim komentarzu:

IE 8/9 i najnowszymi wersjami Firefox/Safari/Chome/Opera

jednak słyszałem o błąd w IE8, jeśli chodzi o wizerunek dokładnie wielkości 1px * 1px:

Internet Explorer 8 nie wykonuje powtórzenie piksela 1x1 półprzezroczyste tło poprawnie gdy jakikolwiek inny element na strona jest za pomocą „-ms filtr” drective dla przejrzystości alpha:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
i demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

Więc 8x8 wydaje się wystarczająco dobry rozmiar do użycia. Byłbym zaskoczony, gdyby ktokolwiek z Internetów dbał o to wystarczająco, aby rygorystycznie je porównywać.


znalazłem ten, który omawia ten temat:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

upewnij się także przeczytać komentarze.

Podsumowując, mam zamiar zacytować sobie z miesiąc temu:

bym sobie wyobrazić, to znaczy bardzo niewiele w [tym] nowoczesnych przeglądarek [tj 8/9 i najnowszych wersjach Firefox/Safari/Chome/Opera] wpisałeś w komentarzu.

+1

"Najmniejsze pobieranie, jakie mogą robić przeglądarki, to 1K bajtów". Wydaje się, że to całkowicie niewłaściwy sposób wyjaśnienia tego.Czy ma na myśli, spróbuj utrzymać go poniżej 1KB, aby uniknąć wysyłania wielu pakietów. To ma sens, ale sposób, w jaki napisał, brzmi, jakby przeglądarka zawsze pobierała 1k dla dowolnej odpowiedzi. To na pewno nie może być prawda? –

+0

To konkretne zdanie jest źle sformułowane - chodzi o to, że jeśli pobierzesz obraz o wielkości 200 bajtów, nadal będzie to prawie taki sam czas jak obraz o rozmiarze 1 KB, ponieważ będzie on wymagać wysłania jednego pakietu. Udostępniłem ładniejszą wersję tego słowa, wyrażając intencje, które za nim stoją (patrz link MTU). – thirtydot

+1

Ciekawa myśl, ale to nie tak działa. Pakiety nie są wyściełane do rozmiaru MTU ani niczego ... jest to * maksymalna * jednostka transferu, a nie minimum. Nie tak, jak przechowywanie plików na dysku twardym, zajmujących co najmniej 4096 bajtów, bez względu na to, jak małe. Krótszy jest jeszcze lepszy, jeśli chodzi o czas transmisji, choć koszt krańcowy drugiego pakietu jest znacznie wyższy niż koszt dodatkowy jednego dodatkowego bajtu w pierwszym pakiecie. OP nie był zainteresowany transferem danych, tylko renderowaniem prędkości (podobno). –

1

W przypadku niektórych klientów poczty e-mail obraz nie zostanie powtórzony, chyba że obraz tła ma rozmiar co najmniej 25 x 25, więc ustaliłem, że jest to mój domyślny rozmiar.