Wyświetlaj obrazy o prawidłowych wymiarach

Katie Hempenius
Katie Hempenius

Ta usterka jest tak mała, że zdjęcia można przeglądać ręcznie. W przypadku większości witryn konieczne jest jednak użycie narzędzia takiego jak Lighthouse, aby zautomatyzować ten proces.

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekranpeł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. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.
  6. Sprawdź wyniki audytu Obrazy o właściwym rozmiarze.

Błąd kontroli rozmiaru obrazów 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ć wymiary elementu flower_logo.png. Za pomocą ImageMagick możesz zmienić rozmiar obrazu, aby pasował. ImageMagick to narzędzie wiersza poleceń do edycji obrazów, które jest wstępnie zainstalowane w środowisku codelab.

  1. Kliknij Remix to Edit (Zmiksuj 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 elementów Narzędzi deweloperskich.

Panel elementów Narzędzi deweloperskich

Oto kod usługi porównywania cen 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. Po zmianie rozmiaru obraz nadal jest dość duży, więc skutki tej zmiany nie powinny być zauważalne.

  • Użyj ImageMagick, aby zmienić rozmiar obrazu na 960 pikseli szerokości. Typ terminala:
# 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 pominąć ten kompromis, używając elastycznych obrazów w różnych rozmiarach. Więcej informacji znajdziesz w przewodniku po reklamach elastycznych.