Wiele witryn wymaga ciężkich zasobów, np. obrazów, które nie są zoptymalizowane pod kątem określonych ekranów, i wysyła duże pliki CSS ze stylami, których niektóre urządzenia nigdy nie będą używać. Korzystanie z zapytań o multimedia to popularna technika wyświetlania dostosowanych arkuszy stylów i zasobów na różnych ekranach w celu zmniejszenia ilości danych przekazywanych użytkownikom i przyspieszenia wczytywania strony. Z tego przewodnika dowiesz się, jak używać zapytań o media do wysyłania obrazów o maksymalnym rozmiarze. Jest to technika znana jako obrazy elastyczne.
Wymagania wstępne
W tym przewodniku zakładamy, że znasz Narzędzia deweloperskie w Chrome. Możesz użyć Narzędzi deweloperskich w innej przeglądarce. Wystarczy zmapować zrzuty ekranu z Narzędzi deweloperskich w Chrome, które znajdziesz w tym przewodniku, na odpowiednie funkcje w wybranej przeglądarce.
Elastyczne obrazy tła
Najpierw przeanalizuj ruch sieciowy w niezoptymalizowanej wersji demonstracyjnej:
- Otwórz niezoptymalizowaną wersję demonstracyjną w nowej karcie Chrome.
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Odśwież stronę.
Jak widać, jedyny żądany obraz to background-desktop.jpg, który ma rozmiar 1006 KB:
Zmień rozmiar okna przeglądarki i zwróć uwagę, że w dzienniku sieci nie są widoczne żadne nowe żądania wysyłane przez stronę. Oznacza to, że na wszystkich ekranach jest używane to samo tło obrazu.
W pliku style.css znajdziesz style, które kontrolują obraz tła:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Oto znaczenie poszczególnych właściwości:
background-position: center center: wyśrodkuj obraz w pionie i poziomie.background-repeat: no-repeat: obraz wyświetla się tylko raz.background-attachment: fixed: unikaj przewijania obrazu tła.background-size: cover: zmień rozmiar obrazu, aby zakrywał cały kontener.background-image: url(images/background-desktop.jpg): adres URL obrazu.
Połączenie tych stylów informuje przeglądarkę, że ma dostosowywać obraz tła do różnych wysokości i szerokości ekranu. To pierwszy krok na drodze do uzyskania elastycznego tła.
Korzystanie z jednego obrazu tła na wszystkich ekranach podlega pewnym ograniczeniom:
- Wysyłana jest taka sama liczba bajtów, niezależnie od rozmiaru ekranu, nawet jeśli na niektórych urządzeniach, takich jak telefony, mniejsze i mniej obciążone tło obrazu wyglądałoby równie dobrze. Ogólnie warto wysyłać jak najmniejszy obraz, który nadal dobrze wygląda na ekranie użytkownika, aby poprawić wydajność i zaoszczędzić dane użytkownika.
- Na mniejszych urządzeniach obraz zostanie rozciągnięty lub przycięty, tak aby zakrywał cały ekran, co może spowodować ukrycie części tła.
W następnej sekcji dowiesz się, jak zastosować optymalizację, aby wczytywać różne obrazy tła w zależności od urządzenia użytkownika.
Używanie zapytań o multimedia
Korzystanie z zapytań o multimedia to popularna technika deklarowania arkuszy stylów, które mają zastosowanie tylko do określonych rodzajów multimediów lub urządzeń. Są one implementowane za pomocą reguł@media, które umożliwiają zdefiniowanie zestawu punktów przerwania zawierających określone style.
Gdy zostaną spełnione warunki określone przez regułę @media (np. o określonej szerokości ekranu), zostanie zastosowana grupa stylów zdefiniowanych w punkcie przerwania.
Opisane poniżej czynności umożliwiają zastosowanie zapytań o multimedia do witryny, by używać różnych obrazów w zależności od maksymalnej szerokości urządzenia, z którego korzysta dana strona.
- W pliku
style.cssusuń wiersz zawierający adres URL obrazu tła:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- Następnie utwórz punkt przerwania dla każdej szerokości ekranu na podstawie typowych wymiarów w pikselach, jakie zwykle mają ekrany telefonów komórkowych, tabletów i komputerów:
Na urządzeniach mobilnych:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Na tabletach:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Na komputerach:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Otwórz w przeglądarce zoptymalizowaną wersję pliku style.css, by zobaczyć wprowadzone zmiany.
Mierzenie w przypadku różnych urządzeń
Następnie zwizualizuj wynikową witrynę na ekranach o różnych rozmiarach i na symulowanych urządzeniach mobilnych:
- Otwórz zoptymalizowaną witrynę w nowej karcie Chrome.
- Zmniejsz widoczny obszar (mniej niż
480px). - Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Odśwież stronę.
Zwróć uwagę, jak wysłano żądanie obrazu
background-mobile.jpg. - Powiększ widoczny obszar. Gdy jest większa niż
480px, zwróć uwagę, jak wymagane jest żądaniebackground-tablet.jpg. Gdy jest większa niż1025px, zwróć uwagę, jak wymagane jest żądaniebackground-desktop.jpg.
Zmiana szerokości ekranu przeglądarki spowoduje wysłanie żądania nowych obrazów.
Jeśli szerokość jest mniejsza od wartości zdefiniowanej w punkcie przerwania na urządzeniu mobilnym (480 pikseli), pojawi się ten log sieci:
Rozmiar nowego tła na urządzenia mobilne jest 67% mniejszy niż tło na komputery.
Wpływ na największe wyrenderowanie treści (LCP)
Elementy z obrazami tła CSS są uznawane za największe wyrenderowanie treści (LCP), jednak obrazy tła CSS nie są wykrywalne przez skaner wstępnego wczytywania przeglądarki, co oznacza, że jeśli nie zachowasz ostrożności, możesz opóźnić LCP witryny.
Pierwszą opcją, nad którą należy się zastanowić, jest to, czy obraz kandydujący do LCP może działać w elemencie <img> z atrybutami srcset i sizes w celu zapewnienia responsywności. Skaner wstępnego wczytywania przeglądarki wykryje elementy <img> i wyśle do nich żądania, gdy parser będzie zablokowany podczas renderowania.
Jeśli nie możesz (lub nie chcesz) uniknąć używania obrazu tła CSS, drugą opcją jest wstępne wczytanie obrazów elastycznych, aby zapewnić wstępne wczytywanie obrazów o odpowiednim rozmiarze widocznego obszaru. Atrybuty elementów <link> media, imagesrcset i imagesizes wskazują przeglądarce, że dana wskazówka dotycząca zasobu ma zastosowanie tylko w określonych warunkach widocznego obszaru. Pozwala to uniknąć wielokrotnego wczytywania jednego zasobu, który pasuje do bieżącego widocznego obszaru.
Podsumowanie
Z tego przewodnika dowiesz się, jak stosować zapytania o multimedia, by żądać obrazów tła dopasowanych do konkretnych rozmiarów ekranu, i zaoszczędzić bajty podczas otwierania witryny na mniejszych urządzeniach, np. na komórkach.
Do zaimplementowania elastycznego tła użyto reguły @media. Ta technika jest powszechnie obsługiwana przez wszystkie przeglądarki.
Nowa funkcja CSS image-set() może być używana w tym samym celu z mniejszą liczbą wierszy kodu. W chwili obecnej ta funkcja nie jest obsługiwana we wszystkich przeglądarkach, ale warto śledzić rozwój jej rozpowszechnienia, ponieważ może stanowić interesującą alternatywę dla tej techniki.