Wyświetlaj obrazy o prawidłowych wymiarach

Katie Hempenius

Uruchom latarnię morską

Ten Usterek jest na tyle mały, że można by przyjrzeć się jego obrazom ręcznie. Jednak w przypadku większości witryn kluczowe jest użycie narzędzia takiego jak Lighthouse.

1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
3. Kliknij kartę Lighthouse.
4. Upewnij się, że na liście Kategorie jest zaznaczone pole wyboru Skuteczność.
5. Kliknij przycisk Wygeneruj raport.
6. Poszukaj wyników kontroli Obrazy o odpowiednim rozmiarze.

Audyt narzędzia Lighthouse pokazuje, że musisz zmienić rozmiar obu obrazów na tej stronie.

Rozwiąż problem z kartą flower_logo.png

Popraw obraz logo w górnej części strony.

• Sprawdź flower_logo.png w panelu Elementy Narzędzi deweloperskich.

To jest usługa porównywania cen dla flower_logo.png:

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

Szerokość elementu CSS to 50 pikseli, więc rozmiar flower_logo.png należy dostosować, aby go dopasować. Za pomocą narzędzia ImageMagick możesz zmienić rozmiar obrazu, aby go dopasować. ImageMagick to narzędzie interfejsu wiersza poleceń do edycji obrazów, które jest zainstalowane w środowisku ćwiczeń z programowania.

1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
2. Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
3. W konsoli wpisz:

convert flower_logo.png -resize 50x50 flower_logo.png

Popraw parametr Flower_photo.jpg

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

• Sprawdź flower_photo.jpg w panelu Elementy Narzędzi deweloperskich.

To jest usługa porównywania cen 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”. (1vw odpowiada 1% szerokości przeglądarki).

Idealny rozmiar tego obrazu zależy od urządzenia, na którym będzie wyświetlany, dlatego zmień jego rozmiar na taki, który będzie odpowiadał większości użytkowników. Możesz sprawdzić dane analityczne, aby dowiedzieć się, które rozdzielczości ekranu są popularne wśród użytkowników:

Dane te wskazują, że ponad 95%użytkowników tej witryny korzysta z ekranów o rozdzielczości do 1920 pikseli.

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

W przypadku rozdzielczości większych niż 1920 pikseli obraz jest rozciągnięty, aby objął dany obszar. Po zmianie rozmiaru obraz jest nadal dość duży, więc efekty tej zmiany nie powinny być zbyt zauważalne.

• Użyj narzędzia ImageMagick, aby zmienić szerokość obrazu na 960 pikseli. Typ terminala:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

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

Uruchom ponownie latarnię morską

• Ponownie uruchom audyt wydajności w Lighthouse, aby sprawdzić, czy rozmiar obrazów został zmieniony.

... I nie udało się! Dlaczego?

Narzędzie Lighthouse przeprowadza testy na Nexusie 5x. Nexus 5x ma ekran o wymiarach 1080 x 1920. W przypadku Nexus 5x optymalny rozmiar flower_photo.jpg to 540 pikseli (1080 pikseli * . 5). Jest znacznie mniejszy niż obraz po zmianie rozmiaru.

Czy należy zmienić rozmiar obrazu, aby był jeszcze mniejszy? Może. Odpowiedź na to pytanie nie zawsze jest jednoznaczna.

W tym przypadku kompromis jest między jakością obrazu na urządzeniach o wysokiej rozdzielczości a wydajnością. Łatwo oszacować, jak dokładnie użytkownicy będą przyglądać się obrazom, dlatego prawdopodobnie warto je zmniejszyć. Jednak w niektórych przypadkach, w których jakość obrazu jest ważniejsza,

Dobra wiadomość jest taka, że możesz obejść ten kompromis, używając obrazów elastycznych do wyświetlania obrazów o różnych rozmiarach. Więcej informacji znajdziesz w przewodniku po obrazach elastycznych.