Zoptymalizuj obrazy tła CSS za pomocą zapytań o media

Demian Renzulli
Demian Renzulli

Wiele witryn żąda dużych zasobów (np. obrazów), które nie są zoptymalizowane pod kątem niektórych 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. Pozwala to zmniejszyć ilość danych przekazywanych użytkownikom i przyspieszyć ładowanie stron. W tym przewodniku pokazujemy, 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, że zmapuj zrzuty ekranu z Narzędzi deweloperskich w Chrome, które znajdziesz w tym przewodniku, do odpowiednich funkcji w przeglądarce.

Elastyczne obrazy tła

Najpierw przeanalizuj ruch sieciowy w niezoptymalizowanej wersji demonstracyjnej:

  1. Otwórz wersję demonstracyjną niezoptymalizowanej w nowej karcie Chrome.
  2. Naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu), aby otworzyć Narzędzia deweloperskie.
  3. Kliknij kartę Sieć.
  4. Odśwież stronę.

Widać, że jedyny żądany obraz to background-desktop.jpg, który ma rozmiar 1006 KB:

Śledzenie sieci w DevTools dla niezoptymalizowanego obrazu tła.

Zmień rozmiar okna przeglądarki i zauważ, że w dzienniku sieci nie są widoczne żadne nowe żądania wysyłane przez stronę. Oznacza to, że na ekranach wszystkich rozmiarów jest używane to samo tło obrazu.

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 właściwości:

  • background-position: center center: wyśrodkuj obraz w pionie i poziomie.
  • background-repeat: no-repeat: zdjęcie wyświetla się tylko raz.
  • background-attachment: fixed: unikaj przewijania obrazu tła.
  • background-size: cover: zmień rozmiar obrazu, aby objął cały kontener.
  • background-image: url(images/background-desktop.jpg): adres URL obrazu.

Gdy te style zostaną połączone, przeglądarka dostosuje obraz tła do różnych wysokości i szerokości ekranu. To pierwszy krok na drodze do uzyskania elastycznych tła.

Stosowanie jednego obrazu tła dla wszystkich rozmiarów ekranu wiąże się z pewnymi ograniczeniami:

  • Taka sama liczba bajtów zostanie wysłanych bez względu na rozmiar ekranu, nawet jeśli na niektórych urządzeniach, np. telefonach, mniejsze i bardziej lżejsze tło obrazu wyglądałoby równie dobrze. Ogólnie rzecz biorąc, staraj się wysyłać jak najmniejszy obraz, który nadal dobrze wygląda na ekranie użytkownika. Zwiększa to wydajność i umożliwia zaoszczędzenie danych użytkownika.
  • Na mniejszych urządzeniach obraz jest rozciągnięty lub przycięty, aby zasłaniał cały ekran, co może spowodować ukrycie odpowiednich fragmentów tła użytkownikom.

W następnej sekcji dowiesz się, jak zastosować optymalizację, aby wczytywać różne obrazy tła na urządzeniu użytkownika.

Korzystanie z zapytań o media

Zapytania o media to często stosowana technika deklarowania arkuszy stylów, które mają zastosowanie tylko do określonych typów mediów lub urządzeń. Można je implementować za pomocą reguł@media, które umożliwiają definiowanie zestawu punktów przerwania zawierających określone style. Gdy zostaną spełnione warunki określone przez regułę @media (np. określona szerokość ekranu), zostanie zastosowana grupa stylów zdefiniowanych w punkcie przerwania.

Aby stosować zapytania o media do witryny, aby używać różnych obrazów w zależności od maksymalnej szerokości urządzenia, które ma wyświetlić stronę, możesz zastosować zapytania opisane poniżej.

  • W style.css usuń 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, opierając się na typowych wymiarach 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 zoptymalizowaną wersję pliku style.css w przeglądarce, aby zobaczyć wprowadzone zmiany.

Pomiar w przypadku różnych urządzeń

Następnie zwizualizuj wynikową witrynę na ekranach o różnych rozmiarach i na symulowanych urządzeniach mobilnych:

  1. Otwórz zoptymalizowaną witrynę w nowej karcie Chrome.
  2. Zwężenie widocznego obszaru (poniżej 480px).
  3. Naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu), aby otworzyć Narzędzia deweloperskie.
  4. Kliknij kartę Sieć.
  5. Odśwież stronę. Zwróć uwagę na sposób żądania obrazu background-mobile.jpg.
  6. poszerzyć widoczny obszar, Gdy jest szersza niż 480px, zwróć uwagę na sposób żądania background-tablet.jpg. Gdy jest szersza niż 1025px, zwróć uwagę na sposób żądania background-desktop.jpg.

Zmiana szerokości ekranu przeglądarki powoduje wysłanie żądania nowych obrazów.

W szczególności, gdy szerokość jest poniżej wartości zdefiniowanej w punkcie przerwania na urządzeniu mobilnym (480 pikseli), widoczny jest następujący log sieci:

Śledzenie sieci w DevTools zoptymalizowanego obrazu tła.

Rozmiar nowego tła na urządzenia mobilne jest o 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 kandydujące do największego wyrenderowania 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óźniać LCP witryny.

W pierwszej kolejności zastanów się, czy obraz kandydata w zakresie LCP może działać w elemencie <img> z atrybutami srcset i sizes. Skaner wstępnego wczytywania przeglądarki wykryje elementy <img> i wyśle ich żądania, gdy parser będzie zablokowany podczas renderowania.

Jeśli nie możesz (lub nie chcesz) unikać używania obrazu tła CSS, drugą opcją jest wstępne wczytywanie obrazów elastycznych, aby upewnić się, że wstępnie wczytujesz obraz odpowiedni do właściwego rozmiaru widocznego obszaru. Atrybuty media, imagesrcset i imagesizes elementów <link> wskazują przeglądarce, że dana wskazówka dotycząca zasobu ma zastosowanie tylko w określonych warunkach widocznego obszaru. Pozwala to uniknąć wielu zbędnych wczytań, gdy chcesz wczytać tylko 1 zasób pasujący do bieżącego widocznego obszaru.

Podsumowanie

Z tego przewodnika dowiesz się, jak stosować zapytania o multimedia, aby żądać obrazów tła dostosowanych do konkretnych rozmiarów ekranów, i oszczędzać bajty podczas otwierania strony na mniejszych urządzeniach, takich jak telefony komórkowe. Udało Ci się zastosować regułę @media do wdrożenia elastycznego tła. Ta metoda jest powszechnie obsługiwana przez wszystkie przeglądarki. Nowa funkcja CSS: image-set(), może być używana do tego samego celu z mniejszą liczbą wierszy kodu. W chwili obecnej ta funkcja nie jest obsługiwana we wszystkich przeglądarkach, ale warto śledzić rozwój tej funkcji, ponieważ może ona stanowić interesującą alternatywę.