Sobota, 21 maja 2022

Duże tła stron internetowych - co należy, a czego nie należy robić

5 marca 2022

Duże tła wywierają bardzoduży wpływ wizualny na strony internetowe. Projektant stron internetowych ma możliwość zabawy różnymi zmiennymi projektowymi, które są zwykle wykorzystywane przez fotografów, takimi jak głębia ostrości czy ostrość. Tłem nie muszą być tylko zdjęcia, ale także dowolne inne duże ilustracje, a nawet wideo.

W tym artykule poznasz różne style dużych teł i dowiesz się, jak z nich korzystać. Dowiesz się także, jaki wpływ mają duże tła na przepustowość łącza i ogólną wydajność witryny. Na koniec dowiesz się, jak prawidłowo wdrażać duże tła.

Style dużych teł

Zasadniczo istnieje wiele różnych stylów, ale najczęściej używane style na stronach internetowych to:

* Fotografie jako tła
* Grafika i ilustracje jako tła
* animacje jako tła.

Fotografiei ilustracje są najczęściej używane, animacje są nadal eksperymentalne, ale ponieważ przepustowość łącza internetowego jest coraz tańsza, a szybkość połączenia internetowego coraz większa, więcej stron internetowych może sobie pozwolić na ich użycie.

Najczęstsze błędy popełniane przy stosowaniu dużych teł

Jednym z najczęstszych problemów związanych z dużymi tłami jest konieczność dostosowania ich do wielu różnych rozdzielczości ekranu. Projektant stron internetowych powinien przetestować projekt strony przy użyciu jak największej liczby różnych rozdzielczości ekranu, aby uniknąć jednego z powszechnych błędów związanych z używaniem dużych teł.

W szczególności projektant stron internetowych powinien eksperymentować z różnymi szerokościami okien przeglądarek, ponieważ wielu użytkowników nie rozszerza swoich przeglądarek do pełnego rozmiaru ekranu, nawet jeśli mają ekran o dużej rozdzielczości.

Przyjrzyjmy się najczęstszym błędom, których projektant stron internetowych powinien unikać, mając do czynienia z dużymi tłami.

Obrazy są wyśrodkowane, kafelkowane lub skalowane

Użycie wyśrodkowanego, kafelkowanego lub przeskalowanego obrazu jako tłanie jest błędem , a wręcz jest zalecane w celu zachowania symetrii strony, jednak niewłaściwe użycie tych technik może sprawić, że odwiedzający stronę będą mieli wrażenie, że jest ona przeciętna lub mierna.

Przyjrzyjmy się poniższemu obrazkowi witryny. Ten zrzut ekranu został utworzony w rozdzielczości 1024×768:

Jak widać, w tej rozdzielczości nie ma nic złego w projekcie, ale zobaczmy, jak wygląda on w rozdzielczości 1680×1050:

Obraz użyty w tle jest wyśrodkowany. Wygląda on jak zwykły obraz na stronie internetowej i nie wtapia się w tło. Unikaj używania obrazów tła w ten sposób, upewniając się, że zdjęcie ma wystarczającą szerokość dla najczęściej używanych rozdzielczości ekranu. Najlepszym rozwiązaniem jest wtopienie rogów obrazu w tło, dzięki czemu użytkownicy o większych rozdzielczościach ekranu nie będą tego zauważać.

Przycinanie obrazu w celu użycia go jako tła może być trudne, jeśli nie wiesz, jak poszczególne przeglądarki będą renderować i powielać fragmenty obrazu.

Każda przeglądarka może powielać obrazy i używać ich na stronach internetowych lub jako tła za pomocą CSS (kaskadowych arkuszy stylów).

Obraz jest powielany za pomocą właściwości CSS background w celu zdefiniowania obrazu i określenia sposobu jego powielania. Na przykład:

body {
background: url("images/sample.jpg") repeat-x;
}

Powyższy kod wstawia obrazek sample.jpg jako tło do elementu body i powtarza go w poziomie. Atrybut repeat-x ustawia powtarzanie obrazka wzdłuż osi X. Można użyć następujących stylów powtarzania:

* repeat-x, aby powtórzyć obraz w poziomie*
repeat-y, aby powtórzyć obraz w pionie*
repeat-xy, aby powtórzyć obraz zarówno w poziomie, jak i w pionie*
no-repeat
, aby
nie powtarz


ać obrazu

Poniżej przedstawiono przykłady kodu CSS dla każdej z metod:

body {
background: url("images/sample.jpg") repeat-x;
}

body {
background: url("images/sample.jpg") repeat-y.; } body { background: url("images/sample.jpg") repeat-x;
}

body {
background: url("images/sample.jpg") repeat-xy; } body { background: url("images/sample.jpg") repeat-xy;
}

body {
background: url("images/sample.jpg") no-repeat;
}

Zwróć uwagę, że nie jesteś ograniczony do ustawienia obrazka tła w elemencie body. Można go ustawić na dowolnym elemencie na stronie.

Aby poprawnie ułożyć obrazek w kafelki, należy upewnić się, że krawędzie obrazka są zgodne z wzorcem, co pozwoli na utworzenie jednolitego tła na stronie. Na przykład na poniższym obrazku widać, jak wzór, który jest zatytułowany, został nieprawidłowo wycięty. Widać na nim krawędzie poszczególnych obrazów:

Aby stworzyć jednolite tło, projektant stron internetowych musi przyciąć obrazek w taki sposób, aby lewa krawędź zlewała się z prawą, a górna z dolną, jak na poniższym obrazku:

Widać, że krawędzie poszczególnych obrazków płynnie łączą się ze sobą. Ten obraz został utworzony z poniższego wzoru:

Podczas skalowania obrazu najważniejszym czynnikiem jest jego jakość i docelowa rozdzielczość. Projektant stron internetowych powinien również wziąć pod uwagę różne formaty obrazów, które są zoptymalizowane dla poszczególnych stylów obrazów.

Najpowszechniej używane formaty obrazów to:

* GIF - format obrazu graficznego
* Jpeg - wspólna grupa ekspertów ds. obrazów
* PNG - przenośna grafika sieciowa.

GIF to format obrazu zoptymalizowany pod kątem prostej grafiki, takiej jak tekst lub proste kształty, koła, linie itp. Nie nadaje się on do zdjęć. Na przykład:

Przykładowy GIF, rozmiar obrazu: 3,3KB

Przykładowy plik Jpeg, rozmiar obrazu: 13,5 KB

Widać wyraźnie, że format obrazu Jpeg nie nadaje się do grafiki. Format ten powinien być raczej stosowany do zdjęć, a do grafiki należy używać formatu GIF.

W przypadku dużych obrazów bardzo ważna jest optymalizacja obrazu w celu zaoszczędzenia pasma (więcej o pasmie w dalszej części poradnika). Należy unikać skalowania małych obrazów, ponieważ rozdzielczość obrazu znacznie spad nie, co widać na poniższym zrzucie ekranu strony internetowej (spróbuj obejrzeć go na monitorze o dużej rozdzielczości):

Problem z powyższym przykładem polega na tym, że witryna automatycznie skaluje obraz zgodnie z rozdzielczością ekranu, co powoduje, że obraz tła staje się rozpikselowany, gdy jest oglądany na wyświetlaczach o dużej rozdzielczości.

Wpływ dużych teł na szerokość pasma i wydajność witryny

Duże tłazazwyczaj oznaczają duże rozmiary plików, co może mieć ogromny wpływ na przepustowość łącza oraz komfort korzystania z witryny.

Przepustowośćto ilość danych, które są przenoszone z jednego miejsca do drugiego, a konkretnie z serwera do klienta. Stosowanie dużych grafik może znacznie wydłużyć czas ładowania strony.

Dlatego tak ważna jest optymalizacja obrazów poprzez zastosowanie odpowiedniej rozdzielczości i formatu, a także optymalizacja innych zasobów strony, takich jak pliki CSS i Javascript.

Przyjrzyjmy się następującemu przykładowi:

Oto raport użycia sieci dla tej witryny:

Odnotowano 12 żądań i pobrano łącznie 627 KB. Oznacza to, że za każdym razem, gdy ktoś odwiedza tę witrynę, pobierane jest 627 KB, co zwiększa całkowitą przepustowość witryny. Jeśli witryna odwiedzana jest średnio przez 50 osób dziennie, daje to łącznie 31 350 MB dziennie.

Korzystając z wtyczki Firebug dla Firefoksa, możesz zobaczyć, jakie zapytania pobiera twoja witryna, i zorientować się, jak ją zoptymalizować.

Wskazówki i triki

Nie zaniedbuj dużych rozdzielczości i rozdzielczości, na których nie możesz przetestować witryny. Możesz skorzystać z usług takich jak Browsershots, aby przetestować swoją witrynę na różnych rozdzielczościach ekranu, w różnych przeglądarkach itp.

Wysokie rozdzielczości to nie wszystko, co należy brać pod uwagę przy projektowaniu witryn, należy również uwzględnić mniejsze rozdzielczości ekranu. Co się stanie, jeśli strona z dużym tłem będzie oglądana z telefonu komórkowego? Projektant stron internetowych powinien projektować dla każdej przeglądarki, aby zaprezentować witrynę szerokiemu gronu odbiorców. Obecnie coraz więcej osób przegląda strony internetowe za pomocą urządzeń takich jak iPhone i inne smartfony.

Niekiedy możesz chcieć dostosować witrynę do konkretnej przeglądarki na podstawie urządzenia, z którego korzysta odwiedzający, lub tylko na podstawie rozmiaru ekranu, używając specjalnego arkusza stylów. Za pomocą niewielkiego kodu Javascript można utworzyć przełącznik arkuszy stylów lub wykorzystać już przygotowany kod. W witrynie A List Apart znajduje się świetny poradnik, jak utworzyć przełącznik stylów.

Inną sztuczką jest użycie emulatora telefonu komórkowego, czyli oprogramowania, dzięki któremu można zobaczyć, jak dana strona wygląda na konkretnym telefonie komórkowym. Można na przykład skorzystać z dodatku do Firefoksa emulator iPhone'a.

Optymalizacja tła jest niezbędna przy użyciu takich technik, jak CSS sprites.

Jeśli zdjęcie, które chcesz wykorzystać w tle witryny, jest zbyt małe lub będzie wyglądało niezręcznie, stwórz cały projekt wokół tego zdjęcia. Na przykład:

Jak widać, zdjęcie jest małe celowo, co dodaje uroku całemu projektowi.

Kolejną wskazówką jest utworzenie jednokolorowej szerokiej przestrzeni na samym zdjęciu, a następnie użycie tego koloru do pomalowania reszty tła, dzięki czemu uzyskasz płynne połączenie między zdjęciem a właściwym tłem.

W tym przypadku zdjęcie jest wyśrodkowane, lewa i prawa krawędź mają pojedynczy szarawy kolor, a reszta tła jest wypełniona tym kolorem.

Najlepszą zalecaną praktyką jest stosowanie dużych obrazów, o szerokości powyżej 1700 pikseli, które pokrywają prawie 95% dostępnych obecnie rozmiarów wyświetlaczy.

Pokaz dużych teł

Czy pominęliśmy jakieś dobre przykłady? Zapraszamy do dodania ich poniżej.