Wyświetlaj obrazy o prawidłowych wymiarach

Katie Hempenius
Katie Hempenius

Ten błąd jest na tyle mały, że obrazy można było sprawdzić ręcznie. W przypadku większości witryn konieczne jest jednak użycie narzędzia takiego jak Lighthouse do zautomatyzowania tego procesu.

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  3. Kliknij kartę Lighthouse.
  4. Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.
  6. Sprawdź wyniki audytu Obrazy o właściwym rozmiarze.

Audyt prawidłowych rozmiarów obrazów nie przechodzi w Lighthouse.

Audyt Lighthouse pokazuje, że oba obrazy na tej stronie wymagają zmiany rozmiaru.

Rozwiąż problem flower_logo.png

Zacznij od góry strony i popraw obraz logo.

  • Sprawdź flower_logo.png w panelu Elementy w narzędziach DevTools.

Panel Elementy w Narzędziach deweloperskich

Oto kod CSS dla flower_logo.png:

.logo {
  width: 50px;
  height: 50px;
}

Szerokość tego obrazu w CSS wynosi 50 pikseli, więc należy dopasować do niej wartość flower_logo.png. Aby dopasować rozmiar obrazu, możesz użyć programu ImageMagick. ImageMagick to narzędzie wiersza poleceń do edycji obrazów, które jest wstępnie zainstalowane w środowisku Codelab.

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
  3. W konsoli wpisz:
convert flower_logo.png -resize 50x50 flower_logo.png

Fix flower_photo.jpg

Następnie popraw zdjęcie fioletowych kwiatów.

  • Sprawdź flower_photo.jpg w panelu Elementy w narzędziach DevTools.

Panel Elementy w Narzędziach deweloperskich

Oto kod CSS dla flower_photo.jpg:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw ustawia szerokość CSS elementu flower_photo.jpg na „połowę szerokości przeglądarki”. (1vwrówna się 1% szerokości przeglądarki).

Idealny rozmiar tego obrazu zależy od urządzenia, na którym jest wyświetlany, dlatego należy dostosować jego rozmiar do potrzeb większości użytkowników. Możesz sprawdzić dane analityczne, aby dowiedzieć się, które rozdzielczości ekranu są najczęściej używane przez użytkowników:

Statystyki Google Analytics dotyczące rozdzielczości ekranu.

Te dane wskazują, że ponad 95%użytkowników tej witryny korzysta z ekranów o rozdzielczości 1920 pikseli lub mniejszej.

Na podstawie tych informacji możemy obliczyć, jaka powinna być szerokość obrazu: (1920 pikseli) * (50% szerokości przeglądarki) = 960 pikseli

W przypadku rozdzielczości większej niż 1920 pikseli szerokości obraz zostanie rozciągnięty, aby wypełnić obszar. Zmieniony obraz jest nadal dość duży, więc efekty tej zmiany powinny być niewidoczne.

  • Użyj programu ImageMagick, aby zmienić rozmiar obrazu na 960 pikseli szerokości. W terminalu:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Ponowna analiza Lighthouse

  • Ponownie przeprowadź audyt wydajności Lighthouse, aby sprawdzić, czy obrazy zostały pomyślnie zmienione.

audyt Lighthouse dotyczący prawidłowego rozmiaru obrazów.

… i nie działa. Dlaczego?

Lighthouse przeprowadza testy na urządzeniu Nexus 5X. Nexus 5x ma ekran o rozdzielczości 1080 x 1920. W przypadku Nexusa 5x optymalna szerokość flower_photo.jpg to 540 pikseli (1080 pikseli * 5). Jest on znacznie mniejszy niż nasz obraz po zmianie rozmiaru.

Czy rozmiar obrazu powinien być jeszcze mniejszy? Może. Odpowiedź na to pytanie nie jest jednak zawsze jednoznaczna.

Tutaj chodzi o kompromis między jakością obrazu na urządzeniach o wysokiej rozdzielczości a wydajnością. Łatwo przeszacować, jak dokładnie użytkownicy będą oglądać obrazy, więc lepiej je zmniejszyć. Jednak w niektórych przypadkach większa znaczenie ma jakość obrazu.

Dobra wiadomość jest taka, że możesz całkowicie ominąć ten kompromis, korzystając z obrazów elastycznych, aby wyświetlać obrazy w różnych rozmiarach. Więcej informacji na ten temat znajdziesz w przewodniku dotyczącym elastycznych obrazów.