Uruchamianie Lighthouse
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.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran.
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Lighthouse.
- Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
- Kliknij przycisk Wygeneruj raport.
- Sprawdź wyniki audytu Obrazy o właściwym rozmiarze.
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.
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.
- Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
- Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
- 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.
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:
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.
… 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.