Wiele witryn wymaga dużych zasobów, takich jak obrazy, które nie są zoptymalizowane pod kątem określonych ekranów, oraz wysyła duże pliki CSS zawierające style, których niektóre urządzenia nigdy nie wykorzystają. Zapytania o multimedia to popularna technika dostarczania dostosowanych arkuszy stylów i komponentów na różne ekrany w celu zmniejszenia ilości danych przesyłanych do użytkowników i poprawienia wydajności wczytywania strony. W tym przewodniku dowiesz się, jak za pomocą zapytań o multimedia wysyłać obrazy w takim rozmiarze, jaki jest potrzebny. Jest to technika powszechnie znana jako elastyczny obraz.
Wymagania wstępne
W tym przewodniku przyjęto założenie, że znasz Narzędzie deweloperów w Chrome. Jeśli wolisz, możesz użyć narzędzi deweloperskich innej przeglądarki. Wystarczy, że zrzuty ekranu z Narzędzi dla programistów w Chrome z tego przewodnika odniesiesz do odpowiednich funkcji w wybranej przez siebie przeglądarce.
Obrazy tła o zmiennej szerokości
Najpierw przeanalizuj ruch w sieci w przypadku nieoptymalizowanego demo:
- Otwórz niezoptymalizowane demo w nowej karcie Chrome.
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Sieć.
- Odśwież stronę.
Widzisz, że jedynym obrazem, którego dotyczy żądanie, jest background-desktop.jpg o rozmiarze 1006 KB:
Zmień rozmiar okna przeglądarki i zwróć uwagę, że dziennik sieci nie zawiera żadnych nowych żądań wysyłanych przez stronę. Oznacza to, że ten sam obraz tła jest używany na ekranach o różnych rozmiarach.
Style, które kontrolują obraz tła, znajdziesz w pliku style.css:
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 użytych właściwości:
background-position: center center: wyśrodkuj obraz w pionie i w poziomie.background-repeat: no-repeat: wyświetlanie obrazu tylko raz.background-attachment: fixed: unikaj przewijania obrazu tła.background-size: cover: zmień rozmiar obrazu, aby pokrył cały kontener.background-image: url(images/background-desktop.jpg): adres URL obrazu.
Po połączeniu te style informują przeglądarkę, aby dostosowywała obraz tła do różnych wysokości i szerokości ekranu. To pierwszy krok do uzyskania tła płynnie reagującego na zmiany.
Używanie jednego obrazu tła na wszystkie rozmiary ekranu wiąże się z pewnymi ograniczeniami:
- Wysyłana jest taka sama ilość bajtów niezależnie od rozmiaru ekranu, nawet jeśli na niektórych urządzeniach, np. telefonach, mniejszy i lżejszy obraz tła wyglądałby równie dobrze. Ogólnie zaleca się wysyłanie jak najmniejszego obrazu, który nadal dobrze wygląda na ekranie użytkownika, aby zwiększyć wydajność i oszczędzać dane użytkownika.
- Na mniejszych urządzeniach obraz zostanie rozciągnięty lub przycięty, aby wypełnić 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.
Korzystanie z zapytań o multimedia
Korzystanie z zapytań medialnych to powszechna technika deklarowania arkuszy stylów, które będą miały zastosowanie tylko do określonych mediów lub typów urządzeń. Są one implementowane za pomocą reguł@media, które umożliwiają zdefiniowanie zestawu punktów przecięcia, w których definiowane są określone style.
Gdy warunki zdefiniowane przez regułę @media zostaną spełnione (np. określona szerokość ekranu), zostanie zastosowana grupa stylów zdefiniowana w punkcie przełamania.
Aby zastosować zapytania multimedialne do witryny, aby używać różnych obrazów w zależności od maksymalnej szerokości urządzenia, które wysyła żądanie strony, wykonaj te czynności.
- W sekcji
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 przecięcia dla każdej szerokości ekranu na podstawie typowych wymiarów w pikselach, które zwykle mają ekrany telefonów, tabletów i komputerów:
Na urządzeniach mobilnych:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
W przypadku tabletów:
@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);
}
}
Aby zobaczyć wprowadzone zmiany, otwórz w przeglądarce zoptymalizowaną wersję pliku style.css.
pomiar na różnych urządzeniach,
Następnie wizualizuj powstałą stronę na ekranach o różnych rozmiarach i na symulowanych urządzeniach mobilnych:
- Otwórz zoptymalizowaną stronę w nowej karcie Chrome.
- Zwęź widoczny obszar (mniej niż
480px). - Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Sieć.
- Odśwież stronę.
Zwróć uwagę, jak zostało przesłane żądanie dotyczące obrazu
background-mobile.jpg. - Zwiększ widoczny obszar. Gdy jest szersza niż
480px, zwróć uwagę, jak jest wywoływana funkcjabackground-tablet.jpg. Gdy jest szersza niż1025px, zwróć uwagę, jak jest wywoływana funkcjabackground-desktop.jpg.
Gdy zmienia się szerokość ekranu przeglądarki, wysyłane są prośby o nowe obrazy.
W szczególności, gdy szerokość jest mniejsza niż wartość określona w punkcie granicznej na urządzeniu mobilnym (480 pikseli), w dzienniku sieciowym widać:
Rozmiar nowego tła na urządzenia mobilne jest o 67% mniejszy niż rozmiar tła na komputery.
Wpływ na największe wyrenderowanie treści (LCP)
Elementy z tłem w formie obrazu CSS są uważane za kandydatów do największego wyrenderowania treści (LCP), ale nie są wykrywane 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ą, którą warto rozważyć, jest sprawdzenie, czy obraz kandydata do LCP może być użyty w elemencie <img> z atrybutami srcset i sizes, aby zapewnić jego elastyczność. Skaner wstępnego załadowania przeglądarki będzie wykrywać elementy <img> i wysyłać dla nich żądania, gdy parsowanie jest blokowane przez renderowanie.
Jeśli nie możesz (lub nie chcesz) unikać używania obrazu tła CSS, drugą opcją jest wstępne wczytywanie obrazów responsywnych, aby mieć pewność, że wczytujesz odpowiedni obraz dla odpowiedniego rozmiaru widocznego obszaru. Atrybuty elementów <link> media, imagesrcset i imagesizes informują przeglądarkę, że dany zasób odnosi się tylko do określonych warunków widocznego obszaru, co zapobiega wielokrotnemu wstępnemu wczytywaniu zasobów, gdy chcesz załadować tylko jeden zasób odpowiedni dla bieżącego widocznego obszaru.
Podsumowanie
Z tego poradnika dowiesz się, jak stosować zapytania o multimedia, aby żądać obrazów tła dostosowanych do określonych rozmiarów ekranu i oszczędzać bajty podczas otwierania witryny na mniejszych urządzeniach, takich jak telefony komórkowe.
Do wdrożenia tła elastycznego użyto reguły @media. Ta technika jest powszechnie obsługiwana przez wszystkie przeglądarki.
Nowa funkcja CSS: image-set() może służyć do tego samego celu, ale przy użyciu mniejszej liczby linii kodu. W momencie pisania tego artykułu ta funkcja nie jest obsługiwana we wszystkich przeglądarkach, ale warto śledzić, jak się rozwija, ponieważ może stanowić interesującą alternatywę dla tej techniki.